eslint代码自动修复

安装lint

npm install lint

添加eslint脚本

在package.json的scripts中的脚本配置修改如下

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint src",
    "fix": "eslint src/**/*.*  --fix"
 },

配置.editorconfig文件代码如下：

# 对所有文件有效  //[*js]只对js文件有效
[*]
#设置编码格式
charset = utf-8
#缩进类型  可选space和tab
indent_style = space
#缩进数量可选整数值2 or 4,或者tab
indent_size = 2
#换行符的格式
end_of_line = lf
# 是否在文件的最后插入一个空行  可选true和false
insert_final_newline = true
# 是否删除行尾的空格  可选择true和false
trim_trailing_whitespace = true

添加并配置.eslintignore文件

此文件是eslint忽略文件配置，配置到此文件的文件文件夹都会被eslint的检测规则忽略

src/utils
src/three/libs
src/three/utils

配置.eslintrc.js

项目配置如下

module.exports = {
  root: true,
  env: {
      browser: true,
      node: true,
      es6: true,
  },
  parserOptions: {
      parser: 'babel-eslint',
      sourceType: 'module'
  },
  parser: 'vue-eslint-parser',
  extends: 'eslint:recommended',
  rules: {
      'indent': [
          'error',
          2,
          {
              SwitchCase: 1,
          },
      ],
      'indent-legacy': 'off',
      'generator-star-spacing': [
          'error',
          {
              'before': false,
              'after': true,
          },
      ],
      // 该规则在数组括号内强制实现一致的间距。
      'array-bracket-spacing': [
          'error',
          'never',
      ],
      // {} 中间是否需要空格
      'object-curly-spacing': [
          0,
          'always',
          {
            objectsInObjects: false
          }
      ],
      // 该规则都会在箭头函数参数周围加上括号
      'arrow-parens': [
          'error',
          'as-needed',
      ],
      'no-constant-condition': 'warn',
      'comma-dangle': [
          0,
          {
              'arrays': 'always-multiline',
              'objects': 'always-multiline',
              'imports': 'always-multiline',
              'exports': 'always-multiline',
              'functions': 'never',
          },
      ],
      // 禁止的debugger
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 0,
      // 不允许在对象文字中使用重复键。
      'no-dupe-keys': 'warn',
      'no-empty-character-class': 'error',
      'no-ex-assign': 'error',
      'no-extra-boolean-cast': 'warn',
      'no-func-assign': 'warn',
      'no-inner-declarations': 'warn',
      'no-invalid-regexp': 'error',
      'no-negated-in-lhs': 'error',
      // 不允许调用Math，JSON和Reflect对象作为功能
      'no-obj-calls': 'error',
      'no-sparse-arrays': 'error',
      // 不允许可达代码后return，throw，continue，和break语句
      'no-unreachable': 'error',
      'use-isnan': 'error',
      'valid-typeof': 'error',
      'curly': [
          'error',
          'all',
      ],
      'eqeqeq': [
          'error',
          'allow-null',
      ],
      'guard-for-in': 'warn',
      'no-else-return': 'warn',
      'no-labels': [
          'warn',
          {
              'allowLoop': true,
          },
      ],
      'no-eval': 'warn',
      'no-extend-native': 'error',
      'no-extra-bind': 'warn',
      'no-implied-eval': 'warn',
      'no-iterator': 'error',
      'no-irregular-whitespace': 'warn',
      'no-lone-blocks': 'warn',
      'no-loop-func': 'warn',
      'no-multi-str': 'warn',
      'no-native-reassign': 'error',
      'no-new-wrappers': 'error',
      'no-octal': 'warn',
      'no-octal-escape': 'warn',
      'no-proto': 'error',
      'no-redeclare': 'warn',
      'no-self-compare': 'error',
      'no-unneeded-ternary': 'error',
      'no-with': 'warn',
      'wrap-iife': [
          'error',
          'any',
      ],
      'no-delete-var': 'warn',
      'no-dupe-args': 'error',
      'no-duplicate-case': 'error',
      'no-label-var': 'warn',
      'no-shadow-restricted-names': 'error',
      'no-undef': 'error',
      'no-undef-init': 'warn',
      'no-unused-vars': [
          'warn',
          {
              'vars': 'local',
              'args': 'none',
          },
      ],
      'no-use-before-define': [
          'error',
          'nofunc',
      ],
      'brace-style': [
          'warn',
          '1tbs',
          {},
      ],
      'comma-spacing': [
          'error',
          {
              'before': false,
              'after': true,
          },
      ],
      'comma-style': [
          'error',
          'last',
      ],
      'new-parens': 'warn',
      'no-array-constructor': 'error',
      'no-multi-spaces': [
          'error',
          {
              'exceptions': {
                  'Property': true,
                  'BinaryExpression': true,
                  'VariableDeclarator': true,
              },
          },
      ],
      'no-new-object': 'error',
      'no-trailing-spaces': 'error',
      'no-extra-parens': 'off',
      'no-mixed-spaces-and-tabs': 'error',
      'one-var': [
          'error',
          'never',
      ],
      'operator-linebreak': [
          'error',
          'before',
      ],
      'quotes': [
          'error',
          'single',
      ],
      'semi': [
          'error',
          'always',
      ],
      'semi-spacing': 'error',
      'keyword-spacing': 'error',
      'key-spacing': [
          'error',
          {
              'beforeColon': false,
              'afterColon': true,
          },
      ],
      'space-before-function-paren': [
          'error',
          {
              'anonymous': 'always',
              'named': 'never',
          },
      ],
      'space-before-blocks': [
          'error',
          'always',
      ],
      'computed-property-spacing': [
          'error',
          'never',
      ],
      'space-in-parens': [
          'error',
          'never',
      ],
      'space-unary-ops': 'warn',
      'spaced-comment': [
          'error',
          'always',
          {
              'exceptions': [
                  '-',
                  '+',
                  '\'',
              ],
              'block': {
                  'balanced': true,
              },
          },
      ],
      'max-nested-callbacks': [
          'warn',
          4,
      ],
      'max-depth': [
          'warn',
          6,
      ],
      'max-len': [
          'error',
          200,
          4,
          {
              'ignoreUrls': true,
              'ignoreComments': true,
          },
      ],
      'max-params': [
          'warn',
          6,
      ],
      'space-infix-ops': 'error',
      'dot-notation': [
          'error',
          {
              'allowKeywords': true,
              'allowPattern': '^catch$',
          },
      ],
      'arrow-spacing': 'error',
      'constructor-super': 'error',
      'no-confusing-arrow': [
          'error',
          {
              'allowParens': true,
          },
      ],
      'no-class-assign': 'warn',
      'no-const-assign': 'error',
      'no-dupe-class-members': 'warn',
      'no-this-before-super': 'warn',
      'no-var': 'warn',
      'no-duplicate-imports': 'warn',
      'prefer-rest-params': 'error',
      'unicode-bom': 'warn',
      'max-statements-per-line': 'error',
      'no-useless-constructor': 'warn',
  }
};

如果对具体配置规则不清楚，可以参照https://cloud.tencent.com/developer/chapter/12618的文档说明

执行脚本

执行npm run lint ，可以查看问题文件及数量

执行npm run fix ，可以自动修复大部分问题

需要注意的是，脚本执行完了之后，可能会有部分未能解决的错误，这时需要手动修复解决

配置vscode的eslint

安装eslint插件之后，打开配置文件（文件-首选项-设置），搜索setting.json并打开

修改setting.json中的配置如下：

  {
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #让prettier使用eslint的代码格式进行校验 
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号 
  "prettier.semi": true,
  //  #使用带引号替代双引号 
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // #这个按用户自身习惯选择 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned",
      // #vue组件中html代码格式化样式
      "wrap_line_length": 200, // 每行数
      "end_with_newline": true,
      "semi": false,
      "singleQuote": true
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.fontLigatures": null // 两个选择器中是否换行
}

目前暂定为以上配置项，后续根据情况进行更新调整