vscode自动修复eslint规范的插件及配置

在开发大型项目中，常常都是须要多人合做的。相信你们必定都很是头疼于修改别人的代码的吧，而合理的使用eslint规范可让咱们在代码review时变得轻松，也可让咱们在修改小伙伴们的代码的时候会更加清晰。可是每每在开发过程当中因为咱们我的习惯的不通常常会先关掉一些eslint的属性，又或者每一个人对于eslint的配置也是不同的，因此当咱们统一配置eslint以后，咱们能够经过vscode或者webstorm插件配置eslint规范，自动修改关于eslint的问题。

1、eslint规范

使用vue-cli3搭建vue项目初始化时，会有选择eslint的设置，通常状况下，设置使用 'eslint:recommended'，也能够在.eslintrc.js配置其余以为适合项目的一些eslint规范（详细eslint规则参考：https://cn.eslint.org/docs/rules/）：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-trailing-spaces': 'error', // 禁止行尾空格
    'linebreak-style': [0, 'error', 'windows'],
    'import/extensions': 'off',
    "comma-dangle": ["error", "never"], // 禁止行尾逗号
    "semi": ["error", "never"], // 禁止分号
    "space-before-blocks": "error", // 强制在块以前使用一致的空格
    "comma-spacing": "error", // 逗号后面加空格
    'indent': [2, 2, {
      'SwitchCase': 1
    }], //代码首行缩进规定，switchcase的设置比较特别，若是直接设置'indent':2,使用代码自动校验会发现switch代码段没法校验经过
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

 2、自动修复eslint报错

vscode安装插件vetur,prettier,eslint配置相对应的eslint规范可自动帮咱们修复一些eslint报错问题，如下是一些基本的配置：

  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-aligned"
  },
  "editor.detectIndentation": false,
  // 从新设定tabsize
  "editor.tabSize": 2,
  // "editor.formatOnSave": true,  // 保存时自动格式化 --vscode编辑器自带自动格式化会与设置的eslint规范有所冲突致使eslint报错
  "eslint.autoFixOnSave": true, //保存时使用eslint规范自动格式化
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验 （若是未安装prettier或者不须要prettier格式化能够不用设置prettier这些属性）
  "prettier.semi": false,  // 去掉代码结尾的分号 
  "prettier.singleQuote": true,  // 使用带引号替代双引号 

收藏：https://www.haorooms.com/post/vscode_eslint