引入eslint
1、引入流程
- 先全局安裝eslint，注意版本問題，node >= 12.22.0
- 然后npm init 項目
- eslint --init
-
如果只掃描html、js文件，不包括 vue 文件，如下
掃描 html 文件需要安裝 eslint-plugin-html，如下：
node 和 eslint 版本如下：
配置文件內容如下：
// .eslintrc.js文件內容 module.exports = { "env": { "browser": true, "es2021": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, // "parser": "@babel/eslint-parser", "plugins": [ "html" ], "rules": { "no-console": 2 } }
此時如果只是上面的配置，可以掃描 html、js 等文件。但是掃描vue文件會直接報錯，如下：
此時需要安裝 vue-eslint-parser，如下：
添加配置 "parser": "vue-eslint-parser"，.eslintrc.js 文件的最終內容如下：
// .eslintrc.js 文件內容 module.exports = { "env": { "browser": true, "es2021": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "parser": "vue-eslint-parser", "plugins": [ "html" ], "rules": { "no-console": 2 } }
此時掃描 html 和 vue 文件都能出正確結果。
可參考：https://segmentfault.com/q/1010000018023148
可以往 package.json 文件添加以下命令讓掃描更加方便，如下：
"scripts": {
"lint": "eslint --ext .js --ext .html --ext .jsx --ext .vue ./" }
直接執行 npm run lint 即可出掃描結果。
1.1、vscode插件
vscode 的 eslint 插件只是一個輔助作用，讓開發者在使用 vscode 時能立即查看到 eslint 掃描出的問題，不使用 eslint 插件也能通過 eslint 依賴包來掃描出代碼問題。安裝了 eslint 插件，但是沒有配置 .eslintrc.js 文件的話，eslint 插件也不會起作用。
配置vscode插件ESlint是對開發者在編輯修改代碼時就能根據校驗規則進行提前規范化。
有時候加上規則，或者新引入 .eslintrc.js文件，如果不生效的話，重啟一下 vscode。
2、vue規則
要想支持 vue規則，比如：
'vue/no-async-in-computed-properties': 2 //計算屬性應該是同步的
此時，首先應該在 .eslintrc.js 中添加以下配置：
extends: [ 'plugin:vue/base' ]
然后安裝 eslint-plugin-vue 依賴，如下：
npm i eslint-plugin-vue@latest --save-dev
浙公網安備 33010602011771號