Zenn
サイボウズ フロントエンドPublicationへの投稿
⚙️

Biome と ESLint の lint ルールの互換性

nissy-dev
2023/10/10に公開
JavaScript
TypeScript
#
lint
ESLint
Biome
tech

Biome では、現在約 150 個程度の JavaScript・TypeScript に関する lint ルールを実装しています。

https://biomejs.dev/linter/rules/

これらのルール多くは既存の ESLint 関連で実装されているルールと同じものになっているのですが、ルールの名前が異なることもあり、その対応関係がわかりにくくなっています。

そこでこの記事では、フロントエンド開発をする場合によく設定していそうな次の lint ルールについて、Biome で実装されているかどうかの対応表を紹介します。

ESLint から Biome への移行を考える際の参考にしてもらえればと思います。

また、この記事よりさらに細かい対応表については次のディスカッションや公式サイトにもまとまっているので、興味ある人はこちらも参考にしてもらえればと思います。

https://github.com/biomejs/biome/discussions/3

https://biomejs.dev/linter/rules-sources/

まとめ

対応表がずらっと並ぶので、まとめを先に書いておきます！

  • ESLint でよく利用されている recommended ルールの 8 割以上は Biome でも実装されています
    • exhaustive-deps などの hooks 関連のルールも実装されています
  • Biome では linter と一緒に import 文をソートする機能も含む formatter も利用できます
    • prettier や eslint-plugin-import などをインストールする必要はありません

ESLint との互換性を意識した設定は次のようになります。

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUndeclaredVariables": "error",
        "noUnusedVariables": "error"
      },
      "style": {
        "noNamespace": "error"
      },
      "nursery": {
        "useExhaustiveDependencies": "error",
        "useHookAtTopLevel": "error"
      }
    }
  }
}

no-mixed-spaces-and-tabs などのスタイルに関するルールを除いた対応表は次のようになります。🚧 になっているルールは、今後実装される予定があります。

ESlint recommended Biome recommended
constructor-super noInvalidConstructorSuper ✅
for-direction useValidForDirection ✅
getter-return useGetterReturn ✅
no-async-promise-executor noAsyncPromiseExecutor ✅
no-case-declarations noSwitchDeclarations ✅
no-class-assign noClassAssign ✅
no-compare-neg-zero noCompareNegZero ✅
no-cond-assign noAssignInExpressions ✅
no-const-assign noConstAssign ✅
no-constant-condition noConstantCondition ✅
no-control-regex noControlCharactersInRegex ✅
no-debugger noDebugger ✅
no-delete-var noDelete ✅
no-dupe-args noDuplicateParameters ✅
no-dupe-class-members noDuplicateClassMembers ✅
no-dupe-else-if 🚧
no-dupe-keys noDuplicateObjectKeys ✅
no-duplicate-case noDuplicateCase ✅
no-empty-character-class noEmptyCharacterClassInRegex ✅
no-empty noEmptyBlockStatements
no-empty-pattern noEmptyPattern ✅
no-ex-assign noCatchAssign ✅
no-extra-boolean-cast noExtraBooleanCast ✅
no-fallthrough noFallthroughSwitchClause ✅
no-func-assign noFunctionAssign ✅
no-global-assign noGlobalAssign
no-import-assign noImportAssign ✅
no-inner-declarations noInnerDeclarations ✅
no-invalid-regexp
no-irregular-whitespace
no-loss-of-precision noPrecisionLoss ✅
no-misleading-character-class noMisleadingCharacterClass
no-new-symbol noNewSymbol ✅
no-nonoctal-decimal-escape noNonoctalDecimalEscape ✅
no-obj-calls noGlobalObjectCalls ✅
no-octal
no-prototype-builtins noPrototypeBuiltins ✅
no-redeclare noRedeclare ✅
no-regex-spaces noMultipleSpacesInRegularExpressionLiterals ✅
no-self-assign noSelfAssign ✅
no-setter-return noSetterReturn ✅
no-shadow-restricted-names noShadowRestrictedNames ✅
no-sparse-arrays noSparseArray ✅
no-this-before-super noUnreachableSuper ✅
no-undef noUndeclaredVariables ✅
no-unreachable noUnreachable ✅
no-unsafe-finally noUnsafeFinally ✅
no-unsafe-negation noUnsafeNegation ✅
no-unsafe-optional-chaining noUnsafeOptionalChaining ✅
no-unused-labels noUnusedLabels ✅
no-unused-vars noUnusedVariables
no-useless-backreference 🚧
no-useless-catch noUselessCatch ✅
no-with noWith ✅
require-yield useYield ✅
use-isnan useIsNan ✅
valid-typeof useValidTypeof ✅

型情報を必要しないルールとの対応表は次のようになります。Biome では TypeScript の型情報を扱うことができないので、型情報が必要なルールについては基本的にサポートしていません。

TypeScript ESlint recommended Biome recommended
ban-ts-comment
ban-types noBannedTypes ✅
no-duplicate-enum-values
no-explicit-any noExplicitAny ✅
no-extra-non-null-assertion noExtraNonNullAssertion ✅
no-misused-new noMisleadingInstantiator ✅
no-namespace noNamespace
no-non-null-asserted-optional-chain noNonNullAssertion ✅
no-this-alias noUselessThisAlias ✅
no-unnecessary-type-constraint noUselessTypeConstraint ✅
no-unsafe-declaration-merging noUnsafeDeclarationMerging ✅
no-var-requires
prefer-as-const useAsConstAssertion ✅
triple-slash-reference

対応表は次のようになります。eslint-plugin-jsx-a11y は、Next.js や Remix が提供している ESLint ルールにも利用されています。

jsx-a11y recommended Biome recommended
alt-text useAltText ✅
anchor-has-content useAnchorContent ✅
anchor-is-valid useValidAnchor ✅
aria-activedescendant-has-tabindex useAriaActivedescendantWithTabindex ✅
aria-props useValidAriaProps ✅
aria-proptypes useValidAriaValues ✅
aria-role useValidAriaRole
aria-unsupported-elements noAriaUnsupportedElements ✅
autocomplete-valid
click-events-have-key-events useKeyWithClickEvents ✅
heading-has-content useHeadingContent ✅
html-has-lang useHtmlLang ✅
iframe-has-title useIframeTitle ✅
img-redundant-alt noRedundantAlt ✅
interactive-supports-focus
label-has-associated-control
media-has-caption useMediaCaption ✅
mouse-events-have-key-events useKeyWithMouseEvents ✅
no-access-key noAccessKey ✅
no-autofocus noAutofocus ✅
no-distracting-elements noDistractingElements ✅
no-interactive-element-to-noninteractive-role noInteractiveElementToNoninteractiveRole ✅
no-noninteractive-element-interactions
no-noninteractive-element-to-interactive-role noNoninteractiveElementToInteractiveRole ✅
no-noninteractive-tabindex noNoninteractiveTabindex ✅
no-redundant-roles noRedundantRoles ✅
no-static-element-interactions
role-has-required-aria-props useAriaPropsForRole ✅
role-supports-aria-props
scope noHeaderScope ✅
tabindex-no-positive noPositiveTabindex ✅

eslint-plugin-react の recommended ルールの中には、hooks が登場する以前のクラスコンポーネントなどに関連する古いルールも多く含まれています。古いルールを除いた対応表は次のようになります。

react recommended Biome recommended
jsx-key
jsx-no-comment-textnodes noCommentText ✅
jsx-no-duplicate-props noDuplicateJsxProps ✅
jsx-no-target-blank noBlankTarget ✅
jsx-no-undef noUndeclaredVariables
jsx-uses-vars noUnusedVariables
no-children-prop noChildrenProp ✅
no-danger-with-children noDangerouslySetInnerHtmlWithChildren ✅

eslint-plugin-react-hooks の対応表は次のようになります。

react-hooks recommended Biome recommended
exhaustive-deps useExhaustiveDependencies
rules-of-hooks useHookAtTopLevel

最後に

Biome の discussion の投稿を元に、ESLint 関連の recommended ルールにフォーカスした対応表を作ってみました。コントリビューターとしては、思ったより a11y のルールの実装が足りてなかったことに気づけてよかったです。

ちなみに、Biome が対応してないルールの中には、parser や formatter などで部分的に対応がされているものがあります。例えば no-octal のケースでは、パーサーがエラーを報告し、エディタで確認することができます。

https://biomejs.dev/playground/?indentStyle=space&quoteStyle=single&trailingComma=none&code=YwBvAG4AcwB0ACAAbgB1AG0AIAA9ACAAMAA3ADEAOwA%3D

また、Biome は linter だけではなく import 文をソートする機能も含む formatter の機能も使えるので、formatter や linter の設定で楽をしたい人は是非使ってみてもらえるとよいと思います。

Biome の Discord に日本語のチャンネルも作ってみたので、Biome について質問したい方がいれば次のリンクからでもお待ちしています。

https://discord.com/channels/1132231889290285117/1150433265308676097

GitHubで編集を提案
サイボウズ フロントエンド
サイボウズ フロントエンドPublication

サイボウズのフロントエンドに関わる人が発信するPublicationです

Discussion