atom使用全局配置ESLint

scq000 發(fā)布于2019-08-19 18:48 / 2262人閱讀

摘要：因?yàn)槲覀兪褂玫氖侨值陌惭b包。它對(duì)于要求最嚴(yán)格，比如禁止使用定義變量，必須使用或者等等。注意，還是全局化安裝。把以下代碼放入，就做好了你的全局配置文件。另外，我缺省會(huì)大量使用，不想讓它總是報(bào)告什么這個(gè)變量未定義等錯(cuò)誤。

ESLint是一個(gè)Javascript靜態(tài)檢查工具，它可以幫你養(yǎng)成良好的編程習(xí)慣，使你的javascript代碼達(dá)到國(guó)際化的水準(zhǔn)。ESLint是所有Javascrpt靜態(tài)檢查工具里最晚誕生的一個(gè)，之前還曾經(jīng)有過(guò)JSLint以及JSHint等工具，但JSLint和JSHint都是用的一套標(biāo)準(zhǔn)，在目前這個(gè)前端技術(shù)飛速發(fā)展的時(shí)代已經(jīng)顯得有點(diǎn)落伍。ESLint的好處是既提供了國(guó)際大廠的標(biāo)準(zhǔn)，同時(shí)又給了你自定義標(biāo)準(zhǔn)的可能性。ESLint的推薦設(shè)置方式是按項(xiàng)目設(shè)置，但是如果我們有很多個(gè)不同的javascript項(xiàng)目的話，一個(gè)一個(gè)去設(shè)置未免太麻煩，所以在這里介紹的是全局設(shè)置方法，一次設(shè)置，所有項(xiàng)目全部采用同一標(biāo)準(zhǔn)。

首先，在atom中安裝linter插件和linter-eslint插件。安裝完成之后，linter-eslint的缺省設(shè)置有2個(gè)地方需要修改：

把Disable when no ESLint config is found的對(duì)鉤去掉。這個(gè)選項(xiàng)的意思是說(shuō)：如果你的javascript項(xiàng)目文件夾中沒(méi)有.eslintrc這樣的配置文件的話，那么ESLint就不起作用。在這里，我們要設(shè)置為全局lint，不需要在每個(gè)javascript文件夾中包含.eslintrc文件，所以要把它去掉，否則由于我們的項(xiàng)目文件夾中沒(méi)有.eslintrc文件，ESLint會(huì)不起作用。

把Use global ESLint installation的對(duì)鉤勾上。因?yàn)槲覀兪褂玫氖侨值腅SLint安裝包。

下面，開(kāi)始安裝ESLint：

npm install eslint -g
ESLint是通過(guò)npm安裝的，這里的-g選項(xiàng)代表全局，也就是說(shuō)它不會(huì)把ESLint的可執(zhí)行文件安裝在你的項(xiàng)目文件夾或者說(shuō)當(dāng)前文件夾下。如果你沒(méi)有設(shè)置這個(gè)-g選項(xiàng)的話，它會(huì)在你當(dāng)前文件夾下安裝ESLint可執(zhí)行文件，那樣就不是全局安裝了。后面我們所有安裝包都要用使用這個(gè)-g選項(xiàng)

eslint -v
安裝完成之后，你可以先執(zhí)行一下eslint -v這個(gè)命令來(lái)看一下eslint是否已經(jīng)安裝成功了，如果沒(méi)有的話，你需要反復(fù)檢查，直到確保eslint安裝已經(jīng)成功為止。

關(guān)于eslint --init可以不必執(zhí)行，它主要的作用是在你當(dāng)前文件夾下生成.eslintrc文件，但同時(shí)也會(huì)把eslint在你當(dāng)前文件夾下重新安裝一遍，并且如果你使用包的話，它還會(huì)要求必須要有package.json文件，總之會(huì)很麻煩。但如果你是第一次使用的話，我建議你可以執(zhí)行一下試試，它主要提供3種預(yù)安裝包：Google標(biāo)準(zhǔn)、Airbnb標(biāo)準(zhǔn)和Standard標(biāo)準(zhǔn)。這3個(gè)標(biāo)準(zhǔn)里，Google就是Google公司的標(biāo)準(zhǔn)，Airbnb是Airbnb公司的標(biāo)準(zhǔn)，Standard就是一些前端工程師自定的標(biāo)準(zhǔn)。目前來(lái)看，公認(rèn)的最好的標(biāo)準(zhǔn)是Airbnb標(biāo)準(zhǔn)（互聯(lián)網(wǎng)發(fā)展日新月異，永遠(yuǎn)是年輕人顛覆老年人，連Google都老了）。它對(duì)于ES6要求最嚴(yán)格，比如禁止使用var定義變量，必須使用let或者const等等。既然采用最新標(biāo)準(zhǔn)，當(dāng)然就讓你的代碼一次性向最高標(biāo)準(zhǔn)看齊，省得以后麻煩。

npm install eslint-config-airbnb -g
精彩的重頭戲來(lái)了：看到漂亮的airbnb了嗎？我們就里就是要安裝Airbnb的標(biāo)準(zhǔn)了。注意-g，還是全局化安裝。

npm install eslint-plugin-jsx-a11y -g
a11y是accessibility（無(wú)障礙環(huán)境）的縮寫(xiě)，從第一個(gè)字母a到最后一個(gè)字母y，中間一共是11個(gè)字母，所以就叫a11y了，類(lèi)似于i18n表示internationalization（國(guó)際化）一樣。JSX主要是React會(huì)用到，雖然我們的項(xiàng)目里可能并不會(huì)用React，但是這個(gè)Airbnb標(biāo)準(zhǔn)必須要用到它，所以必須安裝。

npm install eslint-plugin-import -g
同上，Airbnb標(biāo)準(zhǔn)必需。

最后，編寫(xiě)我們自己的全局.eslintrc文件：

vi ~/.eslintrc.json

前面講過(guò)了，為項(xiàng)目服務(wù)的.eslintrc.json文件是放在項(xiàng)目文件夾下的，全局的.eslintrc.json文件則放在當(dāng)前用戶的根目錄下，類(lèi)Unix系統(tǒng)的當(dāng)前用戶目錄是~，而Windows系統(tǒng)的話則是類(lèi)似于C:WindowsUsersUsername這樣的地方。
把以下代碼放入.eslintrc.json，就做好了你的全局ESLint配置文件。

{
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react"
    ]
}

在atom中打開(kāi)你的某一個(gè)js文件，隨便改幾個(gè)字符看看效果吧，不出所料的話，應(yīng)該會(huì)出現(xiàn)一堆紅色的錯(cuò)誤。如果沒(méi)有出現(xiàn)，不是你的代碼沒(méi)有問(wèn)題，而是你沒(méi)有安裝對(duì)。

Airbnb的缺省標(biāo)準(zhǔn)是每行的縮進(jìn)字符是2個(gè)空格鍵，而我一般喜歡使用4個(gè)空格鍵作縮進(jìn)，所以這里需要一點(diǎn)小小的定制。另外，我缺省會(huì)大量使用jQuery，不想讓它總是報(bào)告什么jQuery這個(gè)變量未定義等錯(cuò)誤。所以增加了幾行，最終的.eslintrc.json如下：

{
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react"
    ],
    "env": {
        "jquery": true
    },
    "rules": {
        "indent": ["error", 4]
    }
}

這樣你在任何項(xiàng)目中的js文件都會(huì)按照這同一套標(biāo)準(zhǔn)去檢查。好了，現(xiàn)在可以開(kāi)始改你的代碼了，解決那一大堆紅叉子吧，我相信一定不少。