使用 VSCode + ESLint 實踐前端編碼規範

在團隊的項目開發過程當中，代碼維護所佔的時間比重每每大於新功能的開發。所以編寫符合團隊編碼規範的代碼是相當重要的，這樣作不只能夠很大程度地避免基本語法錯誤，也保證了代碼的可讀性，畢竟：

程序是寫給人讀的，只是偶爾讓計算機執行一下。—— Donald Knuth

本文將講解如何在 VSCode 中配合 ESLint 擴展來實踐團隊內部的前端編碼規範。

• 前端編碼規範

• ESLint 完整配置文件

什麼是 ESLint

ESLint（中文站點）是一個開源的 JavaScript 代碼檢查工具，使用 Node.js 編寫，由 Nicholas C. Zakas 於 2013 年 6 月建立。ESLint 的初衷是爲了讓程序員能夠建立本身的檢測規則，使其能夠在編碼的過程當中發現問題而不是在執行的過程當中。ESLint 的全部規則都被設計成可插入的，爲了方便使用，ESLint 內置了一些規則，在這基礎上也能夠增長自定義規則。

安裝 ESLint 擴展

安裝環境

• VSCode V1.11.1

• Windows 10

安裝 ESLint 擴展

首先，打開 VSCode 擴展面板並搜索 ESLint 擴展，而後點擊安裝

安裝完畢以後點擊 從新加載 以激活擴展，但想要讓擴展進行工做，咱們還須要先進行 ESLint 的安裝配置。

安裝 ESLint

若是你僅僅想讓 ESLint 成爲你項目構建系統的一部分，咱們能夠在項目根目錄進行本地安裝：

$ npm install eslint --save-dev

若是想使 ESLint 適用於你全部的項目，咱們建議使用全局安裝，使用全局安裝 ESLint 後，你使用的任何 ESLint 插件或可分享的配置也都必須在全局安裝。

這裏咱們使用全局安裝：

$ npm install -g eslint

安裝完畢後，咱們使用 eslint --init 命令在用戶目錄中生成一個配置文件（也能夠在任何你喜歡的位置進行生成）

咱們在第一個選項中選擇自定義代碼風格，以後根據須要自行選擇。

設置完成後咱們會獲得一份文件名爲 .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

配置文件生成以後，咱們接着能夠進行自定義修改，這裏咱們只粗略講解經常使用的配置項，完整的可配置項可訪問官方文檔

配置環境

在上文生成的配置文件中可使用 env 屬性來指定要啓用的環境，將其設置爲 true，以保證在進行代碼檢測時不會把這些環境預約義的全局變量識別成未定義的變量而報錯：

"env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jquery": true
}

設置語言選項

默認狀況下，ESLint 支持 ECMAScript 5 語法，若是你想啓用對 ECMAScript 其它版本和 JSX 等的支持，ESLint 容許你使用 parserOptions 屬性進行指定想要支持的 JavaScript 語言選項，不過你可能須要自行安裝 eslint-plugin-react 等插件。

"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}

配置規則

在上文的配置文件中， "extends": "eslint:recommended" 選項表示啓用推薦規則，在推薦規則的基礎上咱們還能夠根據須要使用 rules 新增自定義規則，每一個規則的第一個值都是表明該規則檢測後顯示的錯誤級別：

• "off" 或 0 - 關閉規則

• "warn" 或 1 - 將規則視爲一個警告

• "error" 或 2 - 將規則視爲一個錯誤

"rules": {
    "indent": [
        "error",
        4
    ],
    "linebreak-style": [
        "error",
        "windows"
    ],
    "quotes": [
        "error",
        "single"
    ],
    "semi": [
        "error",
        "never"
    ]
}

完整的可配置規則列表可訪問：http://eslint.cn/docs/rules/

其中帶 √ 標記的表示該規則爲推薦規則。

設置 ESLint 擴展

安裝並配置完成 ESLint 後，咱們繼續回到 VSCode 進行擴展設置，依次點擊 文件 > 首選項 > 設置 打開 VSCode 配置文件

從左側系統設置中能夠看到，ESLint 擴展默認已經啓用，咱們如今只需在右側用戶設置中添加配置來指定咱們建立的 .eslintrc.js 配置文件路徑便可啓用自定義規則檢測，ESLint 會查找並自動讀取它們：

"eslint.options": {
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js"
},

至此，咱們已經可使用 ESLint 擴展來檢測咱們的 js 文件了。

讓 ESLint 支持 Vue 單文件組件

因爲 ESLint 默認只支持 js 文件的腳本檢測，若是咱們須要支持類 html 文件（如 vue）的內聯腳本檢測，還須要安裝 eslint-plugin-html 插件。

由於咱們使用全局安裝了 ESLint，因此 eslint-plugin-html 插件也必須進行全局安裝：

$ npm install -g eslint-plugin-html

安裝完成後，咱們再次打開 文件 > 首選項 > 設置，在右側用戶設置中修改 ESLint 的相關配置並保存：

"eslint.options": {
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",
    "plugins": ["html"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
]

最後，咱們打開一個 vue 文件，能夠發現 ESLint 擴展已經正常工做了，嗯，enjoy yourself (●ˇ∀ˇ●)