@infernodesign/eslint-config 1.0.0 → 1.2.0

package/README.md

@@ -15,95 +15,52 @@ Shared ESLint flat config presets for Inferno Design projects.
 - Respects `.gitignore` by default
 - Requires ESLint v9.5.0+
 
-## Setup
-
-> [!NOTE]
-> Since this package is hosted in the GitHub Packages registry and is private to just Inferno Design, you must configure your `.npmrc` file to access the private registry.
-
-### `.npmrc` Configuration
-
-To configure your `.npmrc` file, add the following line:
-
-```ini
-//npm.pkg.github.com/:_authToken=$GITHUB_TOKEN
-@infernodesign:registry=https://npm.pkg.github.com/
-```
-
-Then, create an environment variable `GITHUB_TOKEN` with a personal access token that has the `read:packages` scope. Alternatively, you can replace `$GITHUB_TOKEN` with your personal access token directly in the `.npmrc` file. Make sure you don't commit this file to VCS to avoid exposing your token.
-
-### Registry Configuration
-
-Alternatively, you can configure the registry for the `@infernodesign` packages registry scope using the following command:
-
-```bash
-pnpm config set @infernodesign:registry https://npm.pkg.github.com/
-```
-
-This command sets the registry for the `@infernodesign` scope to the GitHub Packages registry.
-
-### Authentication
-
-Ensure that your authentication is set up correctly to access the packages. You can add your GitHub token to the `.npmrc` file as shown above or use the following command:
-
-```bash
-pnpm config set //npm.pkg.github.com/:_authToken <your-personal-access-token>
-```
-
-Replace `<your-personal-access-token>` with your actual GitHub personal access token.
-
 ## Usage
 
-### Quick Start
+### Starter Wizard
 
-To quickly set up ESLint with the Inferno Design configuration or migrate from the legacy config to the new flat config, run the following CLI command in the root of your project:
+We provided a CLI tool to help you set up your project, or migrate from the legacy config to the new flat config with one command.
 
 ```bash
 pnpm dlx @infernodesign/eslint-config@latest
 ```
 
-### Manual Installation
+### Manual Install
 
-To manually install and configure ESLint with the Inferno Design configuration, follow these steps:
+If you prefer to set up manually:
 
-Install the necessary dependencies:
-
-```shell
+```bash
 pnpm i -D eslint @infernodesign/eslint-config
 ```
 
-Create a `eslint.config.js` in your project root:
+And create `eslint.config.mjs` in your project root:
 
 ```js
 // eslint.config.mjs
-import config from '@infernodesign/eslint-config'
-
-export default config()
-```
-
-That's it! You can now run ESLint in your project:
+import { inferno } from '@infernodesign/eslint-config'
 
-```shell
-eslint . --fix
+export default inferno()
 ```
 
 <details>
 <summary>
-Combine with legacy config:
+Combined with legacy config:
 </summary>
 
-To use configs from the legacy `eslintrc` format, use the [`@eslint/eslintrc`](https://www.npmjs.com/package/@eslint/eslintrc) package to convert them to the flat config.
+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
 // eslint.config.mjs
 import { FlatCompat } from '@eslint/eslintrc'
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
 const compat = new FlatCompat()
 
-export default config(
+export default inferno(
   {
     ignores: [],
   },
+
   // Legacy config
   ...compat.config( {
     extends: [
@@ -111,59 +68,49 @@ export default config(
       // Other extends...
     ],
   } )
+
   // Other flat configs...
 )
 ```
 
-> [!NOTE]
-> `.eslintignore` no longer works in Flat config, see [customization](#customization) for more details.
+> Note that `.eslintignore` no longer works in Flat config, see [customization](#customization) for more details.
 
 </details>
 
-### Node Package Scripts
+### Add script for package.json
 
-To lint your project, add the following scripts to your `package.json`:
+For example:
 
 ```json
 {
   "scripts": {
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   }
 }
 ```
 
-### Precommit Hook
-
-To lint your project before committing, use a precommit hook with [husky](https://typicode.github.io/husky/#/):
+## IDE Support (auto fix on save)
 
-```bash
-pnpm install husky --save-dev
-pnpx husky install
-pnpx husky add .husky/pre-commit "eslint . --fix && git add ."
-```
+### VS Code support
 
-This will automatically lint and fix your code before each commit.
+Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
-## VS Code Support (Autofix on Save)
+Add the following settings to your `.vscode/settings.json`:
 
-Install the [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
-
-Then, add the following settings to your `.vscode/settings.json`:
-
-```json5
+```jsonc
 {
   // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,
 
-  // Autofix on save
+  // Auto fix
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
 
-  // (Optional) Silent the stylistic rules in the IDE, but still autofix them
+  // 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 },
@@ -206,45 +153,45 @@ Then, add the following settings to your `.vscode/settings.json`:
 
 ## Customization
 
-This package uses the new [ESLint Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new). It provides much better organization and composition.
+Since v1.0, we migrated to [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new). It provides much better organization and composition.
 
-Normally you only need to import the `config` preset:
+Normally you only need to import the `antfu` preset:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config()
+export default inferno()
 ```
 
 And that's it! Or you can configure each integration individually, for example:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
-  // Type of the project. 'lib' for libraries, the default is 'app'
+export default inferno( {
+// Type of the project. 'lib' for libraries, the default is 'app'
   type: 'lib',
 
   // Enable stylistic formatting rules
   // stylistic: true,
 
-  // Or, customize the stylistic rules
+  // Or customize the stylistic rules
   stylistic: {
     indent: 2, // 4, or 'tab'
     quotes: 'single', // or 'double'
   },
 
-  // TypeScript and Vue are auto-detected, you can also explicitly enable them:
+  // TypeScript and Vue are autodetected, you can also explicitly enable them:
   typescript: true,
   vue: true,
 
-  // Enable React
-  react: true,
-
   // Enable Next.js
-  next: true,
+  nextjs: true,
+
+  // Enable Storybook
+  storybook: true,
 
   // Disable jsonc and yaml support
   jsonc: false,
@@ -253,38 +200,40 @@ export default config( {
   // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
   ignores: [
     '**/fixtures',
-    // ... Additional globs
+    // ...globs
   ]
 } )
 ```
 
-The `config` factory function accepts any amount of custom config overrides:
+The `antfu` factory function also accepts any number of arbitrary custom config overrides:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config(
+export default inferno(
   {
-    // Configurations for `config`
+    // Configures for antfu's config
   },
-  // ESLint Flat Configs
+
+  // From the second arguments they are ESLint Flat Configs
+  // you can have multiple configs
   {
     files: [ '**/*.ts' ],
     rules: {},
   },
   {
-    files: [ '**/*.vue' ],
     rules: {},
   },
 )
 ```
 
-A more advanced usage, import fine-grained configs and compose them together:
+Going more advanced, you can also import fine-grained configs and compose them as you wish:
 
-### Advanced Example
+<details>
+<summary>Advanced Example</summary>
 
-Using this style is not recommended as the shared options between configs might need extra care to be consistent.
+We wouldn't recommend using this style in general unless you know exactly what they are doing, as there are shared options between configs and might need extra care to make them consistent.
 
 ```js
 // eslint.config.js
@@ -297,11 +246,11 @@ import {
   jsdoc,
   jsonc,
   markdown,
-  next,
+  nextjs,
   node,
-  react,
   sortPackageJson,
   sortTsconfig,
+  storybook,
   stylistic,
   toml,
   typescript,
@@ -311,46 +260,48 @@ import {
 } from '@infernodesign/eslint-config'
 
 export default combine(
-  combine(),
-  comments(),
   ignores(),
-  imports(),
-  javascript( /* options */ ),
-  jsdoc(),
-  jsonc(),
-  markdown(),
-  next(),
+  javascript( /* Options */ ),
+  comments(),
   node(),
-  react( /* options */ ),
-  sortPackageJson(),
-  sortTsconfig(),
-  stylistic(),
-  toml(),
-  typescript( /* options */ ),
+  jsdoc(),
+  imports(),
+  nextjs(),
+  storybook(),
   unicorn(),
+  typescript( /* Options */ ),
+  stylistic(),
   vue(),
+  jsonc(),
   yaml(),
+  toml(),
+  markdown(),
 )
 ```
 
-Refer to the [configs](https://github.com/infernodesign/tooling/tree/main/tooling/eslint/src/configs) and [factory](https://github.com/infernodesign/tooling/tree/main/tooling/eslint/src/factory.ts) source files for more details.
+</details>
+
+Check out the [configs](https://github.com/antfu/eslint-config/blob/main/src/configs) and [factory](https://github.com/antfu/eslint-config/blob/main/src/factory.ts) for more details.
 
-### Plugin Renaming
+> Thanks to [sxzz/eslint-config](https://github.com/sxzz/eslint-config) for the inspiration and reference.
 
-Since ESLint Flat Config requires explicitly providing the plugin names (instead of the mandatory convention from npm package name), some plugins have been renamed to make the overall scope more consistent and easier to write.
+### Plugins Renaming
 
-| New Prefix | Original Prefix        | Source Plugin                                                                                                        |
-|------------|------------------------|----------------------------------------------------------------------------------------------------------------------|
-| `import/*` | `import-x/*`           | [eslint-plugin-import-x](https://github.com/un-es/eslint-plugin-import-x)                                            |
-| `next/*`   | `@next/next/*`         | [@next/eslint-plugin-next](https://nextjs.org/docs/pages/building-your-application/configuring/eslint#eslint-plugin) |
-| `node/*`   | `n/*`                  | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n)                                               |
-| `style/*`  | `@stylistic/*`         | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic)                                     |
-| `test/*`   | `vitest/*`             | [eslint-plugin-vitest](https://github.com/veritem/eslint-plugin-vitest)                                              |
-| `test/*`   | `no-only-tests/*`      | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests)                            |
-| `ts/*`     | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint)                           |
-| `yaml/*`   | `yml/*`                | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml)                                                  |
+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.
 
-To override rules, or disable them inline, use the new prefix:
+| New Prefix | Original Prefix        | Source Plugin                                                                                         |
+| ---------- | ---------------------- | ----------------------------------------------------------------------------------------------------- |
+| `import/*` | `import-lite/*`        | [eslint-plugin-import-lite](https://github.com/9romise/eslint-plugin-import-lite)                     |
+| `nextjs/*` | `@next/next`           | [@next/eslint-plugin-next](https://github.com/vercel/next.js/tree/canary/packages/eslint-plugin-next) |
+| `node/*`   | `n/*`                  | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n)                                |
+| `yaml/*`   | `yml/*`                | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml)                                   |
+| `ts/*`     | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint)            |
+| `style/*`  | `@stylistic/*`         | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic)                      |
+| `test/*`   | `vitest/*`             | [@vitest/eslint-plugin](https://github.com/vitest-dev/eslint-plugin-vitest)                           |
+| `test/*`   | `no-only-tests/*`      | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests)             |
+| `next/*`   | `@next/next`           | [@next/eslint-plugin-next](https://github.com/vercel/next.js/tree/canary/packages/eslint-plugin-next) |
+
+When you want to override rules, or disable them inline, you need to update to the new prefix:
 
 ```diff
 -// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -358,22 +309,34 @@ To override rules, or disable them inline, use the new prefix:
 type foo = { bar: 2 }
 ```
 
-> [!NOTE]
-> This preset will automatically rename the plugins for your custom configs. Use the original prefix to override the rules directly.
+### Change back to original prefix
+
+If you really want to use the original prefix, you can revert the plugin renaming by:
+
+```ts
+import { inferno } from '@infernodesign/eslint-config'
+
+export default inferno()
+  .renamePlugins( {
+    ts: '@typescript-eslint',
+    yaml: 'yml',
+    node: 'n'
+    // ...
+  } )
+```
 
 ### Rules Overrides
 
-Certain rules would only be enabled for specific files. For example, `ts/*` rules would only be enabled in
-`.ts` files and `vue/*` rules would only be enabled in `.vue` files. To override the rules, specify the file extension:
+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:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config(
+export default inferno(
   {
-    typescript: true,
-    vue: true
+    vue: true,
+    typescript: true
   },
   {
     // Remember to specify the file glob here, otherwise it might cause the vue plugin to handle non-vue files
@@ -391,21 +354,21 @@ export default config(
 )
 ```
 
-Use the provided `overrides` options in each integration to make overrides easier:
+We also provided the `overrides` options in each integration to make it easier:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
-  typescript: {
+export default inferno( {
+  vue: {
     overrides: {
-      'ts/consistent-type-definitions': [ 'error', 'interface' ],
+      'vue/operator-linebreak': [ 'error', 'before' ],
     },
   },
-  vue: {
+  typescript: {
     overrides: {
-      'vue/operator-linebreak': [ 'error', 'before' ],
+      'ts/consistent-type-definitions': [ 'error', 'interface' ],
     },
   },
   yaml: {
@@ -418,90 +381,108 @@ export default config( {
 
 ### Config Composer
 
-The factory function `config()` 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 more flexibly.
+Since v2.10.0, the factory function `inferno()` 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.
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config()
+export default inferno()
   .prepend(
-  // some configs before the main config
+    // some configs before the main config
   )
-// overrides any named configs
+  // overrides any named configs
   .override(
-    'config/imports',
+    'antfu/stylistic/rules',
     {
       rules: {
-        'import/order': [ 'error', { 'newlines-between': 'always' } ],
+        'style/generator-star-spacing': [ 'error', { after: true, before: false } ],
       }
     }
   )
-// rename plugin prefixes
+  // rename plugin prefixes
   .renamePlugins( {
     'old-prefix': 'new-prefix',
-  // ...
+    // ...
   } )
 // ...
 ```
 
 ### Vue
 
-Vue support is detected automatically by checking if
-`vue` is installed in your project. To explicitly enable/disable it:
+Vue support is detected automatically by checking if `vue` is installed in your project. You can also explicitly enable/disable it:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
+export default inferno( {
   vue: true
 } )
 ```
 
 #### Vue 2
 
-Limited support for Vue 2 is available since it has [reached EOL](https://v2.vuejs.org/eol/). To use Vue 2, configure it manually by setting
-`vueVersion` to `2`:
+We have limited support for Vue 2 (as it's already [reached EOL](https://v2.vuejs.org/eol/)). If you are still using Vue 2, you can configure it manually by setting `vueVersion` to `2`:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
+export default inferno( {
   vue: {
     vueVersion: 2
   },
 } )
 ```
 
+As it's in maintenance mode, we only accept bug fixes for Vue 2. It might also be removed in the future when `eslint-plugin-vue` drops support for Vue 2. We recommend upgrading to Vue 3 if possible.
+
+#### Vue Accessibility
+
+To enable Vue accessibility support, you need to explicitly turn it on:
+
+```js
+// eslint.config.js
+import { inferno } from '@infernodesign/eslint-config'
+
+export default inferno( {
+  vue: {
+    a11y: true
+  },
+} )
+```
+
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
+
+```bash
+npm i -D eslint-plugin-vuejs-accessibility
+```
+
 ### Optional Configs
 
-Some optional configs are available for specific use cases. Their dependencies are not provided by default.
+We provide some optional configs for specific use cases, that we don't include their dependencies by default.
 
 #### Formatters
 
-Use external formatters to format files that ESLint can't handle yet (`.css`, `.html`, etc). Powered by [`eslint-plugin-format`](https://github.com/antfu/eslint-plugin-format).
+Use external formatters to format files that ESLint cannot handle yet (`.css`, `.html`, etc). Powered by [`eslint-plugin-format`](https://github.com/antfu/eslint-plugin-format).
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
+export default inferno( {
   formatters: {
     /**
      * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
      * By default uses Prettier
      */
     css: true,
-
     /**
      * Format HTML files
      * By default uses Prettier
      */
     html: true,
-
     /**
      * Format Markdown files
      * Supports Prettier and dprint
@@ -512,143 +493,150 @@ export default config( {
 } )
 ```
 
-Then, install the required dependencies:
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
-```shell
-pnpm i -D eslint-plugin-format
+```bash
+npm i -D eslint-plugin-format
+```
+
+#### React
+
+To enable React support, you need to explicitly turn it on:
+
+```js
+// eslint.config.js
+import { inferno } from '@infernodesign/eslint-config'
+
+export default inferno( {
+  react: true,
+} )
+```
+
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
+
+```bash
+npm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
 ```
 
 #### Next.js
 
-To enable Next.js support, explicitly turn it on:
+To enable Next.js support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
-  next: true,
+export default inferno( {
+  nextjs: true,
 } )
 ```
 
-Then, install the required dependencies:
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
-```shell
-pnpm i -D @next/eslint-next-plugin
+```bash
+npm i -D @next/eslint-plugin-next
 ```
 
-#### React
+#### Storybook
 
-To enable React support, explicitly turn it on:
+To enable storybook support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
-  react: true,
+export default inferno( {
+  storybook: true,
 } )
 ```
 
-Then, install the required dependencies:
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
-```shell
-pnpm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
+```bash
+npm i -D eslint-plugin-storybook
 ```
 
 #### Svelte
 
-To enable svelte support, explicitly turn it on:
+To enable svelte support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
+export default inferno( {
   svelte: true,
 } )
 ```
 
-Then, install the required dependencies:
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
-```shell
-pnpm i -D eslint-plugin-svelte
+```bash
+npm i -D eslint-plugin-svelte
 ```
 
 #### Astro
 
-To enable astro support, explicitly turn it on:
+To enable astro support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
+export default inferno( {
   astro: true,
 } )
 ```
 
-Then, install the required dependencies:
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
-```shell
-pnpm i -D eslint-plugin-astro
+```bash
+npm i -D eslint-plugin-astro
 ```
 
 #### Solid
 
-To enable Solid support, explicitly turn it on:
+To enable Solid support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
+export default inferno( {
   solid: true,
 } )
 ```
 
-Then, install the required dependencies:
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
-```shell
-pnpm i -D eslint-plugin-solid
+```bash
+npm i -D eslint-plugin-solid
 ```
 
 #### UnoCSS
 
-To enable UnoCSS support, explicitly turn it on:
+To enable UnoCSS support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
+export default inferno( {
   unocss: true,
 } )
 ```
 
-Then, install the required dependencies:
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
-```shell
-pnpm i -D @unocss/eslint-plugin
+```bash
+npm i -D @unocss/eslint-plugin
 ```
 
-### Type-Aware Rules
-
-You can optionally enable the [type-aware rules](https://typescript-eslint.io/linting/typed-linting/) by passing the options object to the
-`typescript` config:
-
-```js
-// eslint.config.js
-import config from '@infernodesign/eslint-config'
+### Optional Rules
 
-export default config( {
-  typescript: {
-    tsconfigPath: 'tsconfig.json',
-  },
-} )
-```
+This config also provides some optional plugins/rules for extended usage.
 
-### Command-Line Interface (CLI)
+#### `command`
 
 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.
 
@@ -667,12 +655,12 @@ You can add the trigger comment one line above the code you want to transform, f
 
 ```ts
 /// to-function
-const foo = async ( msg: string ): void => {
-  console.log( msg )
+const foo = async (msg: string): void => {
+  console.log(msg)
 }
 ```
 
-Will be transformed to this when you hit save with your editor or run `eslint . --fix`:
+Will be transformed to this when you hit save with your editor or run `eslint --fix`:
 
 ```ts
 async function foo( msg: string ): void {
@@ -682,24 +670,45 @@ async function foo( msg: string ): void {
 
 The command comments are usually one-off and will be removed along with the transformation.
 
+### Type Aware Rules
+
+You can optionally enable the [type aware rules](https://typescript-eslint.io/linting/typed-linting/) by passing the options object to the `typescript` config:
+
+```js
+// eslint.config.js
+import { inferno } from '@infernodesign/eslint-config'
+
+export default inferno( {
+  typescript: {
+    tsconfigPath: 'tsconfig.json',
+  },
+} )
+```
+
 ### Editor Specific Disables
 
-Some rules are disabled when inside ESLint IDE integrations, namely [`unused-imports/no-unused-imports`](https://www.npmjs.com/package/eslint-plugin-unused-imports) [`test/no-only-tests`](https://github.com/levibuzolic/eslint-plugin-no-only-tests).
+Auto-fixing for the following rules are disabled when ESLint is running in a code editor:
+
+- [`prefer-const`](https://eslint.org/docs/rules/prefer-const)
+- [`test/no-only-tests`](https://github.com/levibuzolic/eslint-plugin-no-only-tests)
+- [`unused-imports/no-unused-imports`](https://www.npmjs.com/package/eslint-plugin-unused-imports)
 
-This is to prevent unused imports from getting removed by the IDE during refactoring to get a better DX. Those rules will be applied when running ESLint in the terminal or [Lint Staged](#lint-staged). To disable this behavior:
+Since v3.16.0, they are no longer disabled, but made non-fixable using [this helper](https://github.com/antfu/eslint-flat-config-utils#composerdisablerulesfix).
+
+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:
 
 ```js
 // eslint.config.js
-import config from '@infernodesign/eslint-config'
+import { inferno } from '@infernodesign/eslint-config'
 
-export default config( {
+export default inferno( {
   isInEditor: false
 } )
 ```
 
 ### Lint Staged
 
-To apply linting and auto fixing before every commit, add the following to your `package.json`:
+If you want to apply lint and auto-fix before every commit, you can add the following to your `package.json`:
 
 ```json
 {
@@ -712,10 +721,10 @@ To apply linting and auto fixing before every commit, add the following to your
 }
 ```
 
-Then, install the required dependencies:
+and then
 
-```shell
-pnpm i -D lint-staged simple-git-hooks
+```bash
+npm i -D lint-staged simple-git-hooks
 
 # to activate the hooks
 npx simple-git-hooks
@@ -723,15 +732,47 @@ npx simple-git-hooks
 
 ## View what rules are enabled
 
-Use the [`@eslint/config-inspector`](https://github.com/eslint/config-inspector) visual tool to view the enabled rules in your project and applied to each file.
+I 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)
+
+Go to your project root that contains `eslint.config.mjs` and run:
+
+```bash
+npx @eslint/config-inspector
+```
+
+## Versioning Policy
+
+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.
+
+### Changes Considered as Breaking Changes
 
-In the project root that contains the `eslint.config.js`file, run:
+- Node.js version requirement changes
+- Huge refactors that might break the config
+- Plugins made major changes that might break the config
+- Changes that might affect most of the codebases
 
-```shell
-pnpx @eslint/config-inspector
+### Changes Considered as Non-breaking Changes
 
-# or specify the config file
-pnpx @eslint/config-inspector  --config ./eslint.config.js
+- Enable/disable rules and plugins (that might become stricter)
+- Rules options changes
+- Version bumps of dependencies
+
+## FAQ
+
+### How to format CSS?
+
+You can opt-in to the [`formatters`](#formatters) feature to format your CSS. Note that it's only doing formatting, but not linting. If you want proper linting support, give [`stylelint`](https://stylelint.io/) a try.
+
+### Top-level Function Style, etc
+
+If you want to disable the opinionated rules, you can disable them with:
+
+```ts
+import { inferno } from '@infernodesign/eslint-config'
+
+export default inferno( {
+  lessOpinionated: true
+} )
 ```
 
 ## License
@@ -740,4 +781,4 @@ Licensed under the [MIT License](./LICENSE).
 
 ## Credits
 
-- Inspired by [Antfu's eslint-config](https://github.com/antfu/eslint-config)
+- Orignally forked from [Antfu's eslint-config](https://github.com/antfu/eslint-config)