VSCode配合ESLint自动修复格式化

开发Vue或者React的项目的时候，我们经常用到ESLint进行代码的校验，当代码出现不符合规范的格式的时候，ESLint会在控制台提示相关的异常信息。

ESLint极大的提高了团队代码的一致性和规范性，接下来老马介绍一下我的VSCode的相关配置和插件实现保存代码的时候，根据ESLint的配置自动修复代码和格式化。

VSCode安装插件

配置VSCode的用户配置

{
  ...
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 保存自动修复
  "eslint.autoFixOnSave": true,
  // jsx自动修复有问题，取消js的format
  "editor.formatOnSave": false,
  // Enable/disable default JavaScript formatter (For Prettier)
  "javascript.format.enable": false,
  "prettier.singleQuote": true,
  // 点击保存时，根据 eslint 规则自定修复，同时集成 prettier 到 eslint 中
  "prettier.eslintIntegration": true,
   ...
}

注意事项

如果需要启动ESLint的自动修复，需要在项目根目录下，或者package.json文件中配置ESLint的配置。

参考我的Vue项目的ESLint的校验规则：

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevent
    // ion consider switching to `plugin:vue/strongly-recommended` or
    // `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  globals: {
    NODE_ENV: false
  },
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 添加，分号必须
    semi: ['error', 'always'],
    'no-unexpected-multiline': 'off',
    'space-before-function-paren': ['error', 'never'],
    // 'quotes': ["error", "double", { "avoidEscape": true }]
    quotes: [
      'error',
      'single',
      {
        avoidEscape: true
      }
    ]
  }
};

参考我的React项目的ESLint的校验规则：

需要安装的插件

npm i -D eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react babel-eslint prettier eslint-config-prettier eslint-config-react-app eslint-plugin-prettier

// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    // 检查 ES6 语法
    parser: 'babel-eslint',
  },
  env: {
    browser: true,
  },
  // extending airbnb config and config derived from eslint-config-prettier
  // 这里是 vue
  extends: ['react-app', 'prettier'],

  // 选择 eslint 插件
  plugins: ["react", "jsx-a11y", "import", 'prettier'],

  // react
  // extends: ['airbnb-base', 'prettier'],
  // plugins: ['prettier', 'react'],

  // 不需要框架
  // extends: ['airbnb-base', 'prettier'],
  // plugins: ['prettier'],

  // 自定义 eslint 检查规则
  rules: {
    // 自定义 prettier 规则 (实际上，可配置项非常有限)
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'all',
      },
    ],
    camelcase: 'off', // 强制驼峰法命名
    'no-new': 'off', // 禁止在使用new构造一个实例后不赋值
    'space-before-function-paren': 'off', // 函数定义时括号前面不要有空格
    'no-plusplus': 'off', // 禁止使用 ++， ——
    'max-len': 'off', // 字符串最大长度
    'func-names': 'off', // 函数表达式必须有名字
    'no-param-reassign': 'off', // 不准给函数入参赋值

    // react 如果在项目中文件名后缀是 .js 而不是 .jsx 避免报错
    // "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    // react props validation 错误
    // "react/prop-types": 0,
  },
};