VSCode配合ESLint自动修复格式化（Vue3或React）

系统管理员 2021-09-17 16:34 440阅读 0赞

原文地址：https://www.jianshu.com/p/5df4ea081fcc

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

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

## VSCode安装插件 ##

*  [ESLint，VSCode代码中提示错误][ESLint_VSCode]
 *  [vuetur：Vue开发的神器，格式化、代码段等不用说了....][vuetur_Vue_....]
 *  [Prettier - Code formatter,代码格式化插件，非常牛，可以自定义格式化的配置][Prettier - Code formatter]

## 配置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,
      },
    };

作者：IT老马  
链接：https://www.jianshu.com/p/5df4ea081fcc  
來源：简书

[ESLint_VSCode]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
[vuetur_Vue_....]: https://marketplace.visualstudio.com/items?itemName=octref.vetur
[Prettier - Code formatter]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode