前言

在團(tuán)隊(duì)協(xié)作開發(fā)中，為了統(tǒng)一代碼風(fēng)格，避免一些低級(jí)錯(cuò)誤，應(yīng)該設(shè)有團(tuán)隊(duì)成員統(tǒng)一遵守的編碼規(guī)范。很多語言都提供了Lint工具來實(shí)現(xiàn)這樣的功能，JavaScript也有類似的工具：ESLint。除了可以集成到構(gòu)建工具中(如：Gulp)在構(gòu)建過程中檢查代碼風(fēng)格以外；還可以通過將ESLint和代碼編輯器相結(jié)合以提供代碼風(fēng)格的實(shí)時(shí)校驗(yàn)。這里將介紹如何在Visual Studio Code使用ESLint來提供代碼風(fēng)格的實(shí)時(shí)校驗(yàn)。

安裝 Visual Studio Code ESLint 插件

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

ext install ESLint

使用 NPM 安裝 ESLint

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

npm install eslint -g

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

eslint --init

執(zhí)行命令后，我們選擇相應(yīng)的代碼風(fēng)格，也可以自定義，在這里我使用standard風(fēng)格的規(guī)則，如下所示：

?

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

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

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

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

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

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

使用ESLint校驗(yàn)代碼風(fēng)格

安裝完成后我們使用 Visual Studio Code 打開項(xiàng)目，可以看到ESLint插件在運(yùn)行了，不過給了我們一個(gè)錯(cuò)誤提示：

?

這時(shí)候我們需要在當(dāng)面目錄下輸入下面的命令安裝相應(yīng)的開發(fā)依賴包：

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

下面我們來測(cè)試一些看ESLint是否配置成功了，如下所示，我們編寫一段不符合我們?cè)O(shè)定代碼風(fēng)格的典型的IIFE代碼，可以看到ESLint插件為我們提供了準(zhǔn)確方便且實(shí)時(shí)的提示信息：

?

可以看到通過ESLint為我們提供的代碼風(fēng)格檢查，可以幫助我們可以寫出更規(guī)范，更優(yōu)雅的Javascript代碼了~

參考資料&進(jìn)一步閱讀

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Visual Studio Code 使用 ESLint 增强代码风格检查 - gyzhao - 博客园的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。