@2030/eslint-config 2.0.3 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,26 +1,33 @@
1
1
  # @2030/eslint-config
2
2
 
3
- ![NPM Version](https://img.shields.io/npm/v/%402030%2Feslint-config)
4
-
5
- - 自动修复格式(旨在在没有 Prettier 的情况下独立使用)
6
- - 合理的默认值,最佳实践,只需一行配置
7
- - 专为 TypeScript、JSX、Vue、JSON、YAML、Toml、Markdown 等而设计,开箱即用
8
- - 配置化,且非常容易定制
9
- - ESLint Flat 配置,轻松组合
10
- - 可选的 React、Svelte、UnoCSS、Astro、Solid 支持
11
- - 可选的格式化程序支持格式化 CSS、HTML、XML 等
12
- - 样式原则:最小读取,稳定差异,一致
13
- - 排序的导入,悬空的逗号
14
- - 单引号,无分
15
- - 使用ESLint Stylistic
16
- - 默认遵守.gitignore
17
- - 要求ESLint v9.5.0+
18
-
19
- ## 用法
20
-
21
- ### 入门向导
22
-
23
- 我们提供了一个 CLI 工具来帮助您设置项目,或者使用一个命令从旧配置迁移到新的平面配置
3
+ [![npm](https://img.shields.io/npm/v/@2030/eslint-config?color=444&label=)](https://npmjs.com/package/@2030/eslint-config)
4
+
5
+ - 自动格式化修复(独立使用,**无需** Prettier
6
+ - 合理的默认配置,最佳实践,只需一行配置
7
+ - 开箱即用,支持 TypeScript、JSX、Vue、JSON、YAML、Toml、Markdown
8
+ - 固执己见,但[高度可定制](#定制化)
9
+ - 使用 [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new),轻松组合!
10
+ - 可选的 [React](#react)[Next.js](#nextjs)、[Svelte](#svelte)[UnoCSS](#unocss)[Astro](#astro)[Solid](#solid) 支持
11
+ - 可选的 [formatters](#formatters) 支持,用于格式化 CSS、HTML、XML 等
12
+ - **代码风格原则**:阅读简洁、差异稳定、保持一致
13
+ - 排序的导入、尾随逗号
14
+ - 单引号、无分号
15
+ - 使用 [ESLint Stylistic](https://github.com/eslint-stylistic/eslint-stylistic)
16
+ - 默认遵循 `.gitignore`
17
+ - 需要 ESLint v9.5.0+
18
+
19
+ > [!WARNING]
20
+ > 此配置基于 [antfu/eslint-config](https://github.com/antfu/eslint-config) 最新版本同步更新,保持了其完整功能和最佳实践。
21
+ >
22
+ > 这是一个 **个人配置**,包含很多主观意见。更改可能不适合所有人和所有用例。
23
+ >
24
+ > 如果你直接使用此配置,建议 **每次更新时都审查变更**。如果你想要更多控制,请随时 fork。谢谢!
25
+
26
+ ## 使用方法
27
+
28
+ ### 启动向导
29
+
30
+ 我们提供了一个 CLI 工具来帮助你设置项目,或通过一条命令从旧配置迁移到新的 flat config。
24
31
 
25
32
  ```bash
26
33
  pnpm dlx @2030/eslint-config@latest
@@ -28,13 +35,13 @@ pnpm dlx @2030/eslint-config@latest
28
35
 
29
36
  ### 手动安装
30
37
 
31
- 如果您更喜欢手动设置:
38
+ 如果你更喜欢手动设置:
32
39
 
33
40
  ```bash
34
41
  pnpm i -D eslint @2030/eslint-config
35
42
  ```
36
43
 
37
- 并在您的项目根目录中创建: `eslint.config.mjs`
44
+ 并在项目根目录创建 `eslint.config.mjs`:
38
45
 
39
46
  ```js
40
47
  // eslint.config.mjs
@@ -43,15 +50,50 @@ import jun from '@2030/eslint-config'
43
50
  export default jun()
44
51
  ```
45
52
 
46
- ### 添加脚本至 `package.json`
53
+ <details>
54
+ <summary>
55
+ 与旧配置结合使用:
56
+ </summary>
57
+
58
+ 如果你仍然使用某些旧的 eslintrc 格式配置,可以使用 [`@eslint/eslintrc`](https://www.npmjs.com/package/@eslint/eslintrc) 包将它们转换为 flat config。
59
+
60
+ ```js
61
+ // eslint.config.mjs
62
+ import jun from '@2030/eslint-config'
63
+ import { FlatCompat } from '@eslint/eslintrc'
64
+
65
+ const compat = new FlatCompat()
66
+
67
+ export default jun(
68
+ {
69
+ ignores: [],
70
+ },
47
71
 
48
- 例如:
72
+ // Legacy config
73
+ ...compat.config({
74
+ extends: [
75
+ 'eslint:recommended',
76
+ // Other extends...
77
+ ],
78
+ })
79
+
80
+ // Other flat configs...
81
+ )
82
+ ```
83
+
84
+ > 注意:`.eslintignore` 在 Flat config 中不再有效,详见[定制化](#定制化)。
85
+
86
+ </details>
87
+
88
+ ### 添加 package.json 脚本
89
+
90
+ 例如:
49
91
 
50
92
  ```json
51
93
  {
52
94
  "scripts": {
53
- "lint": "eslint .",
54
- "lint:fix": "eslint . --fix"
95
+ "lint": "eslint",
96
+ "lint:fix": "eslint --fix"
55
97
  }
56
98
  }
57
99
  ```
@@ -65,11 +107,11 @@ export default jun()
65
107
 
66
108
  安装 [VS Code ESLint 扩展](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
67
109
 
68
- 将以下设置添加到您的 `.vscode/settings.json`:
110
+ 将以下设置添加到你的 `.vscode/settings.json`:
69
111
 
70
112
  ```jsonc
71
113
  {
72
- // 禁用prettier格式,使用eslint替代
114
+ // 禁用默认格式化程序,改用 eslint
73
115
  "prettier.enable": false,
74
116
  "editor.formatOnSave": false,
75
117
 
@@ -79,7 +121,7 @@ export default jun()
79
121
  "source.organizeImports": "never"
80
122
  },
81
123
 
82
- // 在IDE中保持默认规则,但仍然会自动修复它们
124
+ // 在 IDE 中静默样式规则,但仍然自动修复它们
83
125
  "eslint.rules.customizations": [
84
126
  { "rule": "style/*", "severity": "off", "fixable": true },
85
127
  { "rule": "format/*", "severity": "off", "fixable": true },
@@ -93,7 +135,7 @@ export default jun()
93
135
  { "rule": "*semi", "severity": "off", "fixable": true }
94
136
  ],
95
137
 
96
- // 开启eslint的语言支持
138
+ // 为所有支持的语言启用 eslint
97
139
  "eslint.validate": [
98
140
  "javascript",
99
141
  "javascriptreact",
@@ -122,102 +164,61 @@ export default jun()
122
164
 
123
165
  </details>
124
166
 
125
- ## 定制
167
+ ## 定制化
168
+
169
+ 从 v1.0 开始,我们迁移到了 [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new)。它提供了更好的组织和组合能力。
126
170
 
127
- 通常,您只需导入预设 `jun`:
171
+ 通常你只需导入 `jun` 预设:
128
172
 
129
173
  ```js
130
174
  // eslint.config.js
131
- import jun from '@jun/eslint-config'
175
+ import jun from '@2030/eslint-config'
132
176
 
133
177
  export default jun()
134
178
  ```
135
179
 
136
- 就是这样。或者您可以单独配置每个集成,例如:
180
+ 就这样!或者你可以单独配置每个集成,例如:
137
181
 
138
182
  ```js
139
183
  // eslint.config.js
140
184
  import jun from '@2030/eslint-config'
141
185
 
142
186
  export default jun({
143
- /**
144
- * 项目的类型,'lib' 为库, 默认为 'app'
145
- * @default 默认值: 'app'
146
- */
187
+ // 项目类型。'lib' 用于库,默认是 'app'
147
188
  type: 'lib',
148
189
 
149
- /**
150
- * 是否启用 stylistic 格式化规则
151
- * @default 默认值: true
152
- * @example 可选: false | { indent?: number | 'tab'; quotes?: 'single' | 'double'; jsx?: boolean; semi?: boolean; lessOpinionated?: boolean; }
153
- */
190
+ // `.eslintignore` 在 Flat config 中不再支持,改用 `ignores`
191
+ // 第一个参数中的 `ignores` 选项被特别处理为始终是全局忽略
192
+ // 并且会 **扩展** 配置的默认忽略,而不是覆盖它们
193
+ // 你也可以传递一个函数来修改默认忽略
194
+ ignores: [
195
+ '**/fixtures',
196
+ // ...globs
197
+ ],
198
+
199
+ // 解析 `.gitignore` 文件以获取忽略规则,默认开启
200
+ gitignore: true,
201
+
202
+ // 启用样式格式化规则
203
+ // stylistic: true,
204
+
205
+ // 或自定义样式规则
154
206
  stylistic: {
155
207
  indent: 2, // 4, or 'tab'
156
208
  quotes: 'single', // or 'double'
157
209
  },
158
210
 
159
- /**
160
- * 是否启用 typescript 规则
161
- * @default 默认值: 检测是否安装typescript依赖
162
- * @example 可选: false | true | { parserOptions: {}; files?: string[] }
163
- */
211
+ // TypeScript 和 Vue 会自动检测,你也可以显式启用它们:
164
212
  typescript: true,
165
-
166
- /**
167
- * 是否启用 vue 规则
168
- * @default 默认值: 检测是否安装vue依赖
169
- * @example 可选: false | true | { files?: string[]; sfcBlocks: boolean }
170
- */
171
213
  vue: true,
172
214
 
173
- /**
174
- * 是否启用 jsx 规则
175
- * @default 默认值: true
176
- * @example 可选: false
177
- */
178
- jsx: true,
179
-
180
- /**
181
- * 是否启用 react 规则
182
- * @default 默认值: 检测是否安装react依赖
183
- * @example 可选: false | true | { jsx?: boolean; version?: string; files?: string[] }
184
- */
185
- react: true,
186
-
187
- /**
188
- * 是否启用 unocss 规则
189
- * @default 默认值: false,
190
- * @example 可选: true | { attributify?: boolean; strict?: boolean }
191
- */
192
- unocss: true,
193
-
194
- /**
195
- * 是否启用 jsonc 规则
196
- * @default 默认值: true
197
- * @example 可选: false | { files?: string[] }
198
- */
215
+ // 禁用 jsonc 和 yaml 支持
199
216
  jsonc: false,
200
-
201
- /**
202
- * 是否启用 yaml 规则
203
- * @default 默认值: true
204
- * @example 可选: false | { files?: string[] }
205
- */
206
217
  yaml: false,
207
-
208
- /**
209
- * 是否启用 .gitignore 文件
210
- * @default 默认值: true
211
- * @example 可选: false | { ignores?: string[] }
212
- */
213
- ignores: [
214
- '**/fixtures',
215
- // ...globs
216
- ]
217
218
  })
218
219
  ```
219
220
 
220
- 工厂函数还接受任意数量的任意自定义配置覆盖 `jun`:
221
+ `jun` 工厂函数还接受任意数量的自定义配置覆盖:
221
222
 
222
223
  ```js
223
224
  // eslint.config.js
@@ -225,10 +226,11 @@ import jun from '@2030/eslint-config'
225
226
 
226
227
  export default jun(
227
228
  {
228
- // 原始库(jun)配置
229
+ // 配置选项
229
230
  },
230
231
 
231
- // 从第二个参数开始,它们是 ESLint 扁平配置,可做多个设置
232
+ // 从第二个参数开始,它们都是 ESLint Flat Configs
233
+ // 你可以有多个配置
232
234
  {
233
235
  files: ['**/*.ts'],
234
236
  rules: {},
@@ -239,70 +241,22 @@ export default jun(
239
241
  )
240
242
  ```
241
243
 
242
- 更高级地说,你还可以导入细粒度的配置并根据需要组合它们:
243
-
244
- <details>
245
- <summary>高级示例</summary>
246
-
247
- 除非你确切地知道它们在做什么,否则我们通常不建议使用这种样式,因为配置之间存在共享选项,可能需要格外小心才能使它们保持一致
248
-
249
- ```js
250
- // eslint.config.js
251
- import {
252
- combine,
253
- comments,
254
- ignores,
255
- imports,
256
- javascript,
257
- jsdoc,
258
- jsonc,
259
- markdown,
260
- node,
261
- sortPackageJson,
262
- sortTsconfig,
263
- stylistic,
264
- toml,
265
- typescript,
266
- unicorn,
267
- vue,
268
- yaml,
269
- } from '@2030/eslint-config'
270
-
271
- export default combine(
272
- ignores(),
273
- javascript(/* Options */),
274
- comments(),
275
- node(),
276
- jsdoc(),
277
- imports(),
278
- unicorn(),
279
- typescript(/* Options */),
280
- stylistic(),
281
- vue(),
282
- jsonc(),
283
- yaml(),
284
- toml(),
285
- markdown(),
286
- )
287
- ```
288
-
289
- </details>
290
-
291
244
  ### 插件重命名
292
245
 
293
- 由于平面配置要求我们显式提供插件名称(而不是 npm 包名称中的强制性约定),因此我们重命名了一些插件,以使整体范围更加一致且更易于编写。
246
+ 由于 flat config 要求我们显式提供插件名称(而不是从 npm 包名强制约定),我们重命名了一些插件以使整体范围更一致且更易编写。
294
247
 
295
- | New Prefix | Original Prefix | Source Plugin |
296
- | ---------- | ---------------------- | ------------------------------------------------------------------------------------------ |
297
- | `import/*` | `import-x/*` | [eslint-plugin-import-x](https://github.com/un-es/eslint-plugin-import-x) |
298
- | `node/*` | `n/*` | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n) |
299
- | `yaml/*` | `yml/*` | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml) |
300
- | `ts/*` | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) |
301
- | `style/*` | `@stylistic/*` | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic) |
302
- | `test/*` | `vitest/*` | [@vitest/eslint-plugin](https://github.com/vitest-dev/eslint-plugin-vitest) |
303
- | `test/*` | `no-only-tests/*` | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests) |
248
+ | 新前缀 | 原前缀 | 源插件 |
249
+ | ---------- | ---------------------- | ----------------------------------------------------------------------------------------------------- |
250
+ | `import/*` | `import-lite/*` | [eslint-plugin-import-lite](https://github.com/9romise/eslint-plugin-import-lite) |
251
+ | `node/*` | `n/*` | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n) |
252
+ | `yaml/*` | `yml/*` | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml) |
253
+ | `ts/*` | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) |
254
+ | `style/*` | `@stylistic/*` | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic) |
255
+ | `test/*` | `vitest/*` | [@vitest/eslint-plugin](https://github.com/vitest-dev/eslint-plugin-vitest) |
256
+ | `test/*` | `no-only-tests/*` | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests) |
257
+ | `next/*` | `@next/next` | [@next/eslint-plugin-next](https://github.com/vercel/next.js/tree/canary/packages/eslint-plugin-next) |
304
258
 
305
- 当您想要覆盖规则或内联禁用它们时,您需要更新到新前缀:
259
+ 当你想要覆盖规则或内联禁用它们时,需要更新到新前缀:
306
260
 
307
261
  ```diff
308
262
  -// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -310,11 +264,9 @@ export default combine(
310
264
  type foo = { bar: 2 }
311
265
  ```
312
266
 
313
- </details>
314
-
315
267
  ### 规则覆盖
316
268
 
317
- 某些规则将仅在特定文件中启用,例如,规则将仅在文件中启用,而规则将仅在文件中启用。如果要覆盖规则,则需要指定文件扩展名, `ts/*` `.ts` `vue/*` `.vue`:
269
+ 某些规则只会在特定文件中启用,例如,`ts/*` 规则只会在 `.ts` 文件中启用,`vue/*` 规则只会在 `.vue` 文件中启用。如果你想覆盖规则,需要指定文件扩展名:
318
270
 
319
271
  ```js
320
272
  // eslint.config.js
@@ -326,14 +278,14 @@ export default jun(
326
278
  typescript: true
327
279
  },
328
280
  {
329
- // 请记住在这里指定文件 glob,否则它可能导致 vue 插件处理非 vue 文件
281
+ // 记住在这里指定文件 glob,否则可能导致 vue 插件处理非 vue 文件
330
282
  files: ['**/*.vue'],
331
283
  rules: {
332
284
  'vue/operator-linebreak': ['error', 'before'],
333
285
  },
334
286
  },
335
287
  {
336
- // 没有 `file`,它们就是所有文件的一般规则
288
+ // 没有 `files`,这些是所有文件的通用规则
337
289
  rules: {
338
290
  'style/semi': ['error', 'never'],
339
291
  },
@@ -341,7 +293,7 @@ export default jun(
341
293
  )
342
294
  ```
343
295
 
344
- 我们还在每个集成中提供了选项,以使其更容易 `overrides` :
296
+ 我们还在每个集成中提供了 `overrides` 选项使其更简单:
345
297
 
346
298
  ```js
347
299
  // eslint.config.js
@@ -368,7 +320,7 @@ export default jun({
368
320
 
369
321
  ### Vue
370
322
 
371
- 通过检查您的项目中是否安装了 Vue 支持,会自动检测到 Vue 支持。您还可以显式启用/禁用它:
323
+ Vue 支持通过检查项目中是否安装了 `vue` 来自动检测。你也可以显式启用/禁用它:
372
324
 
373
325
  ```js
374
326
  // eslint.config.js
@@ -379,79 +331,51 @@ export default jun({
379
331
  })
380
332
  ```
381
333
 
382
- #### Vue 2
334
+ ### 可选配置
383
335
 
384
- 我们对 Vue 2 的支持有限。如果你仍在使用 Vue 2,你可以通过设置为:
336
+ 我们为特定用例提供了一些可选配置,默认情况下不包含它们的依赖项。
385
337
 
386
- ```js
387
- // eslint.config.js
388
- import jun from '@2030/eslint-config'
389
-
390
- export default jun({
391
- vue: {
392
- vueVersion: 2
393
- },
394
- })
395
- ```
396
-
397
- #### 格式化
338
+ #### React
398
339
 
399
- 使用外部格式化程序来格式化 ESLint 还无法支持的文件 (`.css`, `.html`, etc)。[`eslint-plugin-format`](https://github.com/antfu/eslint-plugin-format)。
340
+ 要启用 React 支持,你需要显式开启:
400
341
 
401
342
  ```js
402
343
  // eslint.config.js
403
344
  import jun from '@2030/eslint-config'
404
345
 
405
346
  export default jun({
406
- formatters: {
407
- /**
408
- * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
409
- * By default uses Prettier
410
- */
411
- css: true,
412
- /**
413
- * Format HTML files
414
- * By default uses Prettier
415
- */
416
- html: true,
417
- /**
418
- * Format Markdown files
419
- * Supports Prettier and dprint
420
- * By default uses Prettier
421
- */
422
- markdown: 'prettier'
423
- }
347
+ react: true,
424
348
  })
425
349
  ```
426
350
 
427
- 运行 `npx eslint` 应该会提示你安装所需的依赖项,否则你可以手动安装它们:
351
+ 运行 `npx eslint` 会提示你安装所需的依赖,否则,你可以手动安装它们:
428
352
 
429
353
  ```bash
430
- npm i -D eslint-plugin-format
354
+ npm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
431
355
  ```
432
356
 
433
- #### React
357
+ #### Next.js
434
358
 
435
- 要启用 React 支持,你需要显式地打开它:
359
+ 要启用 Next.js 支持,你需要显式开启:
436
360
 
437
361
  ```js
438
362
  // eslint.config.js
439
363
  import jun from '@2030/eslint-config'
440
364
 
441
365
  export default jun({
442
- react: true,
366
+ nextjs: true,
443
367
  })
444
368
  ```
445
369
 
446
- 运行 `npx eslint` 应该会提示你安装所需的依赖项,否则你可以手动安装它们:
370
+ 运行 `npx eslint` 会提示你安装所需的依赖,否则,你可以手动安装它们:
447
371
 
448
372
  ```bash
449
- npm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
373
+ npm i -D @next/eslint-plugin-next
450
374
  ```
451
375
 
452
376
  #### Svelte
453
377
 
454
- 要启用 svelte 支持,您需要显式打开它:
378
+ 要启用 Svelte 支持,你需要显式开启:
455
379
 
456
380
  ```js
457
381
  // eslint.config.js
@@ -462,7 +386,7 @@ export default jun({
462
386
  })
463
387
  ```
464
388
 
465
- 运行 `npx eslint` 应该会提示你安装所需的依赖项,否则你可以手动安装它们:
389
+ 运行 `npx eslint` 会提示你安装所需的依赖,否则,你可以手动安装它们:
466
390
 
467
391
  ```bash
468
392
  npm i -D eslint-plugin-svelte
@@ -470,7 +394,7 @@ npm i -D eslint-plugin-svelte
470
394
 
471
395
  #### Astro
472
396
 
473
- 要启用 astro 支持,你需要显式地打开它:
397
+ 要启用 Astro 支持,你需要显式开启:
474
398
 
475
399
  ```js
476
400
  // eslint.config.js
@@ -481,7 +405,7 @@ export default jun({
481
405
  })
482
406
  ```
483
407
 
484
- 运行 `npx eslint` 应该会提示你安装所需的依赖项,否则你可以手动安装它们::
408
+ 运行 `npx eslint` 会提示你安装所需的依赖,否则,你可以手动安装它们:
485
409
 
486
410
  ```bash
487
411
  npm i -D eslint-plugin-astro
@@ -489,7 +413,7 @@ npm i -D eslint-plugin-astro
489
413
 
490
414
  #### Solid
491
415
 
492
- 要启用 Solid 支持,你需要显式地打开它:
416
+ 要启用 Solid 支持,你需要显式开启:
493
417
 
494
418
  ```js
495
419
  // eslint.config.js
@@ -500,7 +424,7 @@ export default jun({
500
424
  })
501
425
  ```
502
426
 
503
- 运行 `npx eslint` 应该会提示你安装所需的依赖项,否则你可以手动安装它们:
427
+ 运行 `npx eslint` 会提示你安装所需的依赖,否则,你可以手动安装它们:
504
428
 
505
429
  ```bash
506
430
  npm i -D eslint-plugin-solid
@@ -508,7 +432,7 @@ npm i -D eslint-plugin-solid
508
432
 
509
433
  #### UnoCSS
510
434
 
511
- 要启用 UnoCSS 支持,您需要显式地打开它:
435
+ 要启用 UnoCSS 支持,你需要显式开启:
512
436
 
513
437
  ```js
514
438
  // eslint.config.js
@@ -519,51 +443,51 @@ export default jun({
519
443
  })
520
444
  ```
521
445
 
522
- 运行 `npx eslint` 应该会提示你安装所需的依赖项,否则你可以手动安装它们:
446
+ 运行 `npx eslint` 会提示你安装所需的依赖,否则,你可以手动安装它们:
523
447
 
524
448
  ```bash
525
449
  npm i -D @unocss/eslint-plugin
526
450
  ```
527
451
 
528
- ### 可选规则
529
-
530
- 此配置还提供了一些可选的插件/规则以扩展使用
531
-
532
- #### `command`
452
+ #### Formatters
533
453
 
534
- [`eslint-plugin-command`](https://github.com/antfu/eslint-plugin-command)提供支持
454
+ 使用外部格式化程序来格式化 ESLint 尚未处理的文件(`.css`、`.html` 等)。由 [`eslint-plugin-format`](https://github.com/antfu/eslint-plugin-format) 提供支持。
535
455
 
536
- 对于一些触发器,例如:
537
-
538
- - `/// to-function` - 将箭头函数转换为普通函数
539
- - `/// to-arrow` - 将普通函数转换为箭头函数
540
- - `/// to-for-each` - 将 for-in/for-of 遍历转换为 .forEach()
541
- - `/// to-for-of` - 将 .forEach() 转换为 for-of
542
- - `/// keep-sorted` - 对对象/数组/接口进行排序
543
- - ... 等等. - 可参考 [文档](https://github.com/antfu/eslint-plugin-command#built-in-commands)
544
-
545
- 例如,您可以在要转换的代码上方一行添加触发器注释(注意三斜杠):
546
-
547
- <!-- eslint-skip -->
456
+ ```js
457
+ // eslint.config.js
458
+ import jun from '@2030/eslint-config'
548
459
 
549
- ```ts
550
- /// to-function
551
- const foo = async (msg: string): void => {
552
- console.log(msg)
553
- }
460
+ export default jun({
461
+ formatters: {
462
+ /**
463
+ * 格式化 CSS, LESS, SCSS 文件,以及 Vue 中的 `<style>` 块
464
+ * 默认使用 Prettier
465
+ */
466
+ css: true,
467
+ /**
468
+ * 格式化 HTML 文件
469
+ * 默认使用 Prettier
470
+ */
471
+ html: true,
472
+ /**
473
+ * 格式化 Markdown 文件
474
+ * 支持 Prettier 和 dprint
475
+ * 默认使用 Prettier
476
+ */
477
+ markdown: 'prettier'
478
+ }
479
+ })
554
480
  ```
555
481
 
556
- 当您使用编辑器点击保存或运行 `eslint . --fix` 时,将转换为此格式:
482
+ 运行 `npx eslint` 会提示你安装所需的依赖,否则,你可以手动安装它们:
557
483
 
558
- ```ts
559
- async function foo(msg: string): void {
560
- console.log(msg)
561
- }
484
+ ```bash
485
+ npm i -D eslint-plugin-format
562
486
  ```
563
487
 
564
- 命令注释通常是一次性的,并且将随转换一起删除
488
+ ### 类型感知规则
565
489
 
566
- ### 类型识别规则
490
+ 你可以通过向 `typescript` 配置传递选项对象来可选地启用[类型感知规则](https://typescript-eslint.io/linting/typed-linting/):
567
491
 
568
492
  ```js
569
493
  // eslint.config.js
@@ -576,40 +500,37 @@ export default jun({
576
500
  })
577
501
  ```
578
502
 
579
- ### Lint 暂存
503
+ ## 查看启用了哪些规则
580
504
 
581
- 如果要在每次提交之前应用 lint 和 auto-fix, 可以将以下内容添加到您的 `package.json`中:
505
+ 我构建了一个可视化工具来帮助你查看项目中启用了哪些规则以及它们应用于哪些文件,[@eslint/config-inspector](https://github.com/eslint/config-inspector)
582
506
 
583
- ```json
584
- {
585
- "simple-git-hooks": {
586
- "pre-commit": "pnpm lint-staged"
587
- },
588
- "lint-staged": {
589
- "*": "eslint --fix"
590
- }
591
- }
507
+ 进入包含 `eslint.config.js` 的项目根目录并运行:
508
+
509
+ ```bash
510
+ npx @eslint/config-inspector
592
511
  ```
593
512
 
594
- 然后
513
+ ## 版本策略
595
514
 
596
- ```bash
597
- npm i -D lint-staged simple-git-hooks
515
+ 此项目遵循[语义化版本](https://semver.org/)进行发布。但是,由于这只是一个配置并涉及意见和许多动态部分,我们不将规则更改视为破坏性更改。
598
516
 
599
- // to active the hooks
600
- npx simple-git-hooks
601
- ```
517
+ ### 被视为破坏性更改的变更
602
518
 
603
- ## View what rules are enabled
519
+ - Node.js 版本要求变更
520
+ - 可能破坏配置的大型重构
521
+ - 插件进行了可能破坏配置的重大更改
522
+ - 可能影响大多数代码库的更改
604
523
 
605
- 我构建了一个可视化工具来帮助您查看项目中启用了哪些规则并将其应用于哪些文件, [@eslint/config-inspector](https://github.com/eslint/config-inspector), 转到包含并运行以下项目的根目录 `eslint.config.js` 然后执行以下命令即可:
524
+ ### 被视为非破坏性更改的变更
606
525
 
607
- ```bash
608
- npx @eslint/config-inspector
609
- ```
526
+ - 启用/禁用规则和插件(可能会变得更严格)
527
+ - 规则选项更改
528
+ - 依赖项版本升级
529
+
530
+ ## 致谢
610
531
 
611
- > Thanks to antfu/eslint-config for the inspiration and reference.
532
+ 本配置基于 [antfu/eslint-config](https://github.com/antfu/eslint-config) 进行同步更新,感谢 Anthony Fu 的出色工作!
612
533
 
613
- ## License
534
+ ## 许可证
614
535
 
615
- [MIT](./LICENSE) License &copy; 2022-PRESENT Jun2030
536
+ [MIT](./LICENSE) License &copy; 2019-PRESENT Dai Jun