ESLintとPrettierからの移行

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

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

biome migrate eslint --write
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の設定：

{
  "extends": ["plugin:unicorn/recommended"],
  "plugins": ["unicorn"],
  "ignore_patterns": ["dist/**"],
  "globals": {
    "Global1": "readonly"
  },
  "rules": {
    "eqeqeq": "error"
  },
  "overrides": [
    {
      "files": ["tests/**"],
      "rules": {
        "eqeqeq": "off"
      }
    }
  ]
}

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

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

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

npx @biomejs/biome migrate eslint --write

yarn biome migrate eslint --write

pnpm biome migrate eslint --write

bunx biome migrate eslint --write

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

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

{
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": false,
      "complexity": {
        "noForEach": "error",
        "noStaticOnlyClass": "error",
        "noUselessSwitchCase": "error",
        "useFlatMap": "error"
      },
      "style": {
        "noNegationElse": "off",
        "useForOf": "error",
        "useNodejsImportProtocol": "error",
        "useNumberNamespace": "error"
      },
      "suspicious": {
        "noDoubleEquals": "error",
        "noThenProperty": "error",
        "useIsArray": "error"
      }
    }
  },
  "javascript": { "globals": ["Global1"] },
  "overrides": [
    {
      "include": ["tests/**"],
      "linter": { "rules": { "suspicious": { "noDoubleEquals": "off" } } }
    }
  ]
}

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

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

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

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

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

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

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

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

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

Prettierからの移行

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

次のPrettierの設定：

{
  "useTabs": false,
  "singleQuote": true,
  "overrides": [
    {
          "files": ["*.json"],
          "options": { "tabWidth": 2 }
      }
  ]
}

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

npx @biomejs/biome migrate prettier --write

yarn biome migrate prettier --write

pnpm biome migrate prettier --write

bunx biome migrate prettier --write

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

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

{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto"
  },
  "organizeImports": { "enabled": true },
  "linter": { "enabled": true, "rules": { "recommended": true } },
  "javascript": {
    "formatter": {
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "trailingCommas": "all",
      "semicolons": "asNeeded",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "bracketSameLine": false,
      "quoteStyle": "single",
      "attributePosition": "auto"
    }
  },
  "overrides": [
    {
      "include": ["*.json"],
      "formatter": {
        "indentWidth": 2
      }
    }
  ]
}

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

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