eslint-config-hyoban

Hyoban's ESLint Config, enable most of the recommended rules for js, ts, and react.

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

Usage

ni -D eslint eslint-config-hyoban

eslint.config.js or eslint.config.mjs

// @ts-check
import hyoban from "eslint-config-hyoban";

export default hyoban();

[!WARNING] If your ESLint version is less than 8.57.0, you have to use eslint.config.js.

module.exports = (async () => (await import("./eslint.config.mjs")).default)();

[!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 hyoban 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 hyoban({
  typeChecked: isInEditor ? false : "essential",
});

scripts in package.json

{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "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.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // You may don't need this in the future
  "eslint.experimental.useFlatConfig": true,
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json"
  ],

  // If you need Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

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

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

Auto fix for Pull Request

name: Format

on:
  pull_request:
    branches:
      - main

jobs:
  format-code:
    runs-on: ubuntu-latest

    permissions:
      # Give the default GITHUB_TOKEN write permission to commit and push the
      # added or changed files to the repository.
      contents: write

    steps:
      - uses: actions/checkout@v4

      - name: Set node
        uses: actions/setup-node@v4
        with:
          node-version: lts/*

      - name: Install pnpm
        uses: pnpm/action-setup@v3
        with:
          run_install: |
            - args: [--frozen-lockfile]

      - name: Lint
        run: pnpm run lint:fix

      # Commit all changed files back to the repository
      - uses: stefanzweifel/git-auto-commit-action@v5