1. 安裝依賴
npm i --save-dev babel-eslint eslint eslint-plugin-vue
2.vscode中添加eslint插件
3.package.json中的scripts里添加
"lint": "eslint --fix --ext .js --ext .vue src"
4.項目根目錄添加.eslintignore文件，里面表示不需要檢驗的目錄
build/*.js
src/assets
public
dist
5.項目根目錄添加.eslintrc.js文件，添加對應的規則
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
// it is base on https:// github.com/vuejs/eslint-config-vue
rules: {
// 模板語法錯誤
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
// 將自關閉符號作為已配置的樣式強制執行
'vue/html-self-closing': [
'error',
{
html: {
void: 'never',
normal: 'any',
component: 'any'
},
svg: 'always',
math: 'always'
}
],
// 模板每行屬性的數量是否不超過定義的最大值,超過就換行
'vue/max-attributes-per-line': [
2,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: false
}
}
],
// 強制在單行元素的內容前后加換行符
'vue/singleline-html-element-content-newline': 'off',
// 該規則強制在多行元素的內容前后換行。
'vue/multiline-html-element-content-newline': 'off',
// 該規則旨在為name屬性的大小寫強制使用樣式，以保持一致性。
'vue/name-property-casing': ['error', 'PascalCase'],
// 該規則報告了所有v-html指令的使用，以減少將潛在不安全/未轉義的html注入瀏覽器導致跨站點腳本攻擊的風險。
'vue/no-v-html': 'off',
// 在對象中使用getter/setter
'accessor-pairs': 2,
// =>的前/后括號
'arrow-spacing': [
2,
{
before: true,
after: true
}
],
// 在循環內禁止`await`
'block-spacing': [2, 'always'],
// if while function 后面的{必須與if在同一行，java風格
'brace-style': [
2,
'1tbs',
{
allowSingleLine: true
}
],
// 強制駝峰法命名
camelcase: [
0,
{
properties: 'always'
}
],
// always-multiline：多行模式必須帶逗號，單行模式不能帶逗號
'comma-dangle': [2, 'never'],
// 控制逗號前后的空格
'comma-spacing': [
2,
{
before: false,
after: true
}
],
// 控制逗號在行尾出現還是在行首出現
'comma-style': [2, 'last'],
// 強制在子類構造函數中用super()調用父類構造函數，TypeScrip的編譯器也會提示
'constructor-super': 2,
// 強制所有控制語句使用一致的括號風格
curly: [2, 'multi-line'],
// object, '.' 號應與對象名在同一行
'dot-location': [2, 'property'],
// 文件末尾強制換行
'eol-last': 2,
// 使用 === 替代 ==
eqeqeq: ['error', 'always', { null: 'ignore' }],
// 生成器函數*的前后空格
'generator-star-spacing': [
2,
{
before: true,
after: true
}
],
// nodejs 處理錯誤
'handle-callback-err': [2, '^(err|error)$'],
// 縮進風格
indent: [
2,
2,
{
SwitchCase: 1
}
],
// JSX 屬性中一致使用雙引號或單引號
'jsx-quotes': [2, 'prefer-single'],
// 對象字面量中冒號的前后空格
'key-spacing': [
2,
{
beforeColon: false,
afterColon: true
}
],
// 在關鍵字前后強制使用一致的空格
'keyword-spacing': [
2,
{
before: true,
after: true
}
],
// 函數名首行大寫必須使用new方式調用，首行小寫必須用不帶new方式調用
'new-cap': [
2,
{
newIsCap: true,
capIsNew: false
}
],
// 在調用沒有參數的構造函數時強制或禁止使用圓括號
'new-parens': 2,
// 不允許“數組”構造函數
'no-array-constructor': 2,
// 不允許使用“arguments.caller”或“arguments.callee”
'no-caller': 2,
// 不允許使用 "console"
'no-console': 'off',
// 禁止重新分配類成員
'no-class-assign': 2,
// 在條件表達式中禁止賦值操作符
'no-cond-assign': 2,
// 禁止對const變量重新賦值
'no-const-assign': 2,
// 禁止在正則表達式中使用控制字符
'no-control-regex': 0,
// 不允許刪除變量 var
'no-delete-var': 2,
// 在“函數”定義中禁止重復參數
'no-dupe-args': 2,
// 禁止重復的類成員
'no-dupe-class-members': 2,
// 禁止在對象字面量中出現重復的鍵
'no-dupe-keys': 2,
// 禁止重復的大小寫標簽
'no-duplicate-case': 2,
// 禁止在正則表達式中使用空字符類
'no-empty-character-class': 2,
// 不允許空解構模式
'no-empty-pattern': 2,
// 禁止使用' eval() '
'no-eval': 2,
// 禁止在' catch '子句中重新賦值異常
'no-ex-assign': 2,
// 禁止擴展本機類型
'no-extend-native': 2,
// 禁止不必要地調用' .bind() '
'no-extra-bind': 2,
// 禁止不必要的布爾類型轉換
'no-extra-boolean-cast': 2,
// 禁止不必要的括號
'no-extra-parens': [2, 'functions'],
// 禁止跌落' case '語句
'no-fallthrough': 2,
// 在數字字面值中禁止前導或后導小數點
'no-floating-decimal': 2,
// 禁止對' function '聲明重新賦值
'no-func-assign': 2,
// 禁止使用' eval() '類方法
'no-implied-eval': 2,
// 禁止在嵌套塊中聲明變量或'函數'
'no-inner-declarations': [2, 'functions'],
// 禁止在' RegExp '構造函數中使用無效的正則表達式字符串
'no-invalid-regexp': 2,
// 不允許不規則的空白
'no-irregular-whitespace': 2,
// 禁止使用' __iterator__ '屬性
'no-iterator': 2,
// 禁止與變量共享名稱的標簽
'no-label-var': 2,
// 不允許標記語句
'no-labels': [
2,
{
allowLoop: false,
allowSwitch: false
}
],
// 禁止不必要的嵌套塊
'no-lone-blocks': 2,
// 禁止使用空格和制表符混合進行縮進
'no-mixed-spaces-and-tabs': 2,
// 不允許多行空格
'no-multi-spaces': 2,
// 不允許多行字符串
'no-multi-str': 2,
// 禁止多個空行
'no-multiple-empty-lines': [
2,
{
max: 1
}
],
// 禁止賦值給本機對象或只讀全局變量
'no-global-assign': 2,
// 禁止對關系操作符的左操作數取反
'no-unsafe-negation': 2,
// 不允許對象的構造函數
'no-new-object': 2,
// 禁止“Symbol”對象使用“new”操作符
'no-new-symbol': 2,
// 禁止使用' String '、' Number '和' Boolean '對象的' new '操作符
'no-new-wrappers': 2,
// 禁止調用全局對象屬性作為函數
'no-obj-calls': 2,
// 不允許八進制文字
'no-octal': 2,
// 禁止在字符串字面量中使用八進制轉義序列
'no-octal-escape': 2,
// 禁止使用' __proto__ '屬性
'no-proto': 2,
// 不允許變量redeclaration
'no-redeclare': 2,
// 禁止在正則表達式中使用多個空格
'no-regex-spaces': 2,
// 禁止在' return '語句中使用賦值操作符
'no-return-assign': [2, 'except-parens'],
// 禁止兩邊完全相同的作業
'no-self-assign': 2,
// 禁止兩邊完全相同的比較
'no-self-compare': 2,
// 不允許逗號操作符
'no-sequences': 2,
// 禁止標識符隱藏受限制的名稱
'no-shadow-restricted-names': 2,
// 要求或不允許函數標識符與其調用之間有空格
'func-call-spacing': 2,
// 不允許稀疏陣列
'no-sparse-arrays': 2,
// 在構造函數中調用super()之前禁止使用' this ' / ' super '
'no-this-before-super': 2,
// 禁止將文字作為異常拋出
'no-throw-literal': 2,
// 禁止行尾有空格
'no-trailing-spaces': 2,
// 禁止使用未聲明的變量，除非在' /*global */ '注釋中提到
'no-undef': 2,
// 禁止將變量初始化為“undefined”
'no-undef-init': 2,
// 禁止混亂的多行表達式
'no-unexpected-multiline': 2,
// 禁止未修改的循環條件
'no-unmodified-loop-condition': 2,
// 當存在更簡單的選擇時，禁止使用三元運算符
'no-unneeded-ternary': [
2,
{
defaultAssignment: false
}
],
// 禁止在' return '， ' throw '， ' continue '和' break '語句之后出現不可到達的代碼
'no-unreachable': 2,
// 禁止在' finally '塊中使用控制流語句
'no-unsafe-finally': 2,
// 不允許未使用的變量
'no-unused-vars': [
2,
{
vars: 'all',
args: 'none'
}
],
// 禁止不必要地調用' .call() '和' .apply() '
'no-useless-call': 2,
// 禁止在對象和類中使用不必要的計算屬性鍵
'no-useless-computed-key': 2,
// 禁止不必要的構造函數
'no-useless-constructor': 2,
// 禁止不必要的轉義字符
'no-useless-escape': 0,
// 屬性前不允許有空格
'no-whitespace-before-property': 2,
// 不允許`with`語句
'no-with': 2,
// 強制在函數中同時聲明或單獨聲明變量
'one-var': [
2,
{
initialized: 'never'
}
],
// 強制操作符使用一致的換行樣式
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before'
}
}
],
// 要求或禁止在塊內填充
'padded-blocks': [2, 'never'],
// 強制一致使用反引號、雙引號或單引號
quotes: [
2,
'single',
{
avoidEscape: true,
allowTemplateLiterals: true
}
],
// 要求或不允許用分號代替ASI
semi: [2, 'never'],
// 強制分號前后有一致的空格
'semi-spacing': [
2,
{
before: false,
after: true
}
],
// 強制在塊之前有一致的空格
'space-before-blocks': [2, 'always'],
// 強制在“函數”定義開括號前有一致的空格
'space-before-function-paren': [2, 'never'],
// 在圓括號內強制使用一致的空格
'space-in-parens': [2, 'never'],
// 要求中綴操作符周圍有空格
'space-infix-ops': 2,
// 強制一元運算符前后有一致的空格
'space-unary-ops': [
2,
{
words: true,
nonwords: false
}
],
// 空格注釋強制在注釋中的' // '或' /* '后面有一致的空格
'spaced-comment': [
2,
'always',
{
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}
],
// 要求或禁止模板字符串內嵌表達式周圍有空格
'template-curly-spacing': [2, 'never'],
// 檢查' NaN '時要求調用' isNaN() '
'use-isnan': 2,
// 強制將' typeof '表達式與有效字符串進行比較
'valid-typeof': 2,
// 要求立即調用' function '時使用圓括號
'wrap-iife': [2, 'any'],
// 要求或禁止' yield* '表達式中的' * '周圍有空格
'yield-star-spacing': [2, 'both'],
// 要求或不允許“尤達”條件
yoda: [2, 'never'],
// 對於聲明后從未重新賦值的變量，要求使用' const '聲明
'prefer-const': 2,
// 禁止使用'debugger'
'no-debugger': process.env.NODE_ENV === 'prod' ? 2 : 0,
// 在大括號內強制使用一致的空格
'object-curly-spacing': [
2,
'always',
{
objectsInObjects: false
}
],
// 在數組括號內強制使用一致的空格
'array-bracket-spacing': [2, 'never']
}
}