@zayne-labs/eslint-config 0.4.3 → 0.5.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/README.md CHANGED
@@ -7,19 +7,27 @@
7
7
  - Optional [React](#react), [Svelte](#svelte), [TailwindCSS](#tailwindcss), [Astro](#astro), [Solid](#solid) support
8
8
  - Respects `.gitignore` by default
9
9
  - Requires ESLint v9.5.0+
10
- - Inspired by the legendary open sourcerer, [antfu](https://github.com/antfu)
10
+ - Inspired by the legendary open sourcerer, [antfu](https://github.com/antfu/eslint-config)
11
11
 
12
12
  ## Usage
13
13
 
14
- ### Manual Install
14
+ Hey there! 👋 Let's get you started with this ESLint config. Here's how to set it up:
15
15
 
16
- If you prefer to set up manually:
16
+ ### Installation
17
+
18
+ Just run one of these commands in your project:
17
19
 
18
20
  ```bash
19
21
  pnpm add -D eslint @zayne-labs/eslint-config
22
+
23
+ # Using npm
24
+ npm install -D eslint @zayne-labs/eslint-config
25
+
26
+ # Using yarn
27
+ yarn add -D eslint @zayne-labs/eslint-config
20
28
  ```
21
29
 
22
- And create `eslint.config.js` in your project root:
30
+ Then create an `eslint.config.js` in your project root:
23
31
 
24
32
  ```js
25
33
  // eslint.config.js
@@ -28,10 +36,10 @@ import { zayne } from '@zayne-labs/eslint-config'
28
36
  export default zayne()
29
37
  ```
30
38
 
39
+ That's it! You're ready to go. Want to do more? Check out the customization options below.
40
+
31
41
  <details>
32
- <summary>
33
- Combined with legacy config:
34
- </summary>
42
+ <summary>Combined with legacy config:</summary>
35
43
 
36
44
  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.
37
45
 
@@ -49,16 +57,15 @@ export default zayne(
49
57
 
50
58
  // Legacy config
51
59
  [
52
- ...compat.config({
53
- extends: [
54
- 'eslint:recommended',
55
- // Other extends...
56
- ],
57
- }),
58
-
59
- // Other flat configs...
60
+ ...compat.config({
61
+ extends: [
62
+ 'eslint:recommended',
63
+ // Other extends...
64
+ ],
65
+ }),
66
+
67
+ // Other flat configs...
60
68
  ]
61
-
62
69
  )
63
70
  ```
64
71
 
@@ -68,7 +75,7 @@ export default zayne(
68
75
 
69
76
  ### Add script for package.json
70
77
 
71
- For example:
78
+ Add these handy scripts to your `package.json`:
72
79
 
73
80
  ```json
74
81
  {
@@ -81,6 +88,8 @@ For example:
81
88
 
82
89
  ## IDE Support (auto fix on save)
83
90
 
91
+ Let's set up your editor to automatically fix ESLint issues when you save. Here's how:
92
+
84
93
  <details>
85
94
  <summary>🟦 VS Code support</summary>
86
95
 
@@ -186,7 +195,7 @@ lspconfig.eslint.setup({
186
195
  })
187
196
  ```
188
197
 
189
- - Use [conform.nvim](https://github.com/stevearc/conform.nvim).
198
+ - Use [conform.nvim](https://github.com/stevearc/conform.nvim)
190
199
  - Use [none-ls](https://github.com/nvimtools/none-ls.nvim)
191
200
  - Use [nvim-lint](https://github.com/mfussenegger/nvim-lint)
192
201
 
@@ -194,16 +203,7 @@ lspconfig.eslint.setup({
194
203
 
195
204
  ## Customization
196
205
 
197
- Normally you only need to import the `zayne` preset:
198
-
199
- ```js
200
- // eslint.config.js
201
- import { zayne } from '@zayne-labs/eslint-config'
202
-
203
- export default zayne()
204
- ```
205
-
206
- And that's it! Or you can configure each integration individually, for example:
206
+ The great thing about this config is that it works out of the box with zero config. But if you want to tweak things (and who doesn't?), here's how:
207
207
 
208
208
  ```js
209
209
  // eslint.config.js
@@ -213,15 +213,15 @@ export default zayne({
213
213
  // Enable stylistic formatting rules
214
214
  stylistic: true,
215
215
 
216
- // TypeScript and React are autodetected, you can also explicitly enable it:
216
+ // TypeScript and React are auto-detected, but you can be explicit:
217
217
  typescript: true,
218
- react: true
218
+ react: true,
219
219
 
220
- // Disable jsonc and yaml support
220
+ // Don't need JSON or YAML? Turn them off:
221
221
  jsonc: false,
222
222
  yaml: false,
223
223
 
224
- // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
224
+ // Since `.eslintignore` isn't supported in Flat config, use `ignores`:
225
225
  ignores: [
226
226
  'build/**',
227
227
  // ...globs
@@ -229,7 +229,7 @@ export default zayne({
229
229
  })
230
230
  ```
231
231
 
232
- The `zayne` factory function also accepts an array of arbitrary custom config overrides as the second argument:
232
+ Need more control? The `zayne` function takes a second argument for custom overrides:
233
233
 
234
234
  ```js
235
235
  // eslint.config.js
@@ -237,17 +237,23 @@ import { zayne } from '@zayne-labs/eslint-config'
237
237
 
238
238
  export default zayne(
239
239
  {
240
- // Configures for zayne labs' config
240
+ // Your base config
241
241
  },
242
242
 
243
- // The second arguments is an array of ESLint Configs
244
- [ {
245
- files: ['**/*.ts'],
246
- rules: {},
247
- },
248
- {
249
- rules: {},
250
- }],
243
+ // Custom ESLint configs
244
+ [
245
+ {
246
+ files: ['**/*.ts'],
247
+ rules: {
248
+ '@typescript-eslint/no-explicit-any': 'off',
249
+ },
250
+ },
251
+ {
252
+ rules: {
253
+ 'no-console': 'warn',
254
+ },
255
+ },
256
+ ],
251
257
  )
252
258
  ```
253
259
 
@@ -304,128 +310,13 @@ Check out the [configs](https://github.com/zayne-labs/eslint-config/blob/main/sr
304
310
 
305
311
  > Thanks to [antfu/eslint-config](https://github.com/antfu/eslint-config) for the inspiration and reference.
306
312
 
307
- ### Plugins Renaming
308
-
309
- Since flat config requires us to explicitly provide the plugin names (instead of the mandatory convention from npm package name), we renamed some plugins to make the overall scope more consistent and easier to write.
310
-
311
- | New Prefix | Original Prefix | Source Plugin |
312
- | ---------- | ---------------------- | ------------------------------------------------------------------------------------------ |
313
- | `import/*` | `import-x/*` | [eslint-plugin-import-x](https://github.com/un-es/eslint-plugin-import-x) |
314
- | `node/*` | `n/*` | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n) |
315
- | `yaml/*` | `yml/*` | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml) |
316
- | `ts-eslint/*` | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) |
317
- | `stylistic/*` | `@stylistic/*` | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic) |
318
-
319
- When you want to override rules, or disable them inline, you need to update to the new prefix:
320
-
321
- ```diff
322
- -// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
323
- +// eslint-disable-next-line ts-eslint/consistent-type-definitions
324
- type foo = { bar: 2 }
325
- ```
326
-
327
- <details>
328
- <summary>Change back to original prefix</summary>
329
-
330
- If you really want to use the original prefix, you can revert the plugin renaming by:
313
+ ### Framework Support
331
314
 
332
- ```ts
333
- import { zayne } from '@zayne-labs/eslint-config'
334
-
335
- export default zayne()
336
- .renamePlugins({
337
- "ts-eslint": '@typescript-eslint',
338
- // ...
339
- })
340
- ```
341
-
342
- </details>
343
-
344
- ### Rules Overrides
345
-
346
- Certain rules would only be enabled in specific files, for example, `ts-eslint/*` 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:
347
-
348
- ```js
349
- // eslint.config.js
350
- import { zayne } from '@zayne-labs/eslint-config'
351
-
352
- export default zayne(
353
- {
354
- react: true,
355
- typescript: true
356
- },
357
- {
358
- files: ['**/*.jsx','**/*.tsx' ],
359
- rules: {
360
- 'react/no-unstable-context-value': "off",
361
- },
362
- },
363
- {
364
- // Without `files`, they are general rules for all files
365
- rules: {
366
- 'stylistic/semi': ['error', 'never'],
367
- },
368
- }
369
- )
370
- ```
371
-
372
- We also provided the `overrides` options in each integration to make it easier:
373
-
374
- ```js
375
- // eslint.config.js
376
- import { zayne } from '@zayne-labs/eslint-config'
377
-
378
- export default zayne({
379
- react: {
380
- overrides: {
381
- 'react/no-unstable-context-value': "off",
382
- },
383
- },
384
- typescript: {
385
- overrides: {
386
- 'ts/consistent-type-definitions': ['error', 'interface'],
387
- },
388
- },
389
- yaml: {
390
- overrides: {
391
- // ...
392
- },
393
- },
394
- })
395
- ```
396
-
397
- ### Config Composer
398
-
399
- The factory function `zayne()` returns a [`FlatConfigComposer` object from `eslint-flat-config-utils`](https://github.com/zayne/eslint-flat-config-utils#composer) where you can chain the methods to compose the config even more flexibly.
400
-
401
- ```js
402
- // eslint.config.js
403
- import { zayne } from '@zayne-labs/eslint-config'
404
-
405
- export default zayne()
406
- .prepend(
407
- // some configs before the main config
408
- )
409
- // overrides any named configs
410
- .override(
411
- 'zayne/imports',
412
- {
413
- rules: {
414
- 'import/order': ['error', { 'newlines-between': 'always' }],
415
- }
416
- }
417
- )
418
- // rename plugin prefixes
419
- .renamePlugins({
420
- 'old-prefix': 'new-prefix',
421
- // ...
422
- })
423
- // ...
424
- ```
315
+ Need to lint your favorite framework? We've got you covered! Here's how to enable support for various frameworks:
425
316
 
426
317
  #### React
427
318
 
428
- React support is auto-detected from installed dependencies. You can also explicitly turn it on:
319
+ React support is usually auto-detected, but you can explicitly enable it:
429
320
 
430
321
  ```js
431
322
  // eslint.config.js
@@ -436,7 +327,7 @@ export default zayne({
436
327
  })
437
328
  ```
438
329
 
439
- Running `pnpm eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
330
+ When you run `pnpm eslint`, it'll let you know if you need to install any dependencies. But if you prefer to install them manually:
440
331
 
441
332
  ```bash
442
333
  pnpm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
@@ -499,7 +390,7 @@ Running `pnpm eslint` should prompt you to install the required dependencies, ot
499
390
  pnpm i -D eslint-plugin-solid
500
391
  ```
501
392
 
502
- #### tailwindcss
393
+ #### TailwindCSS
503
394
 
504
395
  To enable Tailwindcss support, you need to explicitly turn it on:
505
396
 
@@ -520,7 +411,7 @@ pnpm i -D eslint-plugin-tailwindcss
520
411
 
521
412
  ### Type Aware Rules
522
413
 
523
- You can optionally enable the [type aware rules](https://typescript-eslint.io/linting/typed-linting/) by passing the options object to the `typescript` config:
414
+ Working with TypeScript? You can enable type-aware linting by pointing to your `tsconfig.json`:
524
415
 
525
416
  ```js
526
417
  // eslint.config.js
@@ -535,10 +426,7 @@ export default zayne({
535
426
 
536
427
  ## View what rules are enabled
537
428
 
538
- Eslint config inspecctor is 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).
539
- It was built by the legendary [Anthony Fu](https://github.com/antfu).
540
-
541
- Go to your project root that contains `eslint.config.js` and run:
429
+ Want to see what rules are active in your project? There's a cool tool for that! Use the ESLint config inspector (created by [Anthony Fu](https://github.com/antfu)):
542
430
 
543
431
  ```bash
544
432
  pnpx @eslint/config-inspector@latest
@@ -546,23 +434,35 @@ pnpx @eslint/config-inspector@latest
546
434
 
547
435
  ## Versioning Policy
548
436
 
549
- This project follows [Semantic Versioning](https://semver.org/) for releases. However, since this is just a config and involves opinions and many moving parts, we don't treat rules changes as breaking changes.
437
+ We follow [Semantic Versioning](https://semver.org/), but with a twist since this is a config package. Here's what we consider breaking changes and what we don't:
550
438
 
551
- ### Changes Considered as Breaking Changes
439
+ ### Breaking Changes ⚠️
552
440
 
553
- - Node.js version requirement changes
554
- - Huge refactors that might break the config
555
- - Plugins made major changes that might break the config
556
- - Changes that might affect most of the codebases
441
+ - Node.js version changes
442
+ - Major refactors that could break your setup
443
+ - Big plugin updates that change behavior
444
+ - Changes affecting most codebases
557
445
 
558
- ### Changes Considered as Non-breaking Changes
446
+ ### Non-Breaking Changes 🌟
559
447
 
560
- - Enable/disable rules and plugins (that might become stricter)
561
- - Rules options changes
562
- - Version bumps of dependencies
448
+ - Enabling/disabling rules (even if they get stricter)
449
+ - Tweaking rule options
450
+ - Updating dependencies
563
451
 
564
452
  ## FAQ
565
453
 
566
- ### I prefer XXX
454
+ ### "I prefer X instead of Y..."
455
+
456
+ No worries! This config is just our take on things. Feel free to override rules locally to match your style. If that's not enough, you can always fork the repo and make it your own.
457
+
458
+ ## 🤝 Contributing
459
+
460
+ We welcome contributions! Please check out our [contribution guidelines](https://github.com/zayne-labs/contribute) for details on how to get started.
461
+
462
+ ## 📄 License
463
+
464
+ MIT © [Ryan Zayne]
465
+
466
+ ## 💖 Credits
567
467
 
568
- 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.
468
+ Inspired by the legendary open sourcerer, [antfu](https://github.com/antfu/eslint-config)