vscode eslint 保存时自动格式化代码

适用于多人开发使用不同的开发工具，导致代码格式不一致的问题

创建项目时未选择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还是存在不生效的问题，非常感谢下面这篇博客，按照文章的方式检查，很快就锁定了原因，解决了问题：
https://www.jianshu.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