@svifty7/eslint-config 0.0.1

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025-PRESENT svifty7<https://github.com/svifty7>
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,521 @@
1
+ # @svifty7/eslint-config
2
+
3
+ Thanks to Anthony Fu for creating the original plugin [@antfu/eslint-config](https://github.com/antfu/eslint-config) which served as the basis for this project.
4
+
5
+ ![npm](https://img.shields.io/npm/v/%40svifty7%2Feslint-config?style=flat&logo=npm&logoColor=%23CB3837)
6
+
7
+ An ESLint configuration based on [@antfu/eslint-config](https://github.com/antfu/eslint-config), tailored to my personal preferences and coding style. This configuration is integrated with Prettier. It supports Vue 3, TypeScript, JSON, YAML, TOML, Markdown, and other formats out of the box.
8
+
9
+ > [!WARNING]
10
+ >
11
+ > Unlike the original package, I’ve removed functionality related to the automatic installation of packages upon auto-detection. Instead, dependencies are included by default (except for `eslint` and `vue`, which need to be installed separately). Support for React, Svelte, Astro, Solid, and Slidev has been removed, as they are not used in my projects.
12
+ >
13
+ > Instead of relying **solely on ESLint**, I’ve **added Prettier** because I prefer the code output it produces, and conflicting rules have been disabled as a result. Some rules have also been disabled, modified, or added, such as enforcing semicolons.
14
+ >
15
+ > These changes suit my preferences but may not align with your expectations. If you use this config, carefully review it when installing or updating the plugin. As with the original plugin, you can customize it or fork it to tailor it to your needs.
16
+
17
+ ## Key Features
18
+
19
+ - Uses Prettier for code formatting
20
+ - Out-of-the-box support for Vue 3
21
+ - Works with TypeScript, JSX, JSON, YAML, TOML, Markdown, and more
22
+ - Built on ESLint Flat Config for flexible composition
23
+ - Auto-fixing for most rules
24
+ - Respects .gitignore by default
25
+ - Requires ESLint v9.26.0+. Earlier versions may work with modifications, but they are untested.
26
+ - Styling rules:
27
+ - Enforced semicolons, single quotes, trailing commas
28
+ - Uses ESLint Stylistic
29
+ - Simple setup: one line for basic configuration
30
+ - Highly customizable for specific needs
31
+
32
+ ## Usage
33
+
34
+ ### Install
35
+
36
+ Install eslint with this config:
37
+
38
+ ```bash
39
+ pnpm add -D eslint @svifty7/eslint-config
40
+ ```
41
+
42
+ And create `eslint.config.js` in your project root:
43
+
44
+ ```js
45
+ // eslint.config.js
46
+ import configure from '@svifty7/eslint-config';
47
+
48
+ export default configure();
49
+ ```
50
+
51
+ <details>
52
+ <summary>
53
+ Combined with legacy config:
54
+ </summary>
55
+
56
+ If you still use some configs from the legacy eslintrc format, you can use the [`@eslint/eslintrc`](https://www.npmjs.com/package/@eslint/eslintrc) package to convert them to the flat config.
57
+
58
+ ```js
59
+ // eslint.config.js
60
+ import { FlatCompat } from '@eslint/eslintrc';
61
+ import configure from '@svifty7/eslint-config';
62
+
63
+ const compat = new FlatCompat();
64
+
65
+ export default configure(
66
+ {
67
+ ignores: [],
68
+ },
69
+
70
+ // Legacy config
71
+ ...compat.config({
72
+ extends: [
73
+ 'eslint:recommended',
74
+ // Other extends…
75
+ ],
76
+ }),
77
+
78
+ // Other flat configs…
79
+ );
80
+ ```
81
+
82
+ > Note that `.eslintignore` no longer works in Flat config, see [customization](#customization) for more details.
83
+
84
+ </details>
85
+
86
+ ### Add script for package.json
87
+
88
+ For example:
89
+
90
+ ```json
91
+ {
92
+ "scripts": {
93
+ "lint": "eslint",
94
+ "lint:fix": "eslint --fix"
95
+ }
96
+ }
97
+ ```
98
+
99
+ ## IDE Support (auto fix on save)
100
+
101
+ <details>
102
+ <summary>🟦 VS Code support</summary>
103
+
104
+ <br>
105
+
106
+ Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
107
+
108
+ Add the following settings to your `.vscode/settings.json`:
109
+
110
+ ```jsonc
111
+ {
112
+ // Disable the default formatter, use eslint instead
113
+ "prettier.enable": false,
114
+ "editor.formatOnSave": false,
115
+
116
+ // Auto fix
117
+ "editor.codeActionsOnSave": {
118
+ "source.fixAll.eslint": "explicit",
119
+ "source.organizeImports": "never"
120
+ },
121
+
122
+ // Enable eslint for all supported languages
123
+ "eslint.validate": [
124
+ "javascript",
125
+ "typescript",
126
+ "vue",
127
+ "html",
128
+ "markdown",
129
+ "json",
130
+ "json5",
131
+ "jsonc",
132
+ "yaml",
133
+ "toml",
134
+ "xml",
135
+ "gql",
136
+ "graphql",
137
+ "css",
138
+ "less",
139
+ "scss",
140
+ "pcss",
141
+ "postcss"
142
+ ]
143
+ }
144
+ ```
145
+
146
+ </details>
147
+
148
+ ## Customization
149
+
150
+ Normally you only need to import the `configure` preset:
151
+
152
+ ```js
153
+ // eslint.config.js
154
+ import configure from '@svifty7/eslint-config';
155
+
156
+ export default configure();
157
+ ```
158
+
159
+ And that's it! Or you can configure each integration individually, for example:
160
+
161
+ ```js
162
+ // eslint.config.js
163
+ import configure from '@svifty7/eslint-config';
164
+
165
+ export default configure({
166
+ gitignore: {
167
+ strict: true, // Throw an error if gitignore file not found.
168
+ },
169
+
170
+ // Type of the project. 'lib' for libraries, the default is 'app'
171
+ type: 'lib',
172
+
173
+ // Stylistic rules enabled by default, you can only customize them:
174
+ stylistic: {
175
+ indent: 2, // 4, or 'tab'
176
+ quotes: 'single', // or 'double'
177
+ },
178
+
179
+ // TypeScript and Vue are autodetected, you can also configure them:
180
+ typescript: {
181
+ tsconfigPath: 'path/to/tsconfig.json', // Path to tsconfig.json
182
+ },
183
+ vue: {
184
+ files: ['**/*.CustomFileFormat'],
185
+ },
186
+
187
+ // Disable jsonc and yaml support
188
+ jsonc: false,
189
+ yaml: false,
190
+
191
+ // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
192
+ ignores: [
193
+ '**/custom-ignore-folder',
194
+ /* ...globs */
195
+ ],
196
+ });
197
+ ```
198
+
199
+ The `configure` factory function also accepts any number of arbitrary custom config overrides:
200
+
201
+ ```js
202
+ // eslint.config.js
203
+ import configure from '@svifty7/eslint-config';
204
+
205
+ export default configure(
206
+ {
207
+ // Configures for svifty7's config
208
+ },
209
+
210
+ // From the second arguments they are ESLint Flat Configs
211
+ // you can have multiple configs
212
+ {
213
+ files: ['**/*.ts'],
214
+ rules: {},
215
+ },
216
+ {
217
+ rules: {},
218
+ },
219
+ );
220
+ ```
221
+
222
+ Going more advanced, you can also import fine-grained configs and compose them as you wish:
223
+
224
+ <details>
225
+ <summary>Advanced Example</summary>
226
+
227
+ Anthony Fu [don't recommend](https://github.com/antfu/eslint-config/blob/main/README.md#customization) using this style unless you know exactly what you're doing, as shared options between configs may require extra care to ensure consistency.
228
+
229
+ ```js
230
+ // eslint.config.js
231
+ import {
232
+ combine,
233
+ comments,
234
+ ignores,
235
+ imports,
236
+ javascript,
237
+ jsdoc,
238
+ jsonc,
239
+ markdown,
240
+ node,
241
+ sortPackageJson,
242
+ sortTsconfig,
243
+ stylistic,
244
+ toml,
245
+ typescript,
246
+ unicorn,
247
+ vue,
248
+ yaml,
249
+ } from '@svifty7/eslint-config';
250
+
251
+ export default combine(
252
+ ignores(),
253
+ javascript(),
254
+ comments(),
255
+ node(),
256
+ jsdoc(),
257
+ imports(),
258
+ unicorn(),
259
+ typescript(/* Options */),
260
+ stylistic(),
261
+ vue(),
262
+ jsonc(),
263
+ yaml(),
264
+ toml(),
265
+ markdown(),
266
+ );
267
+ ```
268
+
269
+ </details>
270
+
271
+ Check out the [configs](https://github.com/svifty7/eslint-config/blob/main/src/configs) and [factory](https://github.com/svifty7/eslint-config/blob/main/src/factory.ts) or [original package](https://github.com/antfu/eslint-config) for more details.
272
+
273
+ > Thanks to [antfu/eslint-config](https://github.com/antfu/eslint-config) and [sxzz/eslint-config](https://github.com/sxzz/eslint-config) for the inspiration and reference.
274
+
275
+ ### Plugins Renaming
276
+
277
+ Since flat config requires us to explicitly provide plugin prefixes (instead of relying on npm package naming conventions).
278
+
279
+ | New Prefix | Original Prefix | Source Plugin |
280
+ | ---------- | ---------------------- | ------------------------------------------------------------------------------------------ |
281
+ | `import/*` | `import-x/*` | [eslint-plugin-import-x](https://github.com/un-es/eslint-plugin-import-x) |
282
+ | `node/*` | `n/*` | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n) |
283
+ | `yaml/*` | `yml/*` | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml) |
284
+ | `ts/*` | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) |
285
+ | `style/*` | `@stylistic/*` | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic) |
286
+ | `test/*` | `vitest/*` | [@vitest/eslint-plugin](https://github.com/vitest-dev/eslint-plugin-vitest) |
287
+ | `test/*` | `no-only-tests/*` | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests) |
288
+
289
+ When you want to override rules, or disable them inline, you need to update to the new prefix:
290
+
291
+ ```diff
292
+ -// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
293
+ +// eslint-disable-next-line ts/consistent-type-definitions
294
+ type foo = { bar: 2 }
295
+ ```
296
+
297
+ > [!NOTE]
298
+ >
299
+ > About plugin renaming - it is actually rather a dangrous move that might leading to potential naming collisions, pointed out [here](https://github.com/eslint/eslint/discussions/17766) and [here](https://github.com/prettier/eslint-config-prettier#eslintconfigjs-flat-config-plugin-caveat).
300
+ >
301
+ > As this config also very personal and opinionated, I share Anthony's point of view and position this config as the only "top-level" config per project.
302
+
303
+ This preset will automatically rename the plugins also for your custom configs. You can use the original prefix to override the rules directly.
304
+
305
+ <details>
306
+ <summary>Change back to original prefix</summary>
307
+
308
+ If you really want to use the original prefix, you can revert the plugin renaming by:
309
+
310
+ ```ts
311
+ import configure from '@svifty7/eslint-config';
312
+
313
+ export default configure().renamePlugins({
314
+ ts: '@typescript-eslint',
315
+ yaml: 'yml',
316
+ node: 'n',
317
+ // ...
318
+ });
319
+ ```
320
+
321
+ </details>
322
+
323
+ ### Rules Overrides
324
+
325
+ Certain rules would only be enabled in specific files, for example, `ts/*` rules would only be enabled in `.ts` files and `vue/*` rules would only be enabled in `.vue` files. If you want to override the rules, you need to specify the file extension:
326
+
327
+ ```js
328
+ // eslint.config.js
329
+ import configure from '@svifty7/eslint-config';
330
+
331
+ export default configure(
332
+ {},
333
+ {
334
+ // Specify the file glob to prevent the Vue plugin from processing non-Vue files.
335
+ files: ['**/*.vue'],
336
+ rules: {
337
+ 'vue/operator-linebreak': ['error', 'before'],
338
+ },
339
+ },
340
+ {
341
+ // Without `files`, they are general rules for all files
342
+ rules: {
343
+ 'style/semi': ['error', 'never'],
344
+ },
345
+ },
346
+ );
347
+ ```
348
+
349
+ ### Config Composer
350
+
351
+ The factory function `configure()` returns a [`FlatConfigComposer` object from `eslint-flat-config-utils`](https://github.com/antfu/eslint-flat-config-utils#composer) where you can chain the methods to compose the config even more flexibly.
352
+
353
+ ```js
354
+ // eslint.config.js
355
+ import configure from '@svifty7/eslint-config';
356
+
357
+ export default configure()
358
+ // some configs before the main config
359
+ .prepend()
360
+ // overrides any named configs
361
+ .override('svifty7/imports', {
362
+ rules: {
363
+ 'import/order': ['error', { 'newlines-between': 'always' }],
364
+ },
365
+ })
366
+ // rename plugin prefixes
367
+ .renamePlugins({
368
+ 'old-prefix': 'new-prefix',
369
+ // ...
370
+ });
371
+ // ...
372
+ ```
373
+
374
+ ### Vue
375
+
376
+ Vue support is detected automatically by checking if `vue` is installed in your project.
377
+
378
+ #### Vue 2
379
+
380
+ Vue 2 is not supported in this config.
381
+
382
+ #### Vue Accessibility
383
+
384
+ vue-accessibility is enabled by default when vue was detected in your project.
385
+
386
+ #### Formatters
387
+
388
+ Prettier formatter is enabled by default to format files that ESLint cannot handle yet (`.css`, `.html`, etc), but you can disable it for some format files. Powered by [`eslint-plugin-format`](https://github.com/antfu/eslint-plugin-format).
389
+
390
+ ```js
391
+ // eslint.config.js
392
+ import configure from '@svifty7/eslint-config';
393
+
394
+ export default configure({
395
+ formatters: {
396
+ /**
397
+ * Format Markdown files
398
+ * @default true
399
+ */
400
+ markdown: false,
401
+ },
402
+ });
403
+ ```
404
+
405
+ ### Optional Rules
406
+
407
+ This config also provides some optional plugins/rules for extended usage.
408
+
409
+ #### `command`
410
+
411
+ Powered by [`eslint-plugin-command`](https://github.com/antfu/eslint-plugin-command). It is not a typical rule for linting, but an on-demand micro-codemod tool that triggers by specific comments.
412
+
413
+ For a few triggers, for example:
414
+
415
+ - `/// to-function` - converts an arrow function to a normal function
416
+ - `/// to-arrow` - converts a normal function to an arrow function
417
+ - `/// to-for-each` - converts a for-in/for-of loop to `.forEach()`
418
+ - `/// to-for-of` - converts a `.forEach()` to a for-of loop
419
+ - `/// keep-sorted` - sorts an object/array/interface
420
+ - … etc. — refer to the [documentation](https://github.com/antfu/eslint-plugin-command#built-in-commands)
421
+
422
+ You can add the trigger comment one line above the code you want to transform, for example (note the triple slash):
423
+
424
+ <!-- eslint-skip -->
425
+
426
+ ```ts
427
+ /// to-function
428
+ const foo = (msg: string): void => {
429
+ console.log(msg)
430
+ }
431
+ ```
432
+
433
+ Will be transformed to this when you hit save with your editor or run `eslint --fix`:
434
+
435
+ ```ts
436
+ function foo(msg: string): void {
437
+ console.log(msg);
438
+ }
439
+ ```
440
+
441
+ The command comments are usually one-off and will be removed along with the transformation.
442
+
443
+ ### Type Aware Rules
444
+
445
+ You can optionally enable the [type aware rules](https://typescript-eslint.io/linting/typed-linting/) by passing the options object to the `typescript` config:
446
+
447
+ ```js
448
+ // eslint.config.js
449
+ import configure from '@svifty7/eslint-config';
450
+
451
+ export default configure({
452
+ typescript: {
453
+ tsconfigPath: 'tsconfig.json',
454
+ },
455
+ });
456
+ ```
457
+
458
+ ### Editor Specific Disables
459
+
460
+ Auto-fixing for the following rules are disabled when ESLint is running in a code editor:
461
+
462
+ - [`prefer-const`](https://eslint.org/docs/rules/prefer-const)
463
+ - [`test/no-only-tests`](https://github.com/levibuzolic/eslint-plugin-no-only-tests)
464
+ - [`unused-imports/no-unused-imports`](https://www.npmjs.com/package/eslint-plugin-unused-imports)
465
+
466
+ They are made non-fixable using the `disableRulesFix` utility from `eslint-flat-config-utils` (see [documentation](https://github.com/antfu/eslint-flat-config-utils#composerdisablerulesfix)).
467
+
468
+ This is to prevent unused imports from getting removed by the editor during refactoring to get a better developer experience. Those rules will be applied when you run ESLint in the terminal or [Lint Staged](#lint-staged). If you don't want this behavior, you can disable them:
469
+
470
+ ```js
471
+ // eslint.config.js
472
+ import configure from '@svifty7/eslint-config';
473
+
474
+ export default configure({
475
+ isInEditor: false,
476
+ });
477
+ ```
478
+
479
+ ### Lint Staged
480
+
481
+ If you want to apply lint and auto-fix before every commit, you can add the following to your `package.json`:
482
+
483
+ ```json
484
+ {
485
+ "simple-git-hooks": {
486
+ "pre-commit": "pnpm lint-staged"
487
+ },
488
+ "lint-staged": {
489
+ "*": "eslint --fix"
490
+ }
491
+ }
492
+ ```
493
+
494
+ and then
495
+
496
+ ```bash
497
+ pnpm add -D lint-staged simple-git-hooks
498
+
499
+ # to active the hooks
500
+ pnpx simple-git-hooks
501
+ ```
502
+
503
+ ## View what rules are enabled
504
+
505
+ [Anthony Fu](https://github.com/antfu) built a visual tool to help you view what rules are enabled in your project and apply them to what files, [@eslint/config-inspector](https://github.com/eslint/config-inspector)
506
+
507
+ Go to your project root that contains `eslint.config.js` and run:
508
+
509
+ ```bash
510
+ pnpx @eslint/config-inspector
511
+ ```
512
+
513
+ ## FAQ
514
+
515
+ ### I prefer XXX...
516
+
517
+ Sure, you can configure and override rules locally in your project to fit your needs. If that still does not work for you, you can always fork this repo and maintain your own.
518
+
519
+ ## License
520
+
521
+ [MIT](./LICENSE) License &copy; 2025-PRESENT [svifty7](https://github.com/svifty7)