前言

在團隊協作開發中，為了統一代碼風格，避免一些低級錯誤，應該設有團隊成員統一遵守的編碼規范。很多語言都提供了Lint工具來實現這樣的功能，JavaScript也有類似的工具：ESLint。除了可以集成到構建工具中(如：Gulp)在構建過程中檢查代碼風格以外；還可以通過將ESLint和代碼編輯器相結合以提供代碼風格的實時校驗。這里將介紹如何在Visual Studio Code使用ESLint來提供代碼風格的實時校驗。

安裝 Visual Studio Code ESLint 插件

打開 Visual Studio Code ，首先使用快捷鍵?Ctrl?+?Shift?+?P?調出VsCode的控制臺，然后輸入下面的命令安裝ESLint插件：

ext install ESLint

使用 NPM 安裝 ESLint

為了方便我們通過ESLint命令行工具來幫助我們生成ESLint相關的配置，我們需要進行全局安裝：

npm install eslint -g 

安裝完成后我們使用命令行工具進入到需要引入ESLint的項目的目錄中，然后輸入下面的命令進行ESLint的初始化操作：

eslint --init

執行命令后，我們選擇相應的代碼風格，也可以自定義，在這里我使用standard風格的規則，如下所示：

?

配置ESLint的項目中需要設置好該項目的?package.json?文件，如果沒有的話可以使用?npm init來設置。

安裝完成后我們可以看到除了ESLint命令行工具為我們生成的ESLint依賴包，還有一個特殊的.eslintrc.json文件，該文件是ESLint的配置文件，如下所示：

{"extends": "standard","installedESLint": true,"plugins": ["standard"]
}

配置文件中除了聲明我們所使用的代碼風格以外，我們還可以定制自己的規則，比如：聲明全局變量或者規定字符串引號的風格，以及其他任何ESLint支持的規則都是可以配置的，下面是一個簡單的示例：

{"extends": "standard","installedESLint": true,"plugins": ["standard"],"rules": {//關閉額外的分號檢查//0:關閉，1:警告，2:異常"semi": 0,//字符串必須使用單引號"quotes": ["error","single"]}
}

更多配置相關可以參考官方文檔：http://eslint.org/docs/user-guide/configuring

使用ESLint校驗代碼風格

安裝完成后我們使用 Visual Studio Code 打開項目，可以看到ESLint插件在運行了，不過給了我們一個錯誤提示：

?

這時候我們需要在當面目錄下輸入下面的命令安裝相應的開發依賴包：

npm install eslint-plugin-promise --save-dev

下面我們來測試一些看ESLint是否配置成功了，如下所示，我們編寫一段不符合我們設定代碼風格的典型的IIFE代碼，可以看到ESLint插件為我們提供了準確方便且實時的提示信息：

?

可以看到通過ESLint為我們提供的代碼風格檢查，可以幫助我們可以寫出更規范，更優雅的Javascript代碼了~

參考資料&進一步閱讀

http://eslint.org/
http://eslint.org/docs/user-guide/configuring
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://csspod.com/getting-started-with-eslint/

原文:?http://www.gyzhao.me/2016/05/12/VsCodeESLint/　　作者: gyzhao