當我們創建vue項目的時候，我們往往會選擇linter/Formatter，eslint-config-standard,下面我放張vue圖形化配置界面
但這往往是進坑的開始
特別注意一下這里的插件： "standard"插件代表的是eslint的standard插件都要安裝，用Vue ui初始化選擇了standard安裝的話（也只會安裝eslint-config-standard）,參考一下下面的依賴，沒有的話手動安裝，防止出現一些莫名的問題：
eslint
babel-eslint
eslint-plugin-html
eslint-config-standard
eslint-plugin-standard
eslint-plugin-promise
下面說下“2 errors and 0 warnings potentially fixable with the --fix option”報錯
這種只要隱藏.eslintrc.js中的’@vue/standard’就行了，如下圖：
第二種“2 errors and 0 warnings potentially fixable with the --fix option”報錯解決方式，
functineName() 左括號前沒有空格報錯，在.eslintrc.js的rules中輸入’space-before-function-paren’: 0
分號; 報錯
引號需要是單引號
以上兩個問題，創建一個.prettierrc的JSON(json后綴不用寫)文件(這個是用來格式化文件的)
“semi”:false, // 在格式化的時候不加分號
“singleQuote”:true // 將雙引號轉成單引號
eslint常見報錯：
-
文件末尾存在空行(eol-last)：Too many blank lines at the end of file.Max of 0 allowed
-
缺少分號(‘semi’: [‘error’,’always’]) :Missing semicolon
-
函數關鍵字后面缺少空格 :Missing space before function parentheses
-
字符串沒有使用單引號(’quotes’: [1, ’single’]) ：String must use singlequote
-
縮進錯誤 ： Expected indentation of 2 spaces but found 4
-
沒有使用全等(eqeqeq) : Expected ’ === ’ and instaed saw ‘==’
-
導入組件卻沒有使用 : ‘seller’ is defined but never used
-
new了一個對象卻沒有賦值給某個常量(可以在該實例前添加此代碼/eslint-disable
-
no-new/忽略ESLint的檢查): Do not user’new’ for side effects
-
超過一行空白行(no-multiple-empty-lines):More than 1 blank line not allowed
-
注釋符 // 后面縮進錯誤(lines-around-comment): Expected space or tab after
‘//’ in comment -
模塊導入沒有放在頂部：Import in body of module; reorder to top
-
前面缺少空格：Missing space before
-
已定義但是沒有使用：‘scope’ is defined but never used
下面對Eslint的三個文件做詳細解釋：
1.editorconfig
主要用於配置IDE,規范縮進風格，縮進大小，tab長度以及字符集等,解決不同IDE的編碼范設置。EditorConfig 插件會去查找當前編輯文件的所在文件夾或其上級文件夾中是否有 .editorconfig 文件。如果有，則編輯器的行為會與 .editorconfig 文件中定義的一致，並且其優先級高於編輯器自身的設置。
root = true
#對所有文件有效 //[*js]只對js文件有效
[*]
#設置編碼格式
charset = utf-8
#縮進類型 可選space和tab
indent_style = space
#縮進數量可選整數值2 or 4,或者tab
indent_size = 2
#換行符的格式
end_of_line = lf
是否在文件的最后插入一個空行 可選true和false
insert_final_newline = true
是否刪除行尾的空格 可選擇true和false
trim_trailing_whitespace = true
2. .eslintignore
你可以通過在項目根目錄創建一個 .eslintignore 文件告訴 ESLint 去忽略特定的文件和目錄。.eslintignore 文件是一個純文本文件，其中的每一行都是一個 glob 模式表明哪些路徑應該忽略檢測。例如，以下將忽略所有的 JavaScript 文件：
**/*.js
當 ESLint 運行時，在確定哪些文件要檢測之前，它會在當前工作目錄中查找一個 .eslintignore 文件。如果發現了這個文件，當遍歷目錄時，將會應用這些偏好設置。一次只有一個 .eslintignore 文件會被使用，所以，不是當前工作目錄下的 .eslintignore 文件將不會被用到。
放置需要ESLint忽略的文件，只對.js文件有效,由於node_modules文件夾里面的內容比較大，如果項目使用的是git管理代碼，一般不上傳至git。此時應該設置忽略
/build/
/config/
/dist/
/src/utils/
/src/router/*.js
/node_modules/
/bower_components/
#local env files
.env.local
.env.*.local
#Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
#Editor directories and files.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
3 .eslintrc.js
(vue-cli3改文件的內容在 packageConfig.json中配置eslintConfig)
module.exports = {
//此項是用來告訴eslint找當前配置文件不能往父級查找
root: true,
//此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析
parser: 'babel-eslint',
//此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置為module，指某塊導入方式
parserOptions: {
sourceType: 'module'
},
//此項指定環境的全局變量，下面的配置指定為瀏覽器環境
env: {
browser: true,
node:true
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
// 此項是用來配置標准的js風格，就是說寫代碼的時候要規范的寫，如果你使用vs-code我覺得應該可以避免出錯
extends: 'standard',
// required to lint *.vue files
// 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規范html的
plugins: [
'html'
],
// add your custom rules here
// 下面這些rules是用來設置從插件來的規范代碼的規則，使用必須去掉前綴eslint-plugin-
// 主要有如下的設置規則，可以設置字符串也可以設置數字，兩者效果一致
// "off" -> 0 關閉規則
// "warn" -> 1 開啟警告規則
//"error" -> 2 開啟錯誤規則
// 了解了上面這些，下面這些代碼相信也看的明白了
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// js語句結尾必須使用分號
'semi': ['off', 'always'],
// 三等號
'eqeqeq': 0,
// 強制在注釋中 // 或 /* 使用一致的空格
'spaced-comment': 0,
// 關鍵字后面使用一致的空格
'keyword-spacing': 0,
// 強制在 function的左括號之前使用一致的空格
'space-before-function-paren': 0,
// 引號類型
"quotes": [0, "single"],
// 禁止出現未使用過的變量
'no-unused-vars': 0,
// 要求或禁止末尾逗號
'comma-dangle': 0,
// 嚴格的檢查縮進問題
"indent": 0,
//引入模塊沒有放入頂部
"import/first": 0,
//前面缺少空格，Missing space before
"arrow-spacing": 0,
//后面沒有空位，There should be no space after this paren
"space-in-parens": 0,
//已定義但是沒有使用，'scope' is defined but never used
"vue/no-unused-vars": 0
}
}
你也可以直接在代碼文件中定義
1. 禁用 ESLint：
/* eslint-disable */
var a = 100;
console.log(a);
/* eslint-enable */
2.禁用一條規則：
/*eslint-disable no-console */
var a = 100;
console.log(a);
/*eslint-enable no-console */
3.調整規則：
/* eslint no-console:0 */
var a = 100;
console.log(a);
在初始化項目時選擇是否使用ESLint管理代碼(選擇Y則默認開啟)
Use ESLint to lint your code? (Y/n)y
轉載：https://blog.csdn.net/wron_path/article/details/104655844