ESLint

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

• ESLint 與 vscode-ESLint 插件的區(qū)別

ESLint 是一個(gè) npm 包，安裝之后，我們可以通過相應(yīng)的命令來分細(xì)或是修復(fù)不規(guī)范代碼

vscode-ESLint 是 vscode 插件，會在寫代碼的過程中直接標(biāo)注格式錯(cuò)誤

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

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

• 創(chuàng)建一個(gè)test.js

js var a = 123

• 檢測一下 npx eslint test.js

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

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

• 修復(fù)：npx eslint test.js --fix

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

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

每次都需要手動敲命令檢測和修復(fù)顯然是不顯示的，所以各個(gè)編輯器都有對應(yīng)的插件來將 eslint 集成到編輯器。以 vscode 為例 安裝: 應(yīng)用商店搜索安裝 eslint 安裝完我們會發(fā)現(xiàn)代碼出現(xiàn)報(bào)錯(cuò)了:

不用命令去檢測了，直接會報(bào)錯(cuò)，接下來的問題是怎么一鍵修復(fù)了。

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

安裝 prettier 后，執(zhí)行 shift + alt + f 格式化之前的代碼，但是會發(fā)現(xiàn)并沒有什么變化，因?yàn)?preitter 也要配置規(guī)則

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

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

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

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

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

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

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

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

再執(zhí)行格式化，結(jié)果是分號加上了，但是代碼上提示錯(cuò)誤

此時(shí)格式化的規(guī)則與 eslint 校驗(yàn)規(guī)則沖突了，這種情況肯定是不好的，最好是能夠讓他們能夠”協(xié)同“，共用一套規(guī)則。

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

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

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

• eslint-plugin-prettier

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

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

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

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

現(xiàn)在執(zhí)行下格式化操作：npx prettier --write . or shift + alt + f

沒有分號，eslint 會提示錯(cuò)誤，執(zhí)行格式化后，eslint 錯(cuò)誤消失，兩者公用一個(gè)規(guī)則，問題解決

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

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

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

我們來格式化一下

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

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

• eslint-config-prettier

這個(gè)插件就是關(guān)閉與 prettier 不一樣規(guī)則的，當(dāng)然它也會關(guān)掉所有不必要的規(guī)則（比如一些已經(jīng)過時(shí)的規(guī)則）

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

運(yùn)行下：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 規(guī)則與 prettier 相沖，手動解決

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

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

總結(jié)

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

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