vscode eslint自动修复

889 阅读1分钟

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

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

VSCode安装插件
ESLint,VSCode代码中提示错误
vuetur:Vue开发的神器,格式化、代码段等不用说了....
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,
   ...
}

参考:www.jianshu.com/p/5df4ea081…