@anolilab/eslint-config 15.0.2 → 16.0.0

package/README.md

@@ -20,608 +20,527 @@
 
 ## Purpose
 
-Our package serves as a valuable resource for JavaScript/Typescript-based projects, offering composable [ESLint](https://eslint.org/) configurations. It encompasses a range of features, including performance optimization and the flexibility to extend pre-defined base configurations.
+Our package serves as a valuable resource for JavaScript/Typescript-based projects, offering composable [ESLint](https://eslint.org/) configurations. It encompasses a range of features, including performance optimization and the flexibility to extend pre-defined base configurations. We aim to provide a strong, opinionated foundation for code quality and consistency, while still allowing for customization to suit specific project needs.
 
--   Tailored Configuration for Workspaces: With this package, each workspace within your monorepo gains the ability to have its own customized ESLint configuration. This ensures that individual projects can maintain their specific requirements while still adhering to the overall guidelines.
+- Tailored Configuration for Workspaces: With this package, each workspace within your monorepo gains the ability to have its own customized ESLint configuration. This ensures that individual projects can maintain their specific requirements while still adhering to the overall guidelines.
+- Configurability at Your Fingertips: Crafting your workspace's ESLint configuration is a breeze, thanks to the seamless composition of pre-defined base configurations. This empowers you to tailor the settings to suit your project's unique needs, without starting from scratch.
 
--   Configurability at Your Fingertips: Crafting your workspace's ESLint configuration is a breeze, thanks to the seamless composition of pre-defined base configurations. This empowers you to tailor the settings to suit your project's unique needs, without starting from scratch.
+- Enhanced Efficiency: We've optimized the package's performance by intelligently enabling plugins based on file naming conventions and project dependencies. This streamlined approach ensures that your ESLint checks run efficiently, targeting the relevant files and maximizing productivity.
 
--   Streamlined Convenience: Say goodbye to the hassle of installing plugins for each workspace. Our package integrates [@rushstack/eslint-patch](https://www.npmjs.com/package/@rushstack/eslint-patch), eliminating the need for repetitive plugin installations. Enjoy peace of mind as you focus on your work, knowing that the necessary plugins are automatically included.
-
--   Enhanced Efficiency: We've optimized the package's performance by intelligently enabling plugins based on file naming conventions. This streamlined approach ensures that your ESLint checks run efficiently, targeting the relevant files and maximizing productivity.
+> [!NOTE]
+> Since v16.0.0, this config is rewritten to the new [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new).
+>
+> ESLint v9.5.0+ is now required.
 
-In summary, our package provides comprehensive and adaptable ESLint configurations for JavaScript and Typescript projects. It empowers you to achieve code quality while minimizing overhead and maximizing productivity throughout your workspaces.
+> [!WARNING]
+>
+> Please keep in mind that this is still **_a personal config_** with a lot of opinions. Changes might not always work for everyone and every use case.
+>
+> If you are using this config directly, I suggest you **review the changes every time you update**. Or if you want more control over the rules, always feel free to fork it. Thanks!
 
 ## Highlights
 
--   Zero-config, but configurable when needed.
--   Enforces readable code, because you read more code than you write.
--   No need to specify file paths to lint as it lints all JS/TS files except for commonly ignored paths.
--   Config overrides per files/globs.
--   TypeScript supported by default, if `typescript` was installed.
--   Includes many useful ESLint plugins, like [unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn), [import](https://github.com/benmosher/eslint-plugin-import) and [more](#plugins).
--   Automatically enables rules based on the [engines](https://docs.npmjs.com/files/package.json#engines) field in your package.json.
--   Specify indent and semicolon preferences easily without messing with the rule config.
--   Disables rules that conflict with [Prettier](#let-prettier-handle-style-related-rules).
--   Typesafe, because it's written in TypeScript and uses [eslint-define-config](https://github.com/Shinigami92/eslint-define-config) to define the config.
+- Zero-config for many common setups, but highly configurable when needed.
+- Enforces readable and consistent code, because you read more code than you write.
+- Lints a wide range of files, including JavaScript, TypeScript, JSON, YAML, Markdown, and more.
+- No need to specify file paths to lint as it intelligently lints relevant files, respecting `.gitignore` and common ignore patterns.
+- Config overrides per files/globs.
+- First-class TypeScript support, automatically enabled if `typescript` is detected in your project.
+- Includes a comprehensive set of ESLint plugins, like [unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn), [import](https://github.com/benmosher/eslint-plugin-import), [sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs), and [security](#security) plugins. (See more under [Plugins](#plugins)).
+- Automatically enables relevant rules based on the [engines](https://docs.npmjs.com/files/package.json#engines) field in your `package.json`.
+- Easily configure stylistic preferences like indent and semicolon without deep diving into rule configurations.
+- Works alongside Prettier: Our configuration disables ESLint rules that would conflict with Prettier, allowing ESLint to focus on code quality and Prettier on formatting if you choose to use both. However, many stylistic rules are included and can be enforced by ESLint directly.
 
 ## Install
 
 To install this config, run the following command.
 
-> Note: `eslint-plugin-import@npm:eslint-plugin-i` is needed to use the correct package.
-
 ```bash
-npm install --save-dev eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core @eslint-types/import @eslint-types/deprecation @eslint-types/jsdoc @eslint-types/typescript-eslint @eslint-types/unicorn
+npm install --save-dev eslint @anolilab/eslint-config
 ```
 
 ```sh
-pnpm add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core @eslint-types/import @eslint-types/deprecation @eslint-types/jsdoc @eslint-types/typescript-eslint @eslint-types/unicorn
+pnpm add -D eslint @anolilab/eslint-config
 ```
 
 ```sh
-yarn add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core @eslint-types/import @eslint-types/deprecation @eslint-types/jsdoc @eslint-types/typescript-eslint @eslint-types/unicorn
+yarn add -D eslint @anolilab/eslint-config
 ```
 
 ## Usage
 
-If you don’t have a `.eslintrc.js`, we will create the file for you after installing `@anolilab/eslint-config`.
+Our default export is designed to be used within ESLint's flat configuration system (e.g., `eslint.config.js`). It contains a comprehensive set of ESLint rules, suitable for modern ECMAScript (ES2021+ by default) and TypeScript projects.
 
-If you already have a `.eslintrc.js`, then you can extend the `.eslintrc.js`, with `@anolilab/eslint-config`.
+To use it, import the `createConfig` function from `@anolilab/eslint-config` into your `eslint.config.js` (or `eslint.config.mjs`). This function allows you to generate the configuration, optionally with your own settings.
 
-> Note: If the script detects an existing `.eslintrc.js` file, it will not overwrite it.
-
-> Note: It can happen that the postinstall script don't run, then you have to add the `.eslintrc.js` manually, or you will use bin command `./node_modules/bin/anolilab-eslint-config` to generate it.
-
-> Note: Our default export contains all of our ESLint rules, including ECMAScript 6+. `@anolilab/eslint-config` use the `ecmaVersion`:`2021` as default.
->
-> To change this configuration, change `env: { es2021: false, then active you needed env }` same for, `parserOptions: { "ecmaVersion": 2021 change the version }`
+Create `eslint.config.mjs` in your project root:
 
 ```js
-/** @ts-check */
-const { defineConfig } = require('@anolilab/eslint-config/define-config');
-
-/// <reference types="@eslint-types/unicorn" />
-/// <reference types="@eslint-types/typescript-eslint" />
-/// <reference types="@eslint-types/jsdoc" />
-/// <reference types="@eslint-types/import" />
-/// <reference types="@eslint-types/deprecation" />
-
-module.exports = defineConfig({
-    env: {
-        // Your environments (which contains several predefined global variables)
-        //
-        // browser: true,
-        // node: true,
-        // mocha: true,
-        // jest: true,
-        // jquery: true
-    },
-    extends: ["@anolilab/eslint-config"],
-    globals: {
-        // Your global variables (setting to false means it's not allowed to be reassigned)
-        //
-        // myGlobal: false
-    },
-    root: true,
-    rules: {
-        // Customize your rules
-    },
-});
-```
-
-For more advanced use cases see the example configurations for Node, TypeScript, React or Prettier.
-
-> Note: `@anolilab/eslint-config` will handle the configuration for almost all eslint-plugins / eslint-configs automatically.
-> With this you only need to install the needed plugins/configs for TypeScript or React and you done.
+// eslint.config.mjs
 
-### TypeScript
+import { createConfig } from "@anolilab/eslint-config";
 
-```bash
-npm install --save-dev typescript
+export default createConfig();
 ```
 
-Please extend the `.eslintrc.js` file with the correct `tsconfig.js` path if you have a custom path.
-
-```js
-module.exports = {
-    parserOptions: {
-        project: "./tsconfig.eslint.json",
-    },
-};
-```
+<details>
+<summary>
+Combined with legacy config:
+</summary>
 
-For projects that use TypeScript and want additional rules that require type information (rules using type information take longer to run).
-
-Extend the `.eslintrc.js` file:
+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.
 
 ```js
-/** @ts-check */
-const { defineConfig } = require('@anolilab/eslint-config/define-config');
-
-/// <reference types="@eslint-types/unicorn" />
-/// <reference types="@eslint-types/typescript-eslint" />
-/// <reference types="@eslint-types/jsdoc" />
-/// <reference types="@eslint-types/import" />
-/// <reference types="@eslint-types/deprecation" />
-
-module.exports = defineConfig({
-    env: {
-        // Your environments (which contains several predefined global variables)
-        //
-        // browser: true,
-        // node: true,
-        // mocha: true,
-        // jest: true,
-        // jquery: true
-    },
-    extends: ["@anolilab/eslint-config", "@anolilab/eslint-config/typescript-type-checking"],
-    globals: {
-        // Your global variables (setting to false means it's not allowed to be reassigned)
-        //
-        // myGlobal: false
-    },
-    root: true,
-    rules: {
-        // Customize your rules
-    },
-});
-```
-
-> Tip: Run eslint with the TIMING=1 to identify slow rules.
->
-> `TIMING=1 eslint . --ext .ts,.tsx`
->
-> This is useful to identify rules that are slow because they require type information.
-
-### React
+// eslint.config.mjs
+import { createConfig } from "@anolilab/eslint-config";
+import { FlatCompat } from "@eslint/eslintrc";
 
-You need to have "react" and "react-dom" installed.
+const compat = new FlatCompat();
 
-```bash
-npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks
-
-yarn add -D eslint-plugin-react eslint-plugin-react-hooks
-
-pnpm add -D eslint-plugin-react eslint-plugin-react-hooks
-```
-
-Or for the use of `TypeScript` in react install "typescript" as a dev dependency.
-
-Please extend the `.eslintrc.js` file with the correct `tsconfig.js` path if you have a custom path.
-
-```js
-module.exports = {
-    parserOptions: {
-        project: "./tsconfig.eslint.json",
+export default createConfig(
+    {
+        ignores: [],
     },
-};
-```
 
-Or for the use of `.jsx` files install "@babel/plugin-syntax-jsx" as a dev dependency.
+    // Legacy config
+    ...compat.config({
+        extends: [
+            "eslint:recommended",
+            // Other extends...
+        ],
+    })
 
-```bash
-npm install --save-dev babel @babel/plugin-syntax-jsx
-
-yarn add -D babel @babel/plugin-syntax-jsx
-
-pnpm add -D babel @babel/plugin-syntax-jsx
-```
-
-In your `babel.config.js` file add the plugin.
-
-```js
-const babelPluginSyntaxJSX = require("@babel/plugin-syntax-jsx");
-
-module.exports = {
-  plugins: [
-    [
-      babelPluginSyntaxJSX,
-      {
-        pragma: "React.createElement",
-        pragmaFrag: "React.Fragment",
-      },
-    ],
-  ],
-};
+    // Other flat configs...
+);
 ```
 
-### MDX
+> Note that `.eslintignore` no longer works in Flat config.
 
-```bash
-npm install --save-dev eslint eslint-plugin-mdx
-```
+</details>
 
-For more information about `missing` or `optional` to install rules see the `eslint` console output.
+Or you can configure each integration individually, for example:
 
-### Config
+```js
+// eslint.config.js
+import { createConfig } from "@anolilab/eslint-config";
 
-You can configure `@anolilab/eslint-config` options with your `package.json` file.
+export default createConfig({
+    // Enable stylistic formatting rules
+    // stylistic: true,
 
-Add this property to your package.json:
+    // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
+    ignores: [
+        "**/fixtures",
+    // ...globs
+    ],
 
-```json5
-{
-    anolilab: {
-        "eslint-config": {
-            // options
-        },
+    // Disable jsonc and yaml support
+    jsonc: false,
+    // Or customize the stylistic rules
+    stylistic: {
+        indent: 2, // 4, or 'tab'
+        quotes: "single", // or 'double'
     },
-}
-```
-
-#### indent
-
-Type: `number`
-
-Default: `4`
 
-It will throw an error if the value is not numeric.
+    // TypeScript and Vue are autodetected, you can also explicitly enable them:
+    typescript: true,
+    vue: true,
 
-#### plugin
-
-Type: `object` -> key: `string` value: `boolean`
-
-Disable a plugin in your package.json config to turn it off globally in your project.
-
-Example using package.json:
-
-```json
-{
-    "anolilab": {
-        "eslint-config": {
-            "plugin": {
-                "unicorn": false
-            }
-        }
-    }
-}
+    yaml: false
+});
 ```
 
-#### warn_on_unsupported_typescript_version
-
-Type: `boolean`
+### Add script for package.json
 
-Default: `undefined`
-
-To disable the warning, set the value to `false`.
+For example:
 
 ```json
 {
-    "anolilab": {
-        "eslint-config": {
-            "warn_on_unsupported_typescript_version": false
-        }
+    "scripts": {
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix"
     }
 }
 ```
 
-#### info_on_disabling_jsx_react_rule
-
-Type: `boolean`
+The factory function also accepts any number of arbitrary custom config overrides:
 
-Default: `undefined`
+```js
+// eslint.config.js
+import { createConfig } from "@anolilab/eslint-config";
 
-To disable the info, set the value to `false`.
+export default createConfig(
+    {
+    // Configures for anolilab's config
+    },
 
-```json
-{
-    "anolilab": {
-        "eslint-config": {
-            "info_on_disabling_jsx_react_rule": false
-        }
-    }
-}
+    // From the second arguments they are ESLint Flat Configs
+    // you can have multiple configs
+    {
+        files: ["**/*.ts"],
+        rules: {},
+    },
+    {
+        rules: {},
+    },
+);
 ```
 
-#### info_on_disabling_prettier_conflict_rule
-
-Type: `boolean`
-
-Default: `undefined`
+We also provided the `overrides` options in each integration to make it easier:
 
-To disable the info, set the value to `false`.
+```js
+// eslint.config.js
+import { createConfig } from "@anolilab/eslint-config";
 
-```json
-{
-    "anolilab": {
-        "eslint-config": {
-            "info_on_disabling_prettier_conflict_rule": false
-        }
-    }
-}
+export default createConfig({
+    typescript: {
+        overrides: {
+            "ts/consistent-type-definitions": ["error", "interface"],
+        },
+    },
+    yaml: {
+        overrides: {
+            // ...
+        },
+    },
+});
 ```
 
-#### info_on_disabling_jsonc_sort_keys_rule
-
-Type: `boolean`
-
-Default: `undefined`
-
-To disable the info, set the value to `false`.
-
-```json
-{
-    "anolilab": {
-        "eslint-config": {
-            "info_on_disabling_jsonc_sort_keys_rule": false
-        }
-    }
-}
-```
+## IDE Support (auto fix on save)
 
-#### info_on_disabling_etc_no_deprecated
+<details>
+<summary>🟦 VS Code support</summary>
 
-Type: `boolean`
+<br>
 
-Default: `undefined`
+Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
-To disable the info, set the value to `false`.
+Add the following settings to your `.vscode/settings.json`:
 
-```json
+```jsonc
 {
-    "anolilab": {
-        "eslint-config": {
-            "info_on_disabling_etc_no_deprecated": false
-        }
-    }
-}
-```
-
-#### info_on_testing_library_framework
+    // Disable the default formatter, use eslint instead
+    "prettier.enable": false,
+    "editor.formatOnSave": false,
 
-Type: `boolean`
-
-Default: `undefined`
+    // Auto fix
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit",
+        "source.organizeImports": "never"
+    },
 
-To disable the info, set the value to `false`.
+    // Silent the stylistic rules in you IDE, but still auto fix them
+    "eslint.rules.customizations": [
+        { "rule": "style/*", "severity": "off", "fixable": true },
+        { "rule": "format/*", "severity": "off", "fixable": true },
+        { "rule": "*-indent", "severity": "off", "fixable": true },
+        { "rule": "*-spacing", "severity": "off", "fixable": true },
+        { "rule": "*-spaces", "severity": "off", "fixable": true },
+        { "rule": "*-order", "severity": "off", "fixable": true },
+        { "rule": "*-dangle", "severity": "off", "fixable": true },
+        { "rule": "*-newline", "severity": "off", "fixable": true },
+        { "rule": "*quotes", "severity": "off", "fixable": true },
+        { "rule": "*semi", "severity": "off", "fixable": true }
+    ],
 
-```json
-{
-    "anolilab": {
-        "eslint-config": {
-            "info_on_testing_library_framework": false
-        }
-    }
+    // Enable eslint for all supported languages
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact",
+        "vue",
+        "html",
+        "markdown",
+        "json",
+        "jsonc",
+        "yaml",
+        "toml",
+        "xml",
+        "gql",
+        "graphql",
+        "astro",
+        "svelte",
+        "css",
+        "less",
+        "scss",
+        "pcss",
+        "postcss"
+    ]
 }
 ```
 
-#### info_on_found_react_version
+</details>
 
-Type: `boolean`
+<details>
+<summary>🟩 Neovim Support</summary>
 
-Default: `undefined`
+<br>
 
-To disable the info, set the value to `false`.
+Update your configuration to use the following:
 
-```json
-{
-    "anolilab": {
-        "eslint-config": {
-            "info_on_found_react_version": false
-        }
-    }
+```lua
+local customizations = {
+  { rule = 'style/*', severity = 'off', fixable = true },
+  { rule = 'format/*', severity = 'off', fixable = true },
+  { rule = '*-indent', severity = 'off', fixable = true },
+  { rule = '*-spacing', severity = 'off', fixable = true },
+  { rule = '*-spaces', severity = 'off', fixable = true },
+  { rule = '*-order', severity = 'off', fixable = true },
+  { rule = '*-dangle', severity = 'off', fixable = true },
+  { rule = '*-newline', severity = 'off', fixable = true },
+  { rule = '*quotes', severity = 'off', fixable = true },
+  { rule = '*semi', severity = 'off', fixable = true },
 }
-```
 
-#### import_ignore_exports
+local lspconfig = require('lspconfig')
+-- Enable eslint for all supported languages
+lspconfig.eslint.setup(
+  {
+    filetypes = {
+      "javascript",
+      "javascriptreact",
+      "javascript.jsx",
+      "typescript",
+      "typescriptreact",
+      "typescript.tsx",
+      "vue",
+      "html",
+      "markdown",
+      "json",
+      "jsonc",
+      "yaml",
+      "toml",
+      "xml",
+      "gql",
+      "graphql",
+      "astro",
+      "svelte",
+      "css",
+      "less",
+      "scss",
+      "pcss",
+      "postcss"
+    },
+    settings = {
+      -- Silent the stylistic rules in you IDE, but still auto fix them
+      rulesCustomizations = customizations,
+    },
+  }
+)
+```
 
-Type: `string[]`
+### Neovim format on save
 
-Default: `[]`
+There's few ways you can achieve format on save in neovim:
 
-An array with files/paths for which unused exports will not be reported (e.g module entry points in a published package).
+- `nvim-lspconfig` has a `EslintFixAll` command predefined, you can create a autocmd to call this command after saving file.
 
-```json
-{
-    "anolilab": {
-        "eslint-config": {
-            "import_ignore_exports": []
-        }
-    }
-}
+```lua
+lspconfig.eslint.setup({
+  --- ...
+  on_attach = function(client, bufnr)
+    vim.api.nvim_create_autocmd("BufWritePre", {
+      buffer = bufnr,
+      command = "EslintFixAll",
+    })
+  end,
+})
 ```
 
-### Let [Prettier](https://prettier.io/) handle style-related rules
+- Use [conform.nvim](https://github.com/stevearc/conform.nvim).
+- Use [none-ls](https://github.com/nvimtools/none-ls.nvim)
+- Use [nvim-lint](https://github.com/mfussenegger/nvim-lint)
 
-Prettier is a code formatting tool that offers fewer options but is more professional than the style-related rules in ESLint.
+</details>
 
-Now that Prettier has become a necessary tool in front end projects, `@anolilab/eslint-config` does not need to maintain the style-related rules in ESLint anymore,
-so we completely removed all Prettier related rules, if `prettier` is found in your `package.json` and use ESLint to check logical errors which it’s good at.
+## Plugins
 
-As for whether two spaces or four spaces are used for indentation and whether there is a semicolon at the end, you can configure it in the project’s `.prettierrc.js`.
-Of course, we also provide a recommended Prettier [configuration](../prettier-config/README.md) for your reference.
+Our configuration integrates a wide array of ESLint plugins to cover various aspects of code quality, language support, security, and specific libraries/frameworks. Many of these are enabled automatically when relevant dependencies are detected in your project.
 
-`@anolilab/eslint-config` does disable all included style-related rules, so there is no need to install [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier).
+### Core & Code Quality
 
-## Using experimental features with JavaScript
+These plugins form the backbone of our linting rules, focusing on best practices, consistency, and potential errors.
 
-If you are using experimental features such as class fields with JavaScript files you should install `@babel/eslint-parser`.
+-   **[@eslint/js](https://www.npmjs.com/package/@eslint/js)**: Core ESLint rules.
+-   **[eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn)**: Various awesome ESLint rules.
+-   **[eslint-plugin-sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs)**: Rules to detect bugs and code smells.
+-   **[eslint-plugin-promise](https://github.com/eslint-community/eslint-plugin-promise)**: Enforce best practices for JavaScript promises.
+-   **[eslint-plugin-es-x](https://github.com/eslint-community/eslint-plugin-es-x)** (formerly `eslint-plugin-es`): Prevent ES6+ syntax from being used in ES5 environments.
+-   **[eslint-plugin-antfu](https://github.com/antfu/eslint-config)**: Opinionated linting rules by Anthony Fu.
+-   **[eslint-plugin-perfectionist](https://github.com/azat-io/eslint-plugin-perfectionist)**: Rules for sorting and ordering various data structures.
+-   **[eslint-plugin-no-for-of-array](https://github.com/smelukov/eslint-plugin-no-for-of-array)**: Disallow `for...of` loops on arrays (promoting array methods).
+-   **[eslint-plugin-unused-imports](https://github.com/sweepline/eslint-plugin-unused-imports)**: Find and remove unused ES6 imports.
 
-```bash
-npm install --save-dev @babel/core
-```
+### Stylistic & Formatting
 
-## Plugins
+These plugins help maintain a consistent code style. Note that while these are included, you can also use Prettier for formatting, and our config is designed to be compatible.
 
-### Code Quality
+-   **[@stylistic/eslint-plugin](https://eslint.style/packages/default)** (and `@stylistic/eslint-plugin-ts`): ESLint Stylistic, for all stylistic rules.
+-   **[eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort)**: Easy import sorting.
+-   **[eslint-plugin-format](https://github.com/antfu/eslint-plugin-format)**: Enables formatting of various file types using Prettier or other formatters via ESLint.
 
-This plugin provide a range of code quality rules:
+### Language Support & Syntax
 
--   [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn)
--   [eslint-plugin-antfu](https://github.com/antfu/eslint-config)
+Plugins for specific languages or syntaxes beyond standard JavaScript/TypeScript.
 
-### Languages
+-   **[@typescript-eslint/eslint-plugin](https://typescript-eslint.io/)**: The tooling that enables ESLint to lint TypeScript code.
+-   **[eslint-plugin-jsonc](https://github.com/ota-meshi/eslint-plugin-jsonc)**: ESLint plugin for JSON, JSONC, and JSON5 files.
+-   **[eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml)**: ESLint plugin for YAML files.
+-   **[eslint-plugin-toml](https://github.com/ota-meshi/eslint-plugin-toml)**: ESLint plugin for TOML files.
+-   **[eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html)**: An ESLint plugin to extract and lint script tags from HTML files.
+-   **[@html-eslint/eslint-plugin](https://html-eslint.org/)**: Alternative ESLint plugin for HTML files.
+-   **[@eslint/markdown](https://www.npmjs.com/package/@eslint/markdown)**: Lint JavaScript code blocks in Markdown documents.
+-   **[eslint-plugin-astro](https://github.com/ota-meshi/eslint-plugin-astro)**: ESLint plugin for Astro components.
 
-The following plugins expand esLint to work with json files, and lint JavaScript contained in HTML, and MarkDown:
+### Import & Module System
 
--   [eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html)
--   [eslint-plugin-jsonc](https://github.com/ota-meshi/eslint-plugin-jsonc)
--   [eslint-plugin-markdown](https://github.com/eslint/eslint-plugin-markdown)
--   [eslint-plugin-mdx](https://github.com/mdx-js/eslint-mdx)
--   [eslint-plugin-toml](https://github.com/ota-meshi/eslint-plugin-toml)
--   [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml)
+Managing imports and module structure.
 
-When linting code snippets in Markdown files, a few [rules](src/config/plugins/markdown.ts#L3) relating to globals and unused vars are disabled.
+-   **[eslint-plugin-import-x](https://github.com/un-es/eslint-plugin-import-x)** (formerly `eslint-plugin-import`): Linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
+    *   Uses `eslint-import-resolver-node` and `eslint-import-resolver-typescript`.
+-   **[eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n)** (formerly `eslint-plugin-node`): Additional ESLint rules for Node.js.
 
-### Library Plugins
+### Security
 
-If a supported library is part of your project then it’s related esLint plugins will be loaded. The following plugins are supported:
+Plugins focused on identifying potential security vulnerabilities.
 
--   [eslint-plugin-fsa](https://github.com/joseph-galindo/eslint-plugin-fsa)
--   [eslint-plugin-lodash](https://github.com/wix/eslint-plugin-lodash)
-    -   You need to install `eslint-plugin-lodash` and `lodash` to use this plugin.
--   [eslint-plugin-lodash-fp](https://github.com/jfmengels/eslint-plugin-lodash-fp)
-    -   You need to install `eslint-plugin-lodash-fp` and `lodash` to use this plugin.
--   [eslint-plugin-react-redux](https://github.com/DianaSuvorova/eslint-plugin-react-redux#readme)
-    -   You need to install `eslint-plugin-react-redux` and `react-redux` to use this plugin.
--   [eslint-plugin-redux-saga](https://github.com/pke/eslint-plugin-redux-saga)
-    -   You need to install `eslint-plugin-redux-saga` and `redux-saga` to use this plugin.
+-   **[eslint-plugin-security](https://github.com/eslint-community/eslint-plugin-security)**: ESLint rules for Node Security.
+-   **[eslint-plugin-no-secrets](https://github.com/nickdeis/eslint-plugin-no-secrets)**: An ESLint plugin that detects potential secrets/credentials.
+-   **[eslint-plugin-no-unsanitized](https://github.com/mozilla/eslint-plugin-no-unsanitized)**: ESLint plugin for security related rules regarding untrusted input.
 
-### Practices
+### Testing
 
-The following esLint plugins enforce good coding practices:
+Plugins for various testing frameworks and practices.
 
--   [eslint-plugin-array-func](https://github.com/freaktechnik/eslint-plugin-array-func)
--   [eslint-plugin-eslint-comments](https://github.com/mysticatea/eslint-plugin-eslint-comments)
--   [eslint-plugin-promise](https://github.com/xjamundx/eslint-plugin-promise)
--   [eslint-plugin-no-loops](https://github.com/buildo/eslint-plugin-no-loops)
--   [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort)
--   [eslint-plugin-es-x](https://github.com/eslint-community/eslint-plugin-es-x)
+-   **[eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests)**: Disallow `.only` calls in test files.
+-   **[eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library)**: ESLint plugin for Testing Library.
+-   **[eslint-plugin-playwright](https://github.com/playwright-community/eslint-plugin-playwright)**: ESLint plugin for Playwright.
 
-### Security
+### Frameworks & Libraries
 
-These plugins add code security rules to esLint:
-
--   [eslint-plugin-no-secrets](https://github.com/nickdeis/eslint-plugin-no-secrets)
--   [eslint-plugin-no-unsanitized](https://github.com/mozilla/eslint-plugin-no-unsanitized)
--   [eslint-plugin-sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs)
--   [eslint-plugin-security](https://github.com/eslint-community/eslint-plugin-security)
--   [rushstack/eslint-plugin-security](https://www.npmjs.com/package/@rushstack/eslint-plugin-security)
-
-### Test Libraries
-
-The following test plugins are supported:
-
--   [eslint-plugin-ava](https://github.com/avajs/eslint-plugin-ava)
-    -   You need to install `eslint-plugin-ava` and `ava` to use this plugin.
--   [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest)
-    -   You need to install `eslint-plugin-jest` and `jest` to use this plugin.
--   [eslint-plugin-jest-async](https://www.npmjs.com/package/eslint-plugin-jest-async)
-    -   You need to install `eslint-plugin-jest-async` and `jest` to use this plugin.
--   [eslint-plugin-cypress](https://github.com/cypress-io/eslint-plugin-cypress)
-    -   You need to install `eslint-plugin-cypress` and `cypress` to use this plugin.
-
-### List of used plugins
-
--   eslint-plugin-security
--   @rushstack/eslint-plugin-security
--   @typescript-eslint/eslint-plugin
--   eslint-plugin-antfu
--   eslint-plugin-compat
--   eslint-plugin-es-x
--   eslint-plugin-eslint-comments
--   eslint-plugin-html
--   eslint-plugin-i
--   eslint-plugin-jsonc
--   eslint-plugin-markdown
--   eslint-plugin-mdx
--   eslint-plugin-no-loops
--   eslint-plugin-no-only-tests
--   eslint-plugin-no-secrets
--   eslint-plugin-no-use-extend-native
--   eslint-plugin-promise
--   eslint-plugin-regexp
--   eslint-plugin-simple-import-sort
--   eslint-plugin-sonarjs
--   eslint-plugin-toml
--   eslint-plugin-typescript-sort-keys
--   eslint-plugin-unicorn
--   eslint-plugin-yml
-
-## Troubleshooting
-
-### With VSCode
-
-ESLint will not lint `.vue`, `.ts` or `.tsx` files in VSCode by default, you need to set your `.vscode/settings.json` like this:
+Support for specific UI frameworks, libraries, and tools.
 
-```json
-{
-    "eslint.validate": ["css", "html", "javascript", "javascriptreact", "json", "markdown", "typescript", "typescriptreact", "yaml"]
-}
-```
+-   **[@eslint-react/eslint-plugin](https://github.com/AriPerkkio/eslint-react)**: A comprehensive ESLint plugin for React.
+-   **[eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)**: ESLint rules for React Hooks.
+-   **[eslint-plugin-react-refresh](https://www.npmjs.com/package/eslint-plugin-react-refresh)**: Enforces best practices for React Fast Refresh.
+-   **[eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)**: Static AST checker for accessibility rules on JSX elements.
+-   **[eslint-plugin-validate-jsx-nesting](https://github.com/TitTat/eslint-plugin-validate-jsx-nesting)**: Validate JSX element nesting.
+-   **[eslint-plugin-tailwindcss](https://github.com/francoismassart/eslint-plugin-tailwindcss)**: ESLint plugin for Tailwind CSS.
+-   **[eslint-plugin-storybook](https://github.com/storybookjs/eslint-plugin-storybook)**: Best practice rules for Storybook.
+-   **[@tanstack/eslint-plugin-query](https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query)**: ESLint rules for TanStack Query.
+-   **[@tanstack/eslint-plugin-router](https://tanstack.com/router/latest/docs/eslint/eslint-plugin-router)**: ESLint rules for TanStack Router.
+-   **[@unocss/eslint-plugin](https://github.com/unocss/unocss/tree/main/packages/eslint-plugin)**: ESLint plugin for UnoCSS.
+-   **[eslint-plugin-zod](https://github.com/IsaacScript/eslint-plugin-zod)**: ESLint rules for Zod schemas.
+-   **[eslint-plugin-you-dont-need-lodash-underscore](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore)**: Encourages use of native JavaScript methods over Lodash/Underscore.
 
-#### Autofix ESLint errors on save
+### Documentation & Comments
 
-If you want to enable auto-fix-on-save, you need to set your `.vscode/settings.json` like this:
+-   **[@eslint-community/eslint-plugin-eslint-comments](https://github.com/eslint-community/eslint-plugin-eslint-comments)** (formerly `eslint-plugin-eslint-comments`): Additional ESLint rules for ESLint directive comments (`/*eslint-...*/`).
+-   **[eslint-plugin-jsdoc](https://github.com/gajus/eslint-plugin-jsdoc)**: JSDoc specific linting rules.
+-   **[eslint-plugin-tsdoc](https://github.com/microsoft/tsdoc/tree/main/eslint-plugin)**: TSDoc specific linting rules.
 
-```json
-{
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
-    },
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.formatOnSave": true
-}
-```
+### Compatibility & Others
+
+-   **[eslint-plugin-compat](https://github.com/amilajack/eslint-plugin-compat)**: Lint the browser compatibility of your code.
+-   **[eslint-config-flat-gitignore](https://github.com/antfu/eslint-config-flat-gitignore)**: Utility to use .gitignore in flat config.
+-   **[eslint-flat-config-utils](https://github.com/antfu/eslint-flat-config-utils)**: Utilities for working with ESLint flat config.
+-   **[eslint-merge-processors](https://github.com/eslint/eslint-merge-processors)**: Utility to merge ESLint processors.
+-   **[@eslint/compat](https://www.npmjs.com/package/@eslint/compat)**: Utilities for compatibility between ESLint flat config and eslintrc.
 
-Additionally, we found it that being explicit about which formatter you are using for each file improves DX:
+---
 
+### List of Used Plugins (Condensed)
+
+This list is a more condensed version and might not be exhaustive if some plugins are very specific or utility-based. It aims to provide a quick overview of the primary active linting plugins.
+
+-   `@eslint/js`
+-   `@stylistic/eslint-plugin`
+-   `@typescript-eslint/eslint-plugin`
+-   `@eslint-community/eslint-plugin-eslint-comments`
+-   `@eslint-react/eslint-plugin`
+-   `@tanstack/eslint-plugin-query`
+-   `@tanstack/eslint-plugin-router`
+-   `@unocss/eslint-plugin`
+-   `eslint-plugin-antfu`
+-   `eslint-plugin-astro`
+-   `eslint-plugin-compat`
+-   `eslint-plugin-es-x`
+-   `eslint-plugin-format`
+-   `eslint-plugin-html` (or `@html-eslint/eslint-plugin`)
+-   `eslint-plugin-import-x`
+-   `eslint-plugin-jsdoc`
+-   `eslint-plugin-jsonc`
+-   `eslint-plugin-jsx-a11y`
+-   `eslint-plugin-n`
+-   `eslint-plugin-no-only-tests`
+-   `eslint-plugin-no-secrets`
+-   `eslint-plugin-no-unsanitized`
+-   `eslint-plugin-perfectionist`
+-   `eslint-plugin-playwright`
+-   `eslint-plugin-promise`
+-   `eslint-plugin-react-hooks`
+-   `eslint-plugin-regexp` (often a dependency of other plugins like SonarJS)
+-   `eslint-plugin-security`
+-   `eslint-plugin-simple-import-sort`
+-   `eslint-plugin-sonarjs`
+-   `eslint-plugin-storybook`
+-   `eslint-plugin-tailwindcss`
+-   `eslint-plugin-testing-library`
+-   `eslint-plugin-toml`
+-   `eslint-plugin-tsdoc`
+-   `eslint-plugin-unicorn`
+-   `eslint-plugin-unused-imports`
+-   `eslint-plugin-yml`
+-   `eslint-plugin-zod`
+-   `eslint-plugin-you-dont-need-lodash-underscore`
+
+## Our Stance on Formatting
+
+This ESLint configuration includes stylistic rules that can format your JavaScript and TypeScript code, promoting consistency.
+
+- **ESLint as the Primary Tool:** For JS/TS files, we encourage using ESLint for both linting code quality and enforcing code style. The VSCode settings above are configured to use ESLint as the default formatter for these files.
+- **Working with Prettier:** If you use Prettier in your project, this config is designed to be compatible. It disables ESLint rules that would conflict with Prettier's formatting decisions. You can let Prettier handle formatting for files ESLint doesn't cover (like CSS, HTML, etc.), or even use Prettier for JS/TS formatting and then have ESLint apply further fixes. However, for a streamlined experience with JS/TS, letting ESLint handle all aspects (quality and style) is often simpler.
+
+## Lint Staged / Pre-commit Hooks
+
+To ensure code is linted and fixed before committing, we recommend integrating with a pre-commit tool like `lint-staged` and `husky`. Our sister package, `@anolilab/lint-staged-config`, is designed to work seamlessly with this ESLint configuration.
+
+Example `lint-staged` configuration in your `package.json` (or relevant file):
 ```json
+// package.json
 {
-    "[css]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[html]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[javascript]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[javascriptreact]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[json]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[markdown]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[typescript]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[typescriptreact]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[yaml]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "lint-staged": {
+        "*.{js,jsx,ts,tsx}": "eslint --fix"
+    // Add other linters for other file types if needed
     }
 }
 ```
+Ensure `husky` is set up to run `lint-staged` on pre-commit.
 
-While not required if you've configured explicit formatter for each file type, I advise that you explicitly disable prettier extension in your project:
+## Versioning Policy
 
-```json
-{
-    "prettier.enable": false
-}
-```
+This project aims to follow Semantic Versioning.
+
+- **Major versions:** May include breaking changes to ESLint configurations, Node.js version support, or significant plugin changes.
+- **Minor versions:** May introduce new non-breaking rules, enable new plugins by default (if non-breaking), or update existing rules with new options.
+- **Patch versions:** Typically include bug fixes or minor tweaks to rule configurations.
 
-Sharing these settings in your project should be sufficient to prevent local settings accidentally overriding the desired formatter behavior.
+Changes to rule strictness (e.g., changing a 'warn' to an 'error') might occur in minor versions if they reflect evolving best practices. We recommend reviewing changes when updating.
 
 ## Q & A
 
 ### Why not standard
 
-The standard specification believes that everyone should not waste time in personalized specifications, but the entire community should unify a specification. This statement makes sense, but it runs against the ESLint’s design philosophy.
-Don’t you remember how ESLint defeated JSHint and became the most popular JS code inspection tool? It’s because of the plugin and configuration that ESLint advocates, which meets the individual needs of different technology stacks of different teams.
+The standard specification believes that everyone should not waste time in personalized specifications, but the entire community should unify a specification. This statement makes sense, but it runs against the ESLint's design philosophy.
+Don't you remember how ESLint defeated JSHint and became the most popular JS code inspection tool? It's because of the plugin and configuration that ESLint advocates, which meets the individual needs of different technology stacks of different teams.
 
 Therefore, `@anolilab/eslint-config` also inherits the philosophy of ESLint. It will not force you to use our config.
 
 ## Supported Node.js Versions
 
 Libraries in this ecosystem make the best effort to track
-[Node.js’ release schedule](https://nodejs.org/en/about/releases/). Here’s [a
+[Node.js' release schedule](https://nodejs.org/en/about/releases/). Here's [a
 post on why we think this is important](https://medium.com/the-node-js-collection/maintainers-should-consider-following-node-js-release-schedule-ab08ed4de71a).
 
 ## Contributing
@@ -632,11 +551,12 @@ If you would like to help take a look at the [list of issues](https://github.com
 
 ## Credits
 
--   [Daniel Bannert](https://github.com/prisis)
--   [All Contributors](https://github.com/anolilab/javascript-style-guide/graphs/contributors)
--   [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)
--   [eslint-config-alloy](https://github.com/AlloyTeam/eslint-config-alloy)
--   [eslint-config-canonical](https://github.com/gajus/eslint-config-canonical)
+- [Daniel Bannert](https://github.com/prisis)
+- [All Contributors](https://github.com/anolilab/javascript-style-guide/graphs/contributors)
+- Inspired by and thankful for the work in configurations like:
+  - [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)
+  - [eslint-config-canonical](https://github.com/gajus/eslint-config-canonical)
+  - [@antfu/eslint-config](https://github.com/antfu/eslint-config) (for its modern approach and clear documentation)
 
 ## License