eslint-config-hyoban

eslint-config-hyoban

Hyoban's ESLint Config, enable most of the recommended rules for js, ts, and react, use ESLint for formatting, and provide 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

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

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

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

eslint.config.js or eslint.config.mjs

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

export default defineConfig()

[!TIP] If you find that saving files in the editor is a bit laggy, try turning off rules that require type checking while in the editor.

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

const isInEditor = !!(
  (process.env.VSCODE_PID ||
    process.env.VSCODE_CWD ||
    process.env.JETBRAINS_IDE ||
    process.env.VIM) &&
  !process.env.CI
)

export default defineConfig({
  typeChecked: isInEditor ? false : 'essential',
})

[!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": "pnpm lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}

[!WARNING] If your ESLint version is less than 9.0.0, you have to use eslint . instead of eslint.

If you need Prettier

{
  "scripts": {
    "lint": "prettier --list-different . && eslint",
    "lint:fix": "prettier --list-different --write . && eslint --fix"
  }
}

[!TIP] You can use prettier-config-hyoban for Prettier to avoid conflicts.

.vscode/settings.json for VSCode.

{
  "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    }
  },

  // 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" }
  ],

  // You don't need this if you use ESLint VSCode(v3.0.7+)
  "eslint.experimental.useFlatConfig": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json",
    "jsonc"
  ]
}

.zed/settings.json for Zed, read more at Zed's documentation and related PR.

{
  "formatter": {
    "code_actions": {
      "source.fixAll.eslint": true
    }
  }
}

Tips

• Auto fix for Pull Request