VScode配置eslint保存自动格式化，eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号；““_eslint 不要分号

本文是开启eslint检验和配置eslint格式化；如果想要关闭eslint，查看这篇关闭eslint方法；

1.必须安装的三个插件eslint， prettier-Code formatter ，vetur

2.配置setting.json

3.直接将下方代码复制，黏贴在setting.json文件中
ctrl+s保存时候，自动格式化+无分号+单引号：取决于 这三个设置

    // 当保存代码的时候，会自动格式化
    "editor.formatOnSave": true,
    // 不添加分号
    "prettier.semi": false,
    // 使用单引号
    "prettier.singleQuote": true,
1
2
3
4
5
6

最好直接复用下面的配置，里面有eslint检验和自动修改配置

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "window.zoomLevel": 1,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
  },
  "files.autoSave": "afterDelay",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  // 本地配备eslint
  //自动保存的时候，eslint自动修复一些格式上的错误
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.options": {
  "extensions": [
  ".js",
  ".vue"
  ]
  },
  "eslint.validate": [
  "javascript",
  {
  "language": "vue",
  "autoFix": true
  },
  "html",
  "vue"
  ],
  "emmet.includeLanguages": {
    "javascript": "html",
    "wxml": "html"
  },
  "git.autofetch": true,

  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "workbench.colorTheme": "Default Dark+",
  "workbench.colorCustomizations": {

  },
    // 关闭eslint
    // "eslint.enable": false,


  // tab一键成元素html标签
  "emmet.triggerExpansionOnTab": true,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "minapp-vscode.disableAutoConfig": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
   // 当保存代码的饿时候，会自动格式化
  "editor.formatOnSave": true,
  // 不添加分号
  "prettier.semi": false,
  // 使用单引号
  "prettier.singleQuote": true,
  // 解决Vue换行问题
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",//解决配置默认格式化 js换行问题
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          "wrap_attributes": "auto"
      },
      "prettyhtml": {
          "printWidth": 100,
          "singleQuote": false,
          "wrapAttributes": false,
          "sortAttributes": false
      }
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

4.在你的项目下配置 .eslintrc.js 文件，此文件会用来在保存时候做eslint校验，具体配置网上很多可参考此篇，

配置规则详解：

rules: {
    "规则名": [规则值, 规则配置]
}

1
2
3
4
5

其中规则值有以下3种：0 = off, 1 = warn, 2 = error
"off"或者0    //关闭规则关闭
"warn"或者1    //在打开的规则作为警告（不影响退出代码）
"error"或者2    //把规则作为一个错误（退出代码触发时为1）

1
2
3
4
5

我的配置如下：

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "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': 0, //文件以单一的换行符结束 - 打开
    'eqeqeq': ["error", "always", {
      "null": "ignore"
    }], //必须使用全等  0关 1警告 2或者error错误
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      '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, //禁止修改const声明的变量 - 开启
    '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-empty": 0, //块语句中的内容不能为空 - 关闭
    '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'
    }], //不能有声明后未被使用的变量或参数 0关 1警告 2声明不使用就爆红
    "vue/html-self-closing": ['error', {
      "html": {
        "void": "never",
        "normal": "any",
        "component": "any"
      },
      "svg": "always",
      "math": "always"
    }], //html使用单闭合标签 -打开（配置：在html中never从不开启）
    '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, 'never'],
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [0, 'never'], //函数定义时括号前面要不要有空格：设置为0就是关闭这个规则的检验 1就是如不符合规则就警告 2就是如不符合就报错 --至于保存代码时候 是否会生成空格 这个取决于你设置的代码风格（例如prettier）
    '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': 0, //首选const -- 关闭
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211

如图：

**5.正常情况，到步骤4即可自动保存做eslint校验；如果无效，1.可能是eslint未打开，未打开时候代码是不会报错的： **
查看是否打开，以及打开方式：
2.如果eslint图标是感叹号，则是因为项目根目录外面还套了个文件夹，且用vscode打开，则会出现该问题；直接把项目根目录拖进vscode就可以解决了！ 不要用套了文件夹的文件直接打开

3.如果以上eslint和配置都打开了 ，代码不报红，但是页面还是报错启动不了，那就重新启动一次项目即可

6.ctrl + s保存自动处理错误：

7.最后提交代码时候，最好再次检查下，针对具体错误在手动修改：检查命令 npm run lint

有用就点个赞吧！