適用于多人開發使用不同的開發工具，導致代碼格式不一致的問題

創建項目時未選擇eslint的時候，需要自己在根目錄創建.eslintrc.js和.eslintignore文件

規則條件不一樣，檢驗也會不同，我在.eslintrc.js里面配置的內容如下：

.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'],
  rules: {
    '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',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-v-html': 'off',
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true
    }],
    'camelcase': [0, {
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    'curly': [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      'SwitchCase': 1
    }],
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }],
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }],
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-console': 'off',
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 0,
    '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,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    '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-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef': 2,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      'defaultAssignment': false
    }],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unused-vars': [2, {
      'vars': 'all',
      'args': 'none'
    }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    '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
    }],
    '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'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  }
}

.eslintignore：

build/*.js
src/assets
public
dist

需要安裝的依賴：

• yarn:
  yarn add husky eslint lint-staged prettier --dev
yarn add @vue/cli-plugin-eslint --dev
yarn add eslint-plugin-vue --dev
yarn add babel-eslint --dev
  • husky：提交代碼時借助 git 提供的鉤子對代碼進行檢測
  • eslint：對于不規范的代碼進行修復
• npm
  npm install husky eslint lint-staged prettier --save-dev
npm install @vue/cli-plugin-eslint --save-dev
npm install eslint-plugin-vue --save-dev
npm install babel-eslint --save-dev

package.json添加

"scripts": {
    "lint": "eslint --ext .js,.vue src"
},
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

setting.json里面添加有關于eslint的配置: （vscode配置文件）

{
  "eslint.alwaysShowStatus": true,
  "eslint.options": {"configFile": ".eslintrc.js"},
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  "eslint.format.enable": true,
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

檢查vscode的eslint是否處于開啟狀態:

image.png

然后關閉vscode，重新打開。

每打開一個文件都會自動對代碼進行校驗，如果存在許多語法問題，只需要Ctrl+S，就會立即自動糾正代碼保存。

如果eslint還是存在不生效的問題，非常感謝下面這篇博客，按照文章的方式檢查，很快就鎖定了原因，解決了問題：
http://www.lxweimin.com/p/627d8b2aaa4a

遇到的各種格式上的報錯問題：

1. <template>require directive eslint

這是因為在<template>里面又嵌套了<template>，如果extens里面的擴展方法是'plugin:vue/recommended'，就會默認不允許嵌套，我查找了許多次資料，https://eslint.vuejs.org/rules/no-lone-template.html
eslint官網指明：

{
  "vue/no-lone-template": ["error", {
    "ignoreAccessible": false
  }]
}

把ignoreAccessible的false改成true就能忽略這個判斷，但是我自己試了多次，放在extens里總是報錯，知道怎么寫的盆友麻煩留言告訴我這塊應該怎么寫，三克油。
不過我用另一種方式，就是把plugin:vue/recommended直接改成了plugin:vue/essential

2、unexpected lexical declaration in case block

配置文件中的"extends": "eslint:recommended"屬性啟用了此規則。

該規則禁止詞法聲明 (let、const、function和class) 出現在case或default子句中。原因是，詞法聲明在整個switch語句塊中是可見的，但是它只有在運行到它定義的 case 語句時，才會進行初始化操作。

為了保證詞法聲明語句只在當前 case 語句中有效，將你子句包裹在{ }中
比如:

switch (num) {

case 1: { let x = 1; break; }

case 2: { const y = 2; break; }

case 3: { function f() {} break; }

case 4:

var z = 4; break;

default: { class C {} }

}

3.Type of the default value for 'data' prop must be a function的解決方法

在寫形如prop: {type: Array; default: []}的代碼時,eslint常會出現這樣的錯誤提示,

翻譯: prop的默認值data必須是一個函數

修改方式1

props: {
arr: {
type: Array,
default: function () { return [] }
}
}

修改方式2(es6)

props: {
arr: {
type: Array,
default: () => [] // es6的箭頭函數
}
}

4.Expected error to be handled

這是因為回調函數里面的參數error沒有運用到，所以可以不設置參數，或者在回調函數內console.log(error)

image.png