eslint自动修复

1)下载安装包

yarn add eslint --dev
yarn add eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-promise eslint-plugin-vue --dev

（安装完的样子）

2) 配置 ESLintrc

在根目录，新建一个 .eslintrc.js 文件

然后，在文件里，写入如下配置

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true
  },
  extends: [
    'standard', // 采用 standard style
    'plugin:vue/essential'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

（下面是个人的配置）

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['standard', 'plugin:vue/essential'],
  plugins: ['vue'],
  rules: {
    'no-unused-vars': 'warn',
    'no-undef': 'warn',
    'no-labels': 'off',
    'camelcase': 'off',
    'quote-props': ['warn', 'consistent']
  }
}

3. 安装ESLint插件
   VScode商店里搜索eslint，第一个就是， 点击安装
   
   然后，来到VScode设置，点击右上角用JSON打开
   
   在里面添加如下几行

{
    "eslint.alwaysShowStatus": true, // 在下框显示ESLint图标
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 开启自动保存修复
      },
    "eslint.run": "onSave", // 也可以 "onType“，边写边检查
    "eslint.validate": [ 
      "javascript",
      "javascriptreact",
      "html",
      "vue" 
  ],
}

（完成后的样子）

下面就可以写几句，杂乱无章的代码，点击保存，看ESLint一键修复了！

（按下control+s / cmd+s，瞬间大功告成！）