在團(tuán)隊(duì)的項(xiàng)目開發(fā)過程中，代碼維護(hù)所占的時(shí)間比重往往大于新功能的開發(fā)。因此編寫符合團(tuán)隊(duì)編碼規(guī)范的代碼是至關(guān)重要的，這樣做不僅可以很大程度地避免基本語法錯(cuò)誤，也保證了代碼的可讀性，畢竟：
程序是寫給人讀的，只是偶爾讓計(jì)算機(jī)執(zhí)行一下。—— Donald Knuth
本文將講解如何在 VSCode 中配合 ESLint 擴(kuò)展來實(shí)踐團(tuán)隊(duì)內(nèi)部的前端編碼規(guī)范。
什么是 ESLint
ESLint（中文站點(diǎn)）是一個(gè)開源的 JavaScript 代碼檢查工具，使用 Node.js 編寫，由 Nicholas C. Zakas 于 2013 年 6 月創(chuàng)建。ESLint 的初衷是為了讓程序員可以創(chuàng)建自己的檢測(cè)規(guī)則，使其可以在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行的過程中。ESLint 的所有規(guī)則都被設(shè)計(jì)成可插入的，為了方便使用，ESLint 內(nèi)置了一些規(guī)則，在這基礎(chǔ)上也可以增加自定義規(guī)則。
安裝 ESLint 擴(kuò)展
安裝環(huán)境
Windows 10
安裝 ESLint 擴(kuò)展
首先，打開 VSCode 擴(kuò)展面板并搜索 ESLint 擴(kuò)展，然后點(diǎn)擊安裝
安裝完畢之后點(diǎn)擊重新加載以激活擴(kuò)展，但想要讓擴(kuò)展進(jìn)行工作，我們還需要先進(jìn)行 ESLint 的安裝配置。
安裝 ESLint
如果你僅僅想讓 ESLint 成為你項(xiàng)目構(gòu)建系統(tǒng)的一部分，我們可以在項(xiàng)目根目錄進(jìn)行本地安裝：
$ npm install eslint --save-dev
如果想使 ESLint 適用于你所有的項(xiàng)目，我們建議使用全局安裝，使用全局安裝 ESLint 后，你使用的任何 ESLint 插件或可分享的配置也都必須在全局安裝。
這里我們使用全局安裝：
$ npm install -g eslint
安裝完畢后，我們使用eslint --init命令在用戶目錄中生成一個(gè)配置文件（也可以在任何你喜歡的位置進(jìn)行生成）
我們?cè)诘谝粋€(gè)選項(xiàng)中選擇自定義代碼風(fēng)格，之后根據(jù)需要自行選擇。
設(shè)置完成后我們會(huì)得到一份文件名為.eslintrc.js的配置文件：
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
};
配置 ESLint
配置文件生成之后，我們接著可以進(jìn)行自定義修改，這里我們只粗略講解常用的配置項(xiàng)，完整的可配置項(xiàng)可訪問官方文檔
配置環(huán)境
在上文生成的配置文件中可以使用env屬性來指定要啟用的環(huán)境，將其設(shè)置為true，以保證在進(jìn)行代碼檢測(cè)時(shí)不會(huì)把這些環(huán)境預(yù)定義的全局變量識(shí)別成未定義的變量而報(bào)錯(cuò)：
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jquery": true
}
設(shè)置語言選項(xiàng)
默認(rèn)情況下，ESLint 支持 ECMAScript 5 語法，如果你想啟用對(duì) ECMAScript 其它版本和 JSX 等的支持，ESLint 允許你使用parserOptions屬性進(jìn)行指定想要支持的 JavaScript語言選項(xiàng)，不過你可能需要自行安裝eslint-plugin-react等插件。
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
配置規(guī)則
在上文的配置文件中，"extends": "eslint:recommended"選項(xiàng)表示啟用推薦規(guī)則，在推薦規(guī)則的基礎(chǔ)上我們還可以根據(jù)需要使用rules新增自定義規(guī)則，每個(gè)規(guī)則的第一個(gè)值都是代表該規(guī)則檢測(cè)后顯示的錯(cuò)誤級(jí)別：
"off"或0- 關(guān)閉規(guī)則"warn"或1- 將規(guī)則視為一個(gè)警告"error"或2- 將規(guī)則視為一個(gè)錯(cuò)誤
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
完整的可配置規(guī)則列表可訪問：http://eslint.cn/docs/rules/其中帶√標(biāo)記的表示該規(guī)則為推薦規(guī)則。
設(shè)置 ESLint 擴(kuò)展
安裝并配置完成 ESLint 后，我們繼續(xù)回到 VSCode 進(jìn)行擴(kuò)展設(shè)置，依次點(diǎn)擊文件 > 首選項(xiàng) > 設(shè)置打開 VSCode 配置文件
從左側(cè)系統(tǒng)設(shè)置中可以看到，ESLint 擴(kuò)展默認(rèn)已經(jīng)啟用，我們現(xiàn)在只需在右側(cè)用戶設(shè)置中添加配置來指定我們創(chuàng)建的.eslintrc.js配置文件路徑即可啟用自定義規(guī)則檢測(cè)，ESLint 會(huì)查找并自動(dòng)讀取它們：
"eslint.options": {
"configFile": "E:/git/github/styleguide/eslint/.eslintrc.js"
},
至此，我們已經(jīng)可以使用 ESLint 擴(kuò)展來檢測(cè)我們的 js 文件了。
讓 ESLint 支持 Vue 單文件組件
由于 ESLint 默認(rèn)只支持 js 文件的腳本檢測(cè)，如果我們需要支持類html文件（如vue）的內(nèi)聯(lián)腳本檢測(cè)，還需要安裝eslint-plugin-html插件。因?yàn)槲覀兪褂萌职惭b了 ESLint，所以eslint-plugin-html插件也必須進(jìn)行全局安裝：
$ npm install -g eslint-plugin-html
安裝完成后，我們?cè)俅未蜷_文件 > 首選項(xiàng) > 設(shè)置，在右側(cè)用戶設(shè)置中修改 ESLint 的相關(guān)配置并保存：
"eslint.options": {
"configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",
"plugins": ["html"]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
]
最后，我們打開一個(gè)vue文件，可以發(fā)現(xiàn) ESLint 擴(kuò)展已經(jīng)正常工作了，嗯，enjoy yourself (●ˇ?ˇ●)
文章轉(zhuǎn)自：使用 VSCode + ESLint 實(shí)踐前端編碼規(guī)范 ?--hardylin
