# 配置（eslit）

前言

了解 vue 项目创建过程以及其目录结构，在开发中需要注意的地方，能够更好地规范前端开发

# 1.代码规范检查

ESLint可以根据预设的规范对代码进行静态分析，检查代码中的潜在问题，如未使用的变量、未定义的变量、不符合规范的代码风格等。

# 2.代码质量评估

ESLint可以根据预设的规则对代码进行质量评估，如代码复杂度、代码重复度等，帮助开发者提高代码质量。

# 3.提供自定义规则

ESLint允许开发者根据自己的需求编写自定义规则，以适应特定的项目需求和编码风格。

# 4.语法检查

ESLint可以检查代码中的语法错误，帮助开发者避免常见的语法错误。

# 5.代码风格统一

ESLint可以根据预设的代码风格规则，对代码进行风格统一，确保整个项目的代码风格一致。

# 6.代码自动修复

ESLint可以根据预设的规则自动修复代码中的一些问题，如自动添加缺失的分号、自动调整缩进等

# 7.项目级配置：

如果同一个目录下有多个配置，ESLint 只会使用一个（并不会进行合并配置）。优先级顺序如下：

eslintrc.js
eslintrc.yaml
eslintrc.yml
eslintrc.json
eslintrc
package.json

# 7.1.`.eslintrc.js`

.eslintignore
eslint 的配置可以写在单独的配置文件.eslintrc.js 或.eslintrc.json 中，也可以写在 package.json 文件的 eslintConfig 配置项中。
.prettierrc.json

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
  },
  extends: "eslint:recommended", // 在js里面有些时候用到一些全局变量，防止eslint无脑报错
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
    process: false,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
  },
  rules: {
    "no-console": "off",
    "linebreak-style": [0, "error", "windows"],
    indent: ["off", 2],
    "accessor-pairs": 2,
    "arrow-spacing": [
      2,
      {
        before: true,
        after: true,
      },
    ],
    "array-bracket-spacing": [2, "never"],
    "block-spacing": [2, "always"],
    "brace-style": [
      2,
      "1tbs",
      {
        allowSingleLine: true,
      },
    ],
    camelcase: [
      2,
      {
        properties: "never",
      },
    ],
    "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: [2, "allow-null"],
    "generator-star-spacing": [
      2,
      {
        before: true,
        after: true,
      },
    ],
    "handle-callback-err": [2, "^(err|error)$"],
    "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-class-assign": 0,
    "no-cond-assign": 2,
    "no-const-assign": 2,
    "no-control-regex": 2,
    "no-debugger": 2,
    "no-delete-var": 2,
    "no-dupe-args": 2,
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-duplicate-imports": 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": 2,
    "no-new-func": 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": 2,
    "no-whitespace-before-property": 2,
    "no-with": 2,
    "one-var": [
      2,
      {
        initialized: "never",
      },
    ],
    "operator-linebreak": [
      2,
      "before",
      {
        overrides: {
          "?": "before",
          ":": "before",
        },
      },
    ],
    "padded-blocks": [2, "never"],
    quotes: [2, "single", "avoid-escape"],
    semi: [2, "never"],
    "semi-spacing": [
      2,
      {
        before: false,
        after: true,
      },
    ],
    "space-before-blocks": [2, "always"], // function方法前面允许加空格
    "space-before-function-paren": [0, "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"],
  },
}

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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

eslintConfig

"eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "rules": {},
      "parserOptions": {
        "parser": "babel-eslint"
     },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 7.2 项目中配置

.eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

← 配置（VueCLI）配置（prettier） →