VScode+ESlint 自动格式化代码(2021)
本文用 Vue 项目做示范，基于项目已有eslint环境。
利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。
1、安装插件 ESLint，
2、配置eslint插件
File -> Preference-> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 设置），搜索 eslint，点击 Edit in setting.json
将以下选项添加到配置文件
//配置eslint
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// "eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll": true // 保存时使用eslint校验文件
}
注：这里附上一份我的settings.json，开袋即食，把以下设置直接替换自己的即可
{
"workbench.colorTheme": "Default Dark+",
"workbench.sideBar.location": "left",
"cssrem.rootFontSize": 80,
"git.ignoreWindowsGit27Warning": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
//配置eslint
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// "eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll": true // 保存时使用eslint校验文件
}
}
3、vscode开启eslint校验
有的同志的vscode编辑器可能是第一次配置，需要开启eslint校验（右下角导航里的eslint为红色禁用状态的需要开启）
点击之后根据自己的需求选择校验范围，我选择的是allow everywhere
4、大功告成
配置完之后，VSCode 会根据你当前 Vue 项目下的 .eslintrc.js 文件的规则来验证和格式化代码。
PS：自动格式化代码在保存时自动触发，目前试了 JS 以及 vue 文件中的 JS 代码都没问题。
补充：一键格式化项目代码
如果是整个项目里的代码都不符合自己团队想要的代码规范，再配置好上述格式化后，不想一个文件ctrl + s一次的话，那么请往下看：
1、package.json配置执行命令
在package.json的scripts属性里配置 格式化 命令
"lint": "eslint --fix --ext .js,.vue src"
2、全局下载eslint
npm install -g eslint
3、终端执行命令
npm run lint
这时eslint就会自动修复不符合项目里的eslint.js规范的代码
忽略校验文件
如果有的文件或者目录不想被eslint校验，那么可以在项目里添加.eslintignore文件，那么 在vscode中进行保存 或 进行一键格式化代码时， 该文件或者目录下的文件不会被校验和改动。
build/*.js
src/assets
public
dist
常见问题
1、改变vscode的缩进，不随文件改变
vscode默认会根据文件的缩进来进行显示，如果我们利用eslint校验并自动修改为自己想要的缩进时，视图上而可能还显示为原本文件的缩进格式，如下图所示
可以看到文件已经修改为4个空格的缩进，但是视图里还是2个空格的分割线显示。
这时有两个方法可以解决：
1、如果只想改变当前文件的缩进显示
这样当前文件的缩进显示就正确了
2、改变编辑器所有的文件缩进显示
File -> Preference-> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 设置）
直接解绑按照文件缩进进行显示，设置一个默认的缩进大小，所有文件都按照这个缩进大小进行显示
设置完之后，就可以发现所有的文件都是按照上面填写的tabsize（这里我填写的是4）进行缩进显示了
eslintrc.js配置
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
globals: { // 设置jquery为全局
"$": true
},
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/html-indent": [2, 4, {
"attribute": 1
}],
"vue/prop-name-casing": [2, "camelCase"], // 声明prop时，在 JavaScript 中是 camelCase，在 HTML 中则是 kebab-case
"max-len": [2, 120],
"vue/max-attributes-per-line": [2, { // 单行每行不能超过2个，多行每行不能超过1个
"singleline": 2,
"multiline": {
"max": 1,
"allowFirstLine": false // 多行时不允许属性放置在第一行
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
'camelcase': [0, {
'properties': 'always'
}],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': ["error", "always", { "null": "ignore" }],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 4, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'
}],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, {
'initialized': 'never'
}],
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}],
'semi': [2, 'always'],
'semi-spacing': [2, {
'before': false,
'after': true
}],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never']
}
}