ESLintとPrettierからの移行

Biomeには容易にESLintとPrettierから移行するためのコマンドがあります。

詳細について知りたくない場合は、ただ以下のコマンドを実行してください。

1
biome migrate eslint --write
2
biome migrate prettier --write

ESLintからの移行

多くのBiomeリンタのルールはESLintやESLintのプラグインのルールからインスパイアされて作られています。BiomeにはTypeScript ESLint、ESLint JSX A11y、ESLint React、ESLint UnicornなどのESLintプラグインのルールがあります。しかし、Biomeのルールの名前には独自の慣習があり、例えばBiomeはcamelCaseRuleNameを使う一方で、ESLintはkebab-case-rule-nameを使います。 Biomeは、異なるルール名を採用しているケースが多くあります。あるルールの出所は、そのルールを説明するページで見つけることができます。もしくは、あるESLintのルールに対応するBiomeのルールはRules sourcesで見つけることができます。

移行を容易にするために、Biomeはbiome migrate eslintサブコマンドを提供します。このサブコマンドはESLintの設定を読み込んで、Biomeの設定に移行することを試みます。このサブコマンドは古い設定ファイルも新しいflat configもサポートしています。古い設定ファイルのextendsフィールドもサポートしていて、プラグインの設定と共有設定の両方を読み込みます。また、このサブコマンドは.eslintignoreも移行します。

次のESLintの設定：

1
{
2
  "extends": ["plugin:unicorn/recommended"],
3
  "plugins": ["unicorn"],
4
  "ignore_patterns": ["dist/**"],
5
  "globals": {
6
    "Global1": "readonly"
7
  },
8
  "rules": {
9
    "eqeqeq": "error"
10
  },
11
  "overrides": [
12
    {
13
      "files": ["tests/**"],
14
      "rules": {
15
        "eqeqeq": "off"
16
      }
17
    }
18
  ]
19
}

と次のBiomeの設定があるとします：

1
{
2
  "linter": {
3
    "enabled": true,
4
    "rules": {
5
      "recommended": true
6
    }
7
  }
8
}

ESLintの設定をBiomeに移行するために以下のコードを実行できます。

1
npx @biomejs/biome migrate eslint --write

1
pnpm exec biome migrate eslint --write

1
bunx --bun biome migrate eslint --write

1
deno run -A npm:@biomejs/biome migrate eslint --write

1
yarn exec biome migrate eslint --write

このコマンドはBiomeの初期設定ファイルを上書きします。例えば、recommendedは無効にされます。結果は以下のようになります。

1
{
2
  "organizeImports": { "enabled": true },
3
  "linter": {
4
    "enabled": true,
5
    "rules": {
6
      "recommended": false,
7
      "complexity": {
8
        "noForEach": "error",
9
        "noStaticOnlyClass": "error",
10
        "noUselessSwitchCase": "error",
11
        "useFlatMap": "error"
12
      },
13
      "style": {
14
        "noNegationElse": "off",
15
        "useForOf": "error",
16
        "useNodejsImportProtocol": "error",
17
        "useNumberNamespace": "error"
18
      },
19
      "suspicious": {
20
        "noDoubleEquals": "error",
21
        "noThenProperty": "error",
22
        "useIsArray": "error"
23
      }
24
    }
25
  },
26
  "javascript": { "globals": ["Global1"] },
27
  "overrides": [
28
    {
29
      "include": ["tests/**"],
30
      "linter": { "rules": { "suspicious": { "noDoubleEquals": "off" } } }
31
    }
32
  ]
33
}

このサブコマンドはESLintの全てのプラグインとextendsフィールドを読み込むためにNode.jsを必要とします。現在は、biome migrate eslintはYAMLで書かれた設定ファイルをサポートしていません。

デフォルトでは、Biomeはインスパイアされたルールを移行しません。 --include-inspiredを使うことでインスパイアされたルールを移行することができます。

1
npx @biomejs/biome migrate eslint --write --include-inspired

1
pnpm exec biome migrate eslint --write --include-inspired

1
bunx --bun biome migrate eslint --write --include-inspired

1
deno run -A npm:@biomejs/biome migrate eslint --write --include-inspired

1
yarn exec biome migrate eslint --write --include-inspired

Biomeがいくつかのルールオプションを実装しないか、元の実装からわずかに逸脱することを選択したため、ESLintとまったく同じ動作を得る可能性は低いことに注意してください。

ESLintはVCS ignoreファイルを使用しているので、BiomeのVCS インテグレーションを有効にすることを推奨します。

Prettierからの移行

BiomeはPrettierフォーマッタとできるだけ近い動作をするようにしています。しかし、Biomeは異なるデフォルトを使用します。例えば、Biomeはスペースの代わりにタブを使用します。 biome migrate prettier --writeを実行することで容易にBiomeに移行することができます。

次のPrettierの設定：

1
{
2
  "useTabs": false,
3
  "singleQuote": true,
4
  "overrides": [
5
    {
6
          "files": ["*.json"],
7
          "options": { "tabWidth": 2 }
8
      }
9
  ]
10
}

がある場合、以下のコマンドを実行することでPrettierの設定をBiomeに移行することができます。

1
npx @biomejs/biome migrate prettier --write

1
pnpm exec biome migrate prettier --write

1
bunx --bun biome migrate prettier --write

1
deno run -A npm:@biomejs/biome migrate prettier --write

1
yarn exec biome migrate prettier --write

結果は以下のようになります。

1
{
2
  "formatter": {
3
    "enabled": true,
4
    "formatWithErrors": false,
5
    "indentStyle": "space",
6
    "indentWidth": 2,
7
    "lineEnding": "lf",
8
    "lineWidth": 80,
9
    "attributePosition": "auto"
10
  },
11
  "organizeImports": { "enabled": true },
12
  "linter": { "enabled": true, "rules": { "recommended": true } },
13
  "javascript": {
14
    "formatter": {
15
      "jsxQuoteStyle": "double",
16
      "quoteProperties": "asNeeded",
17
      "trailingCommas": "all",
18
      "semicolons": "asNeeded",
19
      "arrowParentheses": "always",
20
      "bracketSpacing": true,
21
      "bracketSameLine": false,
22
      "quoteStyle": "single",
23
      "attributePosition": "auto"
24
    }
25
  },
26
  "overrides": [
27
    {
28
      "include": ["*.json"],
29
      "formatter": {
30
        "indentWidth": 2
31
      }
32
    }
33
  ]
34
}

このサブコマンドは.prettierrc.jsなどの設定を読み込むためにNode.jsを必要とします。 biome migrate prettierはJSON5、TOML、YAMLで書かれた設定ファイルをサポートしていません。

PrettierはVCSファイルをサポートしているので、BiomeのVCS インテグレーションを有効にすることを推奨します。