eslint代码自动修复

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 // 两个选择器中是否换行
}

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