【最新最全指南】Vue2項目安裝eslint配置說明
本指南都適配windows和mac下的開發項目
第一步：安裝
1、全局安裝：eslint ，版本必須9以下，不然vue2的eslint配置文件不支持了。
npm install eslint@8.57.0 -g
2、項目本地dev安裝：eslint，必裝而且版本必須9以下
npm install eslint@8.57.0 -D
3、項目本地dev安裝插件：eslint-plugin-vue（檢測.vue文件里的js，必裝）
npm install eslint-plugin-vue -D
安裝后，項目內package.json的【devDependencies】會多出個【eslint-plugin-vue】，如圖：
3、項目本地dev安裝插件：eslint-plugin-html（若想檢測.html文件里的js，可安裝。不用就不裝了）
npm install eslint-plugin-vue -D
安裝后，項目內package.json的【devDependencies】會多出個【eslint-plugin-html】，如圖：
4、vscode安裝擴展插件：eslint（這個就不多說了吧，必裝）
這個擴展的作用，大致是橋接作用，讓eslint的規則及功能，融入在vscode里正常運行，最終在輸出面板中顯示檢測結果。以及保存文件就修復錯誤等方便操作和其他配置。
第二步：配置
5、vscode打開設置：settings.json，寫上以下代碼，保存時自動修復代碼，以及檢測文件類型
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"html",
"vue"
]6、項目內根目錄新建.eslintrc.js文件（檢測規則配置文件）
module.exports = {
'root': true,
'env': {
'browser': true,
'node': true,
'commonjs': true,
'es6': true
},
// 檢測規則, vue3用：'plugin:vue/vue3-essential'
'extends': [ 'plugin:vue/essential', 'eslint:recommended' ],
'parserOptions': {
'ecmaVersion': 'latest',
'ecmaFeatures': {
'jsx': true
},
'sourceType': 'module'
},
// eslint-plugin-*插件，只寫最后個名稱就行
'plugins': [
'vue',
'html'
],
// 聲明全局變量
'globals':{
'$': true,
'BMap': true,
'NALA': true,
'define': true,
'require': true,
'NProgress': true
},
// 0：關閉，1：警告，2：禁止 或者：off/warn/error
'rules': {
'no-cond-assign': 2, // 禁止：在條件表達式中使用賦值語句
'no-dupe-args': 2, // 禁止：函數參數重名
'no-unused-vars': 2, // 禁止：未使用過的變量
'semi': ['error', 'always'], // 禁止：必須有分號
'no-console': 1, // 警告：代碼中存在console.log
'no-unreachable': 0, // 警告：有無法執行的代碼
'quotes': ['warn', 'single'], // 警告：字符串單引號
'indent': ['off', 4], // 關閉：縮進4個空格
'linebreak-style': ['off', 'unix'] // 關閉：換行符
}
};7、項目內根目錄新建.eslintignore文件（忽略eslint檢測配置）
dist
node_modules
build
config
public
*.sh
*.md
*.scss它是按照從上到下的權重檢測，比如：讓eslint檢測我們vue項目的首頁index.html中的js代碼，但其他文件不檢測。
!public //檢測public文件夾
public/* //忽略public里的所有文件
!public/index.html //檢測public里的index.html8、最后重啟下vscode，查看輸出面板，選擇eslint，看看是否運行正常。如圖檢測出4個問題，完美！
浙公網安備 33010602011771號