linterとformatterが一つに！？Biome使ってみた

npm install --save-dev --save-exact @biomejs/biome

npx @biomejs/biome init

npx biome format --write <files>

npx biome lint --write <files>

npx biome check --write <files>

"scripts": {
    "lint": "biome lint src",
    "format": "biome format src",
    "check": "biome check src"
  },

npm install @evilmartians/lefthook --save-dev

lefthook install

pre-commit:
  commands:
  glob: "*.{js,ts,jsx,tsx}"
    biome:
      run: npm run check <- biome checkなど実行したいコマンド

- root
| - biome.json <- 共通の設定
| - front/
	| - biome.json <- フロントのみの設定
	| - src/
| - back/
  | - biome.json <- バックのみの設定
  | - src/

{
  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true // <- 全体に適用するルール
    }
  },
  "overrides": [
    {
      "include": ["backend/**"],
      "ignore": [
        "backend/node_modules/**",
        "backend/dist/**",
      ],
      "linter": {
        "enabled": true,
        "rules": { // <- バックエンドのみに適用するルール
          "style": {
            "useImportType": "off"
          },
        }
      },
      "javascript": {
        "parser": {
          "unsafeParameterDecoratorsEnabled": true
        }
      }
    },
    {
      "include": ["frontend/**"],
      "ignore": [
        "frontend/node_modules",
        "frontend/dist",
      ],
      "linter": {
        "enabled": true,
        "rules": {　// <- フロントエンドのみに適用するルール
	        "nursery": {
            "noConsole": "error" 
          }
        }
      }
    },
  ]
}

npm install --save-dev eslint

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "tsconfig.json",
    tsconfigRootDir: __dirname,
    sourceType: "module",
  },
  plugins: ["@typescript-eslint/eslint-plugin"],
  extends: ["plugin:@typescript-eslint/recommended"],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: [".eslintrc.js", "src/generated/*"],
  rules: {
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off",
    //biomeがカバーしているルールを無効化
    semi: "off",
    quotes: ["error", "double"],
    // ----------------↓Biomeで対応できないルールを追加-----------------------
    "no-restricted-syntax": [
      "error",
      {
        // letを禁止
        selector: "VariableDeclaration[kind='let']",
        message: "'let'は禁止です。代わりに'const'を使用してください。",
      },
    ],
  },
};

"scripts": {
	"lint:es": "eslint --ext .ts src",
	...
}

ESLintはBiomeに比べると実行に時間がかかるので、僕のプロジェクトではcommit時のチェックはせずに、PR作成時にCIで回るようにしています。

このあたりは皆さんのプロジェクトに合わせて調整してください。

まとめ

1. Biomeはlinterとformatterが一つになったツール

   1. lint

      npx biome lint --write <files>

   2. format

      npx biome format --write <files>

   3. lint + format

      npx biome check --write <files>

2. VSCodeの拡張機能を導入すればエラー表示&自動フォーマット可能

3. lefthookと併用することでcommit時に自動チェック

4. フロント、バックなどでルールを分けたい場合はoverridesを利用

   1. overridesを利用することでVSCodeの拡張機能も問題なく利用できる！

5. Biomeで設定できないルールはESLintでチェック