ESLint

ESLint 是一個開源的 Javascript 代碼檢測工具，通過將 js 代碼解析成抽象語法樹（AST），分析并給與代碼質量（如一些方法的使用方式不對）和代碼風格(縮進，引號等等）兩方面的提示。這樣就可以在編碼過程中發現問題，而不是在代碼的執行過程中。

• ESLint 與 vscode-ESLint 插件的區別

ESLint 是一個 npm 包，安裝之后，我們可以通過相應的命令來分細或是修復不規范代碼

vscode-ESLint 是 vscode 插件，會在寫代碼的過程中直接標注格式錯誤

• 安裝：yarn add eslint -D
• 創建一個 eslint 配置文件：.eslintrc(json 形式) 或者 .eslintrc.js（個人覺得后者更靈活）

// .eslintrc.js module.exports = {// rules: 代碼規則rules: {semi: 'error' // 行尾必須有分號} }

• 創建一個test.js

js var a = 123

• 檢測一下 npx eslint test.js

$ npx eslint test.js 1:12 error Missing semicolon semi // 少了個分號 ? 1 problem (1 error, 0 warnings) 1 error and 0 warnings potentially fixable with the --fix option.

eslint 分析出代碼有問題, 那么如何修復呢，對于本例，我們當然可以直接加上分號，但是對于動輒幾百上千行的代碼，顯然十分麻煩，eslint 提供了的一件修復的命令

• 修復：npx eslint test.js --fix

var a = 123; // 分號自動加上了

那文件多的時候不還是得一個個文件操作，方法總比困難多，后面講到。

每次都需要手動敲命令檢測和修復顯然是不顯示的，所以各個編輯器都有對應的插件來將 eslint 集成到編輯器。以 vscode 為例 安裝: 應用商店搜索安裝 eslint 安裝完我們會發現代碼出現報錯了:

不用命令去檢測了，直接會報錯，接下來的問題是怎么一鍵修復了。

我們知道，vscode 自帶代碼格式化 js 的功能，另外也可以安裝格式化的插件，其中以 prettier 和 beautify 最常見。

安裝 prettier 后，執行 shift + alt + f 格式化之前的代碼，但是會發現并沒有什么變化，因為 preitter 也要配置規則

再格式化一下，就得到了分號。

那么問題來了假如說這個人根據習慣，在編輯器上設置行尾不要分號，但是做的某個項目中的.eslintrc.js 配置的規范是要分號，那該怎么辦呢。臨時改編輯器配置行是行，如果要同時進行多個項目開發，但是大家的規則不一樣呢，這個時候，我們可以配置局部方案：

新建一個 prettier.config.js （同樣也支持 json 形式），在里面寫入

module.exports = {semi: true // 行尾添加分號 }

再去格式化，發現即使把編輯器的規則設定為不需要分號，也會加上。所以這樣在項目中有的配置，就不會用編輯器的，也就不會被項目外部所影響。

prettier.config.js 解決了格式化配置沖突的問題

但是我們還要再看一種情況：

• .eslintrc.js 配置 rules.semi: never // 不要分號
• prettier.config.js 配置 semi: true // 需要分好

再執行格式化，結果是分號加上了，但是代碼上提示錯誤

此時格式化的規則與 eslint 校驗規則沖突了，這種情況肯定是不好的，最好是能夠讓他們能夠”協同“，共用一套規則。

那么最好是讓 eslint 能直接使用 prettier 的規則，不巧真的可以：

• yarn add -D prettier eslint-plugin-prettier eslint-config-prettier 停一下，我們先來看看這幾個插件
• prettier （npm） prettier 是格式化的 npm 包，與 vscode-prettier 插件的區別類似于 eslint 與 vscode-eslint 插件的區別。prettier 包含一些命令，我們可以使用它們去檢測和格式化代碼：

如 npx prettier --write . 可以進行全局代碼格式化，而 vscode-prettier 是我們在編輯器層面可以用來進行檢測和格式化的工具

• eslint-plugin-prettier

它是將 eslint 與 prettier 集成的工具，通過它我們就可以實現，eslint 用 prettier 的規則來檢測代碼，現在，我們需要改一下 eslint 配置：

js // .eslintrc.js module.exports = { + plugins: ["prettier"], // 引入`eslint-plugin-prettier`插件 rules: { - semi: true, + "prettier/prettier": "error" // 使用 prettier 規則 }, };

然后我們就只需要在.prettierrc.js 中配置規則就可以了：

js // .prettierrc.js module.exports = { semi: true, endOfLine: 'auto' }

現在執行下格式化操作：npx prettier --write . or shift + alt + f

沒有分號，eslint 會提示錯誤，執行格式化后，eslint 錯誤消失，兩者公用一個規則，問題解決

然而 eslint 中本身是可以配置規則的呀，那么，假如出現這種情況，不是打架了么：

```js // .eslintrc.js module.exports = { plugins: ['prettier'], rules: { 'prettier/prettier': 'error', semi: false // 不要分號 } }

// .prettierrc.js module.exports = { semi: true, // 要分號 endOfLine: 'auto' } ```

我們來格式化一下

沒錯，eslint 跟 prettier 說：不是想要的，你做的再多也沒用 ！

那么，eslint-config-prettier 要上場了

• eslint-config-prettier

這個插件就是關閉與 prettier 不一樣規則的，當然它也會關掉所有不必要的規則（比如一些已經過時的規則）

js module.exports = { plugins: ["prettier"], + extends: ["prettier"], // 使用 eslint-config-prettier 拓展 rules: { "prettier/prettier": "error", semi: false } };

運行下：npx eslint --print-config path/to/main.js | npx eslint-config-prettier-check

$ npx eslint --print-config test.js | npx eslint-config-prettier-check The following rules are unnecessary or might conflict with Prettier: ·semi

提示 eslint 的 semi 規則與 prettier 相沖，手動解決

那么至此 eslint+prettier+vscode-prettier 的簡單搭配就完成了，配上完整代碼：

// .eslintrc.js module.exports = { plugins: ['prettier'], // 使用 plugin 插件 extends: ['prettier'], // 使用 eslint-config-prettier 解決與 prettier 沖突的配置rules: {'prettier/prettier': 'error' // 使用 prettier 插件提供的規則校驗} } // .prettierrc.js module.exports = {// 配置規范 semi: false,endOfLine: 'auto' }

總結

以上是生活随笔為你收集整理的eslint 配置_前端代码规范配置 （一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。