eslint-config-hyoban

[!IMPORTANT] This preset is for my own use and the projects I maintain. Please use it with caution if you intend to use it.

Hyoban's ESLint Config is based on @antfu/eslint-config. Read more about why I use ESLint for linting and formatting on my blog.

Extras on top of @antfu/eslint-config:

• Replaces perfectionist sorting with import-sort
• Extra Markdown linting rules powered by npm-eslint-markdown and markdown-preferences
• Optional Tailwind CSS preset via tailwindcss: true
• Little defaults config you can find in merge-options and dependencies

| Basic | Style | React | Others | Tools | | --------------- | --------------- | ------------- | ---------------- | ---------------------- | | js | stylistic | react | Tailwind CSS | config-inspector | | ts | antfu | hooks | UnoCSS | eslint-types | | unicorn | import-sort | refresh | flat-gitignore | eslint-typegen | | import | jsonc | compiler | command | @antfu/eslint-config | | unused-import | yml | jsx-a11y | regexp | npm-eslint-markdown | | n | perfectionist | next | package-json | eslint-markdown | | compat | format | jsx-nesting | cspell | markdown-preferences |

Usage

Follow @antfu/eslint-config for installation and usage.

ni -D eslint eslint-config-hyoban lint-staged simple-git-hooks

eslint.config.mjs

// @ts-check
import { defineConfig } from 'eslint-config-hyoban'

export default defineConfig()

with Tailwind CSS:

// @ts-check
import { defineConfig } from 'eslint-config-hyoban'

export default defineConfig({
  tailwindcss: {
    settings: {
      tailwindConfig: './tailwind.config.ts',
    },
    overrides: {
      'tailwindcss/no-unknown-classes': 'off',
    },
  },
})

TypeAware Rules

We recommend using tsslint for type-aware rules.

A example tsslint.config.ts:

import { defineConfig, importESLintRules } from '@tsslint/config'

// Run `npx tsslint-docgen` to generate documentation for the configured rules.

export default defineConfig({
  rules: {
    ...await importESLintRules({
      'react-x/no-leaked-conditional-rendering': 'error',
    }),
  },
})

Disabling Auto-Fix Or Change Severity

You can also disable auto-fix for these rules via editor or LSP settings. For example, in VS Code:

{
  "eslint.rules.customizations": [
    { "rule": "unused-imports/no-unused-imports", "severity": "warn" },
    { "rule": "test/no-only-tests", "severity": "warn" },
    { "rule": "prefer-const", "severity": "warn" }
  ],

  "eslint.codeActionsOnSave.rules": [
    "!unused-imports/no-unused-imports",
    "!test/no-only-tests",
    "!prefer-const",
    "*"
  ]
}

In Zed or Neovim, add the same rules under the ESLint LSP settings:

{
  "rulesCustomizations": [
    { "rule": "unused-imports/no-unused-imports", "severity": "warn" },
    { "rule": "test/no-only-tests", "severity": "warn" },
    { "rule": "prefer-const", "severity": "warn" }
  ],
  "codeActionOnSave": {
    "rules": [
      "!unused-imports/no-unused-imports",
      "!test/no-only-tests",
      "!prefer-const",
      "*"
    ]
  }
}