背景：
由于在项目进行过程中，发现项目组有ESLint的代码规范，并在各项目中配置了ESLint
导致使用vscode各种报错，如下图
解决方案：
1、安装插件
（1）ESLint：JavaScript代码格式化工具
（2）vetur：可以格式化html，标准css，标准js，vue文件
2、确认package.json中的配置项
这是前提，确认在package.json中安装了eslint依赖，不然配置无用
3、.eslintrc.js 文件配置
首先，在我们项目跟目录添加.eslintrc.js 文件，用于校验代码，编写eslint相关规则，关于eslint的一些具体规则，请查看eslint文档
下面列一下我们项目中常用的eslint规则：
1 module.exports = { 2 root: true, 3 parser: 'babel-eslint', 4 parserOptions: { 5 sourceType: 'module', 6 "allowImportExportEverywhere": true //ignore eslint error: 'import' and 'export' may only appear at the top level 7 }, 8 env: { 9 browser: true, 10 node: true, 11 es6: true, 12 }, 13 extends: 'eslint:recommended', 14 // required to lint *.vue files 15 plugins: [ 16 'html', 17 'vue' 18 ], 19 // add your custom rules here 20 //it is base on https://github.com/vuejs/eslint-config-vue 21 'rules': { 22 'accessor-pairs': 2, 23 'arrow-spacing': [2, { 24 'before': true, 25 'after': true 26 }], 27 'block-spacing': [2, 'always'], 28 'brace-style': [2, '1tbs', { 29 'allowSingleLine': true 30 }], 31 'camelcase': [0, { 32 'properties': 'always' 33 }], 34 'comma-dangle': [2, 'never'], 35 'comma-spacing': [2, { 36 'before': false, 37 'after': true 38 }], 39 'comma-style': [2, 'last'], 40 'constructor-super': 2, 41 'curly': [2, 'multi-line'], 42 'dot-location': [2, 'property'], 43 'eol-last': 2, 44 'eqeqeq': [2, 'allow-null'], 45 'generator-star-spacing': [2, { 46 'before': true, 47 'after': true 48 }], 49 'handle-callback-err': [2, '^(err|error)$'], 50 'indent': [2, 2, { 51 'SwitchCase': 1 52 }], 53 'jsx-quotes': [2, 'prefer-single'], 54 'key-spacing': [2, { 55 'beforeColon': false, 56 'afterColon': true 57 }], 58 'keyword-spacing': [2, { 59 'before': true, 60 'after': true 61 }], 62 'new-cap': [2, { 63 'newIsCap': true, 64 'capIsNew': false 65 }], 66 'new-parens': 2, 67 'no-array-constructor': 2, 68 'no-caller': 2, 69 'no-console': 'off', 70 'no-class-assign': 2, 71 'no-cond-assign': 2, 72 'no-const-assign': 2, 73 'no-control-regex': 0, 74 'no-delete-var': 2, 75 'no-dupe-args': 2, 76 'no-dupe-class-members': 2, 77 'no-dupe-keys': 2, 78 'no-duplicate-case': 2, 79 'no-empty-character-class': 2, 80 'no-empty-pattern': 2, 81 'no-eval': 2, 82 'no-ex-assign': 2, 83 'no-extend-native': 2, 84 'no-extra-bind': 2, 85 'no-extra-boolean-cast': 2, 86 'no-extra-parens': [2, 'functions'], 87 'no-fallthrough': 2, 88 'no-floating-decimal': 2, 89 'no-func-assign': 2, 90 'no-implied-eval': 2, 91 'no-inner-declarations': [2, 'functions'], 92 'no-invalid-regexp': 2, 93 'no-irregular-whitespace': 2, 94 'no-iterator': 2, 95 'no-label-var': 2, 96 'no-labels': [2, { 97 'allowLoop': false, 98 'allowSwitch': false 99 }], 100 'no-lone-blocks': 2, 101 'no-mixed-spaces-and-tabs': 2, 102 'no-multi-spaces': 2, 103 'no-multi-str': 2, 104 'no-multiple-empty-lines': [2, { 105 'max': 1 106 }], 107 'no-native-reassign': 2, 108 'no-negated-in-lhs': 2, 109 'no-new-object': 2, 110 'no-new-require': 2, 111 'no-new-symbol': 2, 112 'no-new-wrappers': 2, 113 'no-obj-calls': 2, 114 'no-octal': 2, 115 'no-octal-escape': 2, 116 'no-path-concat': 2, 117 'no-proto': 2, 118 'no-redeclare': 2, 119 'no-regex-spaces': 2, 120 'no-return-assign': [2, 'except-parens'], 121 'no-self-assign': 2, 122 'no-self-compare': 2, 123 'no-sequences': 2, 124 'no-shadow-restricted-names': 2, 125 'no-spaced-func': 2, 126 'no-sparse-arrays': 2, 127 'no-this-before-super': 2, 128 'no-throw-literal': 2, 129 'no-trailing-spaces': 2, 130 'no-undef': 2, 131 'no-undef-init': 2, 132 'no-unexpected-multiline': 2, 133 'no-unmodified-loop-condition': 2, 134 'no-unneeded-ternary': [2, { 135 'defaultAssignment': false 136 }], 137 'no-unreachable': 2, 138 'no-unsafe-finally': 2, 139 'no-unused-vars': [2, { 140 'vars': 'all', 141 'args': 'none' 142 }], 143 'no-useless-call': 2, 144 'no-useless-computed-key': 2, 145 'no-useless-constructor': 2, 146 'no-useless-escape': 0, 147 'no-whitespace-before-property': 2, 148 'no-with': 2, 149 'one-var': [2, { 150 'initialized': 'never' 151 }], 152 'operator-linebreak': [2, 'after', { 153 'overrides': { 154 '?': 'before', 155 ':': 'before' 156 } 157 }], 158 'padded-blocks': [2, 'never'], 159 'quotes': [2, 'single', { 160 'avoidEscape': true, 161 'allowTemplateLiterals': true 162 }], 163 'semi': [2, 'never'], 164 'semi-spacing': [2, { 165 'before': false, 166 'after': true 167 }], 168 'space-before-blocks': [2, 'always'], 169 'space-before-function-paren': [2, 'never'], 170 'space-in-parens': [2, 'never'], 171 'space-infix-ops': 2, 172 'space-unary-ops': [2, { 173 'words': true, 174 'nonwords': false 175 }], 176 'spaced-comment': [2, 'always', { 177 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] 178 }], 179 'template-curly-spacing': [2, 'never'], 180 'use-isnan': 2, 181 'valid-typeof': 2, 182 'wrap-iife': [2, 'any'], 183 'yield-star-spacing': [2, 'both'], 184 'yoda': [2, 'never'], 185 'prefer-const': 2, 186 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 187 'object-curly-spacing': [2, 'always', { 188 objectsInObjects: false 189 }], 190 'array-bracket-spacing': [2, 'never'] 191 } 192 }
由于接手项目之前，项目组已经配置了相应的ESLint规则，所以我这边的操作是将上面代码中rule的代码全部放入之后，再将原先的ESLint配置项加在 rule 后面
4、配置settings.json文件
在其中加入：
1 // 添加 vue 支持 2 "eslint.validate": [ 3 "javascript", 4 "javascriptreact", 5 { 6 "language": "vue", 7 "autoFix": true 8 } 9 ], 10 // #让prettier使用eslint的代码格式进行校验 11 "prettier.eslintIntegration": true, 12 "vetur.format.defaultFormatter.html": "js-beautify-html", 13 // #让vue中的js按编辑器自带的ts格式进行格式化 14 "vetur.format.defaultFormatter.js": "vscode-typescript", 15 "vetur.format.defaultFormatterOptions": { 16 "js-beautify-html": { 17 "wrap_attributes": "force-aligned" 18 // #vue组件中html代码格式化样式 19 } 20 },
之后就可以发现，这些报错冒红啦~~
让我们来修复它，点击快速修复
大功告成
最后跑一下项目看看
好的，终于没有error提示啦~~~