Biomeの設定を詳しく見てみた

前回の記事でBiomeをVueのプロジェクトで使用してみましたが今回はBiomeの設定を詳しく見ていきたいなと思います！
※2024年9月時点

Analyzer

現在Analyzerで提供さいている機能は以下の通りです。

• Import文のソート

Import文のソート

BiomeのImport文のソートは「自然順」に基づいてインポートを自動的にソートしております。
この機能はinitをして設定ファイルが吐き出されてタイミングではデフォルトで有効になっており、無効にしたい場合は以下の部分を修正いたします。

"organizeImports": {
    "enabled": true
},
↓
"organizeImports": {
    "enabled": false
},

自然順とは

「自然順」とは、インポート文をソートする際の一つの方法で、より一般的でユーザー固有でないモジュールを先にし、具体的でユーザー固有のモジュールを後に配置するソート順序です。この方法は、コードの可読性を高めるために使用されます。

Formatter

BiomeのFormatterはPrettierと近い哲学で実装されているためPrettierからの移行も可能になっている。
※一部スタイルのオプションが非対応

PrettierとBiomeの互換性

Prettierのオプション	Biomeのオプション
Experimental Ternaries
Print Width	全体：formatter.lineWidth, 個別：javascript.formatter.lineWidth, json.formatter.lineWidth, css.formatter.lineWidth
Tab Width	全体：formatter.indentWidth, 個別：javascript.formatter.indentWidth, json.formatter.indentWidth, css.formatter.indentWidth
Tabs	全体：formatter.indentStyle, 個別：javascript.formatter.indentStyle, json.formatter.indentStyle, css.formatter.indentStyle
Semicolons	個別：javascript.formatter.semicolons
Quotes	個別：javascript.formatter.quoteStyle, css.formatter.quoteStyle
Quote Props	個別：javascript.formatter.quoteProperties
JSX Quotes	個別：javascript.formatter.jsxQuoteStyle
Trailing Commas	個別：javascript.formatter.trailingCommas, json.formatter.trailingCommas,
Bracket Spacing	個別：javascript.formatter.bracketSpacing
Bracket Line	個別：javascript.formatter.bracketSameLine
Arrow Function Parentheses	個別：javascript.formatter.arrowParentheses
Range
Parser
File Path
Require Pragma
Insert Pragma
Prose Wrap
HTML Whitespace Sensitivity
Vue files script and style tags indentation
End of Line	全体：formatter.lineEnding, 個別：javascript.formatter.lineEnding, json.formatter.lineEnding, css.formatter.lineEnding
Embedded Language Formatting
Single Attribute Per Line

Linter

BiomeのLinterはFormatterと同じようにESLintやESLintのプラグインのルールからインスパイアされて作られているのでESLintの移行が可能になっております。
※Formatterと同じで一部はBiomeでの異なるルール名で採用しているケースがあります。

ESLintとBiomeの互換性

※Biome側の推奨ルールのみ互換性を見ております。

Biomeのオプション	ESLintのオプション
noAccessKey	no-access-key
noAriaHiddenOnFocusable	no-aria-hidden-on-focusable
noAriaUnsupportedElements	aria-unsupported-elements
noAutofocus	no-autofocus
noBlankTarget	jsx-no-target-blank
noDistractingElements	no-distracting-elements
noHeaderScope	scope
noInteractiveElementToNoninteractiveRole	no-interactive-element-to-noninteractive-role
noNoninteractiveElementToInteractiveRole	no-noninteractive-element-to-interactive-role
noNoninteractiveTabindex	no-noninteractive-tabindex
noPositiveTabindex	tabindex-no-positive
noRedundantAlt	img-redundant-alt
noRedundantRoles	no-redundant-roles
noSvgWithoutTitle
useAltText	alt-text
useAnchorContent	anchor-has-content
useAriaActivedescendantWithTabindex	aria-activedescendant-has-tabindex
useAriaPropsForRole	role-has-required-aria-props
useButtonType	button-has-type
useHeadingContent	heading-has-content
useHtmlLang	html-has-lang
useIframeTitle	iframe-has-title
useKeyWithClickEvents	click-events-have-key-events
useKeyWithMouseEvents	mouse-events-have-key-events
useMediaCaption	media-has-caption
useValidAnchor	anchor-is-valid
useValidAriaProps	aria-props
useValidAriaRole	aria-role
useValidAriaValues	aria-proptypes
useValidLang	lang
noBannedTypes	ban-types
noEmptyTypeParameters
noExcessiveNestedTestSuites	max-nested-describe
noExtraBooleanCast	no-extra-boolean-cast
noForEach	no-array-for-each, needless_for_each
noMultipleSpacesInRegularExpressionLiterals	no-regex-spaces
noStaticOnlyClass	no-extraneous-class, no-static-only-class
noThisInStatic	no-this-in-static
noUselessCatch	no-useless-catch
noUselessConstructor	no-useless-constructor, no-useless-constructor
noUselessEmptyExport	no-useless-empty-export
noUselessFragments	jsx-no-useless-fragment
noUselessLabel	no-extra-label
noUselessLoneBlockStatements	no-lone-blocks
noUselessRename	no-useless-rename
noUselessSwitchCase	no-useless-switch-case
noUselessTernary	no-unneeded-ternary
noUselessThisAlias	no-this-alias
noUselessTypeConstraint	no-unnecessary-type-constraint
noWith	no-with
useArrowFunction	prefer-arrow-callback
useFlatMap	prefer-array-flat-map, map_flatten
useLiteralKeys	dot-notation, dot-notation
useOptionalChain	prefer-optional-chain
useRegexLiterals	prefer-regex-literals
useSimpleNumberKeys
noChildrenProp	no-children-prop
noConstAssign	no-const-assign
noConstantCondition	no-constant-condition
noConstructorReturn	no-constructor-return
noEmptyCharacterClassInRegex	no-empty-character-class
noEmptyPattern	no-empty-pattern
noFlatMapIdentity	flat_map_identity
noGlobalObjectCalls	no-obj-calls
noInnerDeclarations	no-inner-declarations
noInvalidConstructorSuper	constructor-super
noInvalidNewBuiltin	no-new-native-nonconstructor
noInvalidUseBeforeDeclaration	no-use-before-define, no-use-before-define
noNonoctalDecimalEscape	no-nonoctal-decimal-escape
noPrecisionLoss	no-loss-of-precision, no-loss-of-precision, lossy_float_literal
noRenderReturnValue
noSelfAssign	no-self-assign, self_assignment
noSetterReturn	no-setter-return
noStringCaseMismatch	match_str_case_mismatch
noSwitchDeclarations	no-case-declarations
noUnnecessaryContinue
noUnreachable	no-unreachable
noUnreachableSuper	no-this-before-super
noUnsafeFinally	no-unsafe-finally
noUnsafeOptionalChaining	no-unsafe-optional-chaining
noUnusedLabels	no-unused-labels
noVoidElementsWithChildren	void-dom-elements-no-children
noVoidTypeReturn
useExhaustiveDependencies	exhaustive-deps
useIsNan	use-isnan
useJsxKeyInIterable	jsx-key
useValidForDirection	for-direction
useYield	require-yield
noAccumulatingSpread
noDelete
noDangerouslySetInnerHtml	no-danger
noDangerouslySetInnerHtmlWithChildren	no-danger-with-children
noGlobalEval	no-eval
noArguments	prefer-rest-params
noCommaOperator	no-sequences
noInferrableTypes	no-inferrable-types
noNonNullAssertion	no-non-null-assertion
noParameterAssign	no-param-reassign
noUnusedTemplateLiteral
noUselessElse	no-else-return, redundant_else
noVar	no-var
useAsConstAssertion	prefer-as-const
useConst	prefer-const
useDefaultParameterLast	default-param-last, default-param-last
useEnumInitializers	prefer-enum-initializers
useExponentiationOperator	prefer-exponentiation-operator
useExportType	consistent-type-exports
useImportType	consistent-type-imports
useLiteralEnumMembers	prefer-literal-enum-member
useNodejsImportProtocol	prefer-node-protocol
useNumberNamespace	prefer-number-properties
useNumericLiterals	prefer-numeric-literals
useSelfClosingElements	jsx-self-closing-comp
useShorthandFunctionType	prefer-function-type
useSingleVarDeclarator	one-var
useTemplate	prefer-template
useWhile	prefer-while
noApproximativeNumericConstant	approx_constant
noArrayIndexKey	no-array-index-key
noAssignInExpressions	no-cond-assign
noAsyncPromiseExecutor	no-async-promise-executor
noCatchAssign	no-ex-assign
noClassAssign	no-class-assign
noCommentText	jsx-no-comment-textnodes
noCompareNegZero	no-compare-neg-zero
noConfusingLabels	no-labels
noConfusingVoidType	no-invalid-void-type
noConstEnum
noControlCharactersInRegex	no-control-regex
noDebugger	no-debugger
noDoubleEquals	eqeqeq
noDuplicateCase	no-duplicate-case
noDuplicateClassMembers	no-dupe-class-members, no-dupe-class-members
noDuplicateJsxProps	jsx-no-duplicate-props
noDuplicateObjectKeys	no-dupe-keys
noDuplicateParameters	no-dupe-args
noDuplicateTestHooks	no-duplicate-hooks
noEmptyInterface	no-empty-interface
noExplicitAny	no-explicit-any
noExportsInTest	no-export
noExtraNonNullAssertion	no-extra-non-null-assertion
noFallthroughSwitchClause	no-fallthrough
noFocusedTests	no-focused-tests
noFunctionAssign	no-func-assign
noGlobalAssign	no-global-assign
noGlobalIsFinite
noGlobalIsNan
noImplicitAnyLet
noImportAssign	no-import-assign
noLabelVar	no-label-var
noMisleadingCharacterClass	no-misleading-character-class
noMisleadingInstantiator	no-misused-new
noMisrefactoredShorthandAssign	misrefactored_assign_op
noPrototypeBuiltins	no-prototype-builtins
noRedeclare	no-redeclare, no-redeclare
noRedundantUseStrict
noSelfCompare	no-self-compare, eq_op
noShadowRestrictedNames	no-shadow-restricted-names
noSparseArray	no-sparse-arrays
noSuspiciousSemicolonInJsx
noThenProperty	no-thenable
noUnsafeDeclarationMerging	no-unsafe-declaration-merging
noUnsafeNegation	no-unsafe-negation
useDefaultSwitchClauseLast	default-case-last
useGetterReturn	getter-return
useIsArray	no-instanceof-array
useNamespaceKeyword	prefer-namespace-keyword
useValidTypeof	valid-typeof

こちらに推奨ルール以外も載っているので是非見てみてください。

おわりに

少し簡単に説明するつもりで書きはじめましたがそれがこの量に記述になってしまったのですが、お役に立てると幸いです。