@fabdeh/eslint-config 0.10.0 → 0.11.0

package/README.md

@@ -50,7 +50,7 @@ For monorepos, split your setup in two layers:
 Root config example:
 
 ```js
-// eslint.config.js (workspace root)
+// eslint.config.ts (workspace root)
 import { defineWorkspaceConfig } from '@fabdeh/eslint-config';
 
 export default defineWorkspaceConfig({
@@ -63,8 +63,8 @@ Project config example:
 ```js
 import { defineProjectConfig } from '@fabdeh/eslint-config';
 
-// apps/my-app/eslint.config.js
-import baseConfig from '../../eslint.config.js';
+// apps/my-app/eslint.config.ts
+import baseConfig from '../../eslint.config.ts';
 
 export default defineProjectConfig(baseConfig, {
   type: 'app',
@@ -128,7 +128,17 @@ Add the following settings to your `.vscode/settings.json`:
   },
 
   // Silence style rules in your IDE, while still fixing them automatically
-  "eslint.rules.customizations": [{ "rule": "@stylistic/*", "severity": "off", "fixable": true }],
+  "eslint.rules.customizations": [
+    { "rule": "@stylistic/*", "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 }
+  ],
 
   // Enable eslint for all supported languages
   "eslint.validate": [
@@ -153,6 +163,152 @@ Add the following settings to your `.vscode/settings.json`:
 
 </details>
 
+<details>
+<summary>🔲 Zed support</summary>
+
+<br>
+
+Add the following settings to your `.zed/settings.json`:
+
+```jsonc
+{
+  "format_on_save": "on",
+  "formatter": [
+    // Use ESLint's --fix:
+    { "code_action": "source.fixAll.eslint" }
+  ],
+  // Enable eslint for all supported languages
+  // Defaults only include https://github.com/search?q=repo%3Azed-industries%2Fzed%20eslint_languages&type=code
+  "languages": {
+    "HTML": {
+      "language_servers": ["...", "eslint"]
+    },
+    "Markdown": {
+      "language_servers": ["...", "eslint"]
+    },
+    "JSON": {
+      "language_servers": ["...", "eslint"]
+    },
+    "JSONC": {
+      "language_servers": ["...", "eslint"]
+    },
+    "YAML": {
+      "language_servers": ["...", "eslint"]
+    },
+    "CSS": {
+      "language_servers": ["...", "eslint"]
+    }
+    // Add other languages as needed
+  },
+  "lsp": {
+    "eslint": {
+      "settings": {
+        // Remove after https://github.com/zed-industries/zed/issues/49387
+        "experimental": {
+          "useFlatConfig": false
+        },
+
+        // Silent the stylistic rules in your IDE, but still auto fix them
+        "rulesCustomizations": [
+          { "rule": "@stylistic/*", "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 }
+        ]
+      }
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary>🟩 Neovim Support</summary>
+
+<br>
+
+Update your configuration to use the following:
+
+```lua
+local customizations = {
+  { rule = '@stylistic/*', 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 },
+}
+
+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 your IDE, but still auto fix them
+      rulesCustomizations = customizations,
+    },
+  }
+)
+```
+
+### Neovim format on save
+
+There's few ways you can achieve format on save in neovim:
+
+- `nvim-lspconfig` has a `EslintFixAll` command predefined, you can create a autocmd to call this command after saving file.
+
+```lua
+lspconfig.eslint.setup({
+  --- ...
+  on_attach = function(client, bufnr)
+    vim.api.nvim_create_autocmd("BufWritePre", {
+      buffer = bufnr,
+      command = "EslintFixAll",
+    })
+  end,
+})
+```
+
+- 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)
+
+</details>
+
 ## Customization
 
 This project uses [ESLint flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new). It provides better organization and composition.
@@ -160,7 +316,7 @@ This project uses [ESLint flat config](https://eslint.org/docs/latest/use/config
 Normally you only need to import the `defineConfig` function:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig();
@@ -169,7 +325,7 @@ export default defineConfig();
 And that's it! Or you can configure each integration individually, for example:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig({
@@ -200,7 +356,7 @@ export default defineConfig({
 The `defineConfig` factory function also accepts any number of custom config overrides:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig(
@@ -230,7 +386,7 @@ We don't recommend this style unless you know exactly what you're doing, since t
 ```js
 import { defineConfig } from 'eslint/config';
 
-// eslint.config.js
+// eslint.config.ts
 import {
   angular,
   comments,
@@ -274,7 +430,7 @@ All rules are bound to one or more file extensions (via minimatch patterns, e.g.
 If you want to override rules, you need to specify the file extension:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig(
@@ -301,7 +457,7 @@ export default defineConfig(
 We also provide the `overrides` option in each integration to make it easier:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig({
@@ -369,7 +525,7 @@ Most TypeScript rules are enabled automatically if the `typescript` package is i
 You can explicitly enable/disable TypeScript integration manually:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig({
@@ -390,7 +546,7 @@ The TypeScript integration also lets you enable/disable rules that report syntax
 You can enable these rules as follows:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig({
@@ -412,7 +568,7 @@ pnpm add -D eslint-plugin-erasable-syntax-only
 Angular support is detected automatically by checking if `@angular/core` is installed in your project. You can also explicitly enable/disable it:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig({
@@ -432,7 +588,7 @@ NgRx support is also detected automatically if any of the following packages is
 As with the Angular integration, it can be explicitly enabled/disabled:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig({
@@ -447,7 +603,7 @@ export default defineConfig({
 The Vitest integration is detected automatically by checking whether `vitest` is installed in your project. It can be enabled/disabled manually in the configuration:
 
 ```js
-// eslint.config.js
+// eslint.config.ts
 import { defineConfig } from '@fabdeh/eslint-config';
 
 export default defineConfig({
@@ -468,6 +624,26 @@ export default defineConfig({
 });
 ```
 
+### Editor Specific Disables
+
+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)
+- [`unused-imports/no-unused-imports`](https://www.npmjs.com/package/eslint-plugin-unused-imports)
+- [`pnpm/json-enforce-catalog`](https://github.com/antfu/pnpm-workspace-utils/tree/main/packages/eslint-plugin-pnpm#rules)
+- [`pnpm/json-prefer-workspace-settings`](https://github.com/antfu/pnpm-workspace-utils/tree/main/packages/eslint-plugin-pnpm#rules)
+- [`pnpm/json-valid-catalog`](https://github.com/antfu/pnpm-workspace-utils/tree/main/packages/eslint-plugin-pnpm#rules)
+
+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 { defineConfig } from '@fabdeh/eslint-config';
+
+export default defineConfig({
+  isInEditor: false
+});
+```
 
 ### Lint Staged
 
@@ -493,6 +669,16 @@ pnpm add -D nano-staged simple-git-hooks
 pnpm simple-git-hooks
 ```
 
+## View what rules are enabled
+
+Use [@eslint/config-inspector](https://github.com/eslint/config-inspector) to help you view what rules are enabled in your project and apply them to what files.
+
+Go to your project root that contains `eslint.config.js` 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.