eslint-config-hyoban

Hyoban's ESLint Config enables most of the recommended rules for js, ts, and react, uses ESLint for formatting, and provides a lot of useful plugins.

Read more about why I use ESLint for linting and formatting on xLog.

| 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-x ✅ | jsonc ✅ | compiler ✅ | command ✅ | @antfu/eslint-config | | unused-import ✅ | yml | jsx-a11y | regexp ✅ | | | n | perfectionist | next | package-json ✅ | | | compat | format | jsx-nesting | cspell | |

Usage

[!TIP] You may not need lint-staged and simple-git-hooks if you don't ignore auto-fix for rules in the editor.

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

If you are using ESLint 9.9.0 and eslint.config.ts, you need to install jiti.

ni -D jiti

[!TIP] You can install the nightly version from pkg.pr.new, for example, ni -D https://pkg.pr.new/hyoban/eslint-config-hyoban@{commit}.

eslint.config.mjs or eslint.config.ts if you are using ESLint 9.9.0.

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

export default defineConfig()

[!TIP] You can customize the preset by passing options according to available options

package.json

{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix",
    "prepare": "simple-git-hooks"
  },
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}

Use eslint --flag unstable_ts_config if you are using ESLint 9.9.0 and eslint.config.ts.

.vscode/settings.json for VSCode.

{
  // You shouldn't use formatter with this ESLint config
  "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    }
  },

  // If you are using ESLint 9.9.0 and eslint.config.ts
  "eslint.options": {
    "flags": ["unstable_ts_config"]
  },

  // If you do not want to auto fix some rules on save
  // You can put this in your user settings or workspace settings
  "eslint.codeActionsOnSave.rules": [
    "!prefer-const",
    "!unused-imports/no-unused-imports",
    "!@stylistic/jsx-self-closing-comp",
    "!tailwindcss/classnames-order",
    "*"
  ],

  // If you want to silent stylistic rules
  // You can put this in your user settings or workspace settings
  "eslint.rules.customizations": [
    { "rule": "@stylistic/*", "severity": "off", "fixable": true },
    { "rule": "antfu/consistent-list-newline", "severity": "off" },
    { "rule": "hyoban/jsx-attribute-spacing", "severity": "off" },
    { "rule": "simple-import-sort/*", "severity": "off" },
    { "rule": "prefer-const", "severity": "off" },
    { "rule": "unused-imports/no-unused-imports", "severity": "off" },
    { "rule": "tailwindcss/classnames-order", "severity": "off" }
  ],

  // You can also silent all auto fixable rules
  "eslint.rules.customizations": [
    { "rule": "*", "fixable": true, "severity": "off" }
  ]
}

Who is using?

• Follow
• fisand
• Shiro
• vite-react-tailwind-template