👔

【Biome1.8】conventionsオプションで命名規則をカスタマイズ！試してみる。

に公開
TypeScript
linter
formatter
Biome
tech

こんにちは！
Biome...使ってますか？ 速度ももちろん早くて快適なのですが、やっぱりなんといっても設定の少なさが本当に楽ですね...。

そんな愛すべきBiomeからv1.8がリリースされました。Yatta!
筆者待望のCSSのlinting、formattingがサポートされたり嬉しい対応はいろいろあったのですが、一つ気になる機能がありました...。

それが、useNamingConventionのconventionsオプションです。今回はその機能についてザックリ試してわかったことなどを紹介したいと思います。

https://biomejs.dev/linter/rules/use-naming-convention/#conventions-since-v180

そもそもuseNamingConventionとは...?

まずはuseNamingConventionについて軽く紹介いたします。
useNamingConventionは、BiomeにおけるLintルールの1つで、「特定の変数・関数宣言などの命名規則を縛る」ためのオプションです。

この機能自体は、Biomeのv1.0の頃から存在し、

の様な一般的なルールセットや、有効・無効を自由にオプションで指定できるルールもいろいろとありました。そんなuseNAmingConventionのオプションの1つとして今回追加されたのが、conventionsオプションです！！

conventionsオプション

さて、本題のconventionsオプションを有効にすると何ができるのでしょうか？
簡単に表現すると、「指定の条件で宣言される変数」を「指定の命名規則」で縛ることができます。
...わざとらしく太字にした様に、「指定の」というのがポイントです！！

今までも、「特定の条件で宣言される変数は特定の命名規則」で縛られていたり、optionsに属するものはon・offを切り替えられたり、ちょっとカスタムできるものはありました...。
しかし、conventionsオプションによって指定できるルールの自由度は今までの比ではありません...。

なにが指定できるの？

指定できるものは以下の通りです。

  • ターゲットになる変数の適用条件
  • ターゲットになった変数の命名規則

これらの組み合わせで自由にカスタムしていきます。
公式の例を見てみましょう。

{
    "//": "...",
    "options": {
        "conventions": [
            {
                "selector": {
                    "kind": "const",
                    "scope": "global"
                },
                "formats": ["CONSTANT_CASE"]
            }
        ]
    }
}

「グローバルなconst宣言の変数はCONSTANT_CASEで書くこと。」というルールが定義されています。
conventionsに selectorとformats が含まれるオブジェクトの配列を渡すことで、各ルールを指定するという寸法ですね。

指定方法の詳細

適用条件の指定

どの変数にルールが適用されるのかの条件指定は、selectorによって行います。
selectorにはさらに3つのプロパティがあります。

イメージ
{
    selector:{
        kind: "xxxxx",
        scope: "xxxx",
        modifires: ["xxxx","xxxx"....],
    }
}

kind

「どういった宣言方法の変数なのか？」を指定します。
例えばconstやtype、 関数の引数(functionParameter)などです。

プロパティ 概説
any kindが設定されていない場合のデフォルトのkind
typeLike クラス、列挙型、型エイリアス、およびインターフェース
class クラス
enum 列挙型
interface インターフェース
typeAlias 型エイリアス
function 名前付き関数宣言と式
namespaceLike TypeScriptの名前空間、インポートおよびエクスポート名前空間（import * as namespace from）
namespace TypeScriptの名前空間
importNamespace インポート名前空間
exportNamespace エクスポート名前空間
importAlias デフォルトのインポートおよび名前付きインポートのエイリアス
exportAlias 再エクスポートされた名前のエイリアス
variable const、let、using、およびvarの宣言
const const
let let
var var
using using
functionParameter 関数パラメータ
catchParameter catchパラメータ
indexParameter インデックスシグネチャのパラメータ
typeParameter ジェネリック型パラメータ
classMember クラスプロパティ、パラメータプロパティ、メソッド、ゲッター、およびセッター
classProperty クラスプロパティ（パラメータプロパティを含む）
classMethod クラスメソッド
classGetter クラスゲッター
classSetter クラスセッター
objectLiteralMember リテラルオブジェクトのプロパティ、メソッド、ゲッター、およびセッター
objectLiteralProperty リテラルオブジェクトプロパティ
objectLiteralMethod リテラルオブジェクトメソッド
objectLiteralGetter リテラルオブジェクトゲッター
objectLiteralSetter リテラルオブジェクトセッター
typeMember 型エイリアスおよびインターフェースで宣言されたプロパティ、メソッド、ゲッター、およびセッター
typeProperty 型プロパティ
typeMethod 型メソッド
typeGetter 型ゲッター
typeSetter 型セッター

modifires

「どんな修飾子がついているか?」を指定します。
readonlyなんかがそれに当たりますね。(弊社フロントエンドではClassを使わないので、readoly以外は使うことなさそう...🤔)

プロパティ 概説
abstract クラスメンバーおよびクラス
private クラスメンバー
protected クラスメンバー
readonly クラスメンバーおよび型メンバーに適用される
static クラスメンバー

scope

「どこで宣言された変数なのか？」を指定します。
現状ではgrobalなのかどうか？が指定できます。

プロパティ 概説
any どこでも（スコープが設定されていない場合のデフォルト値）
global グローバルスコープ（名前空間スコープも含む）

命名規則の指定

どんな命名規則が適用されるのかの指定は、formatsおよびmatchによって行います。
少なくともどちらか一方は指定する必要があります。(両方指定することもできる。)

イメージ
{
    formats: ["xxxx"],
    match: "xxx"
}

formats

「ざっくりと、どういったフォーマットにしたいのか？」を指定します。
呼んで時の如く。ですねこの4種のうちから好みのフォーマットを選んでください。

プロパティ 概説
PascalCase -
camelCase -
snake_case -
CONSTANT_CASE -

match

「より詳細にどういったフォーマットにしたいのか？」を正規表現を用いて指定します。
特定の文字列を入れたい。(XXXXX_ERRORの様な)といった想いも簡単に実現できます。

対応している正規表現の構文

まとめ

上記の組み合わせによって、自由に変数の命名規則をカスタマイズできる！ということが、理解していただけたかと思います。
Xにて、中の人が「デザインにはかなり気を使った。使いやすいと思ってもらえると嬉しい。」と言っている様に、筆者は「とても直感的で使いやすいな...🤔」と感じました。

I put a lot of care into its design. I hope you find it easy to use :)
https://x.com/Conaclos/status/1798001580165492923

今までは口約束や、レビューなどで縛っていた命名規則も、チーム全体に統一を強制することができる様になりました。それも、とても読みやすく直感的でメンテナンスも容易だろうと言うことが想像できます。
まだ軽く触ってみただけですので、チームでどういったルールにするかは決めてはいませんが、今まで口約束していたルールを改めて見直したいと思います！！
Biome使ってない方は是非使ってみてください！超楽ですよ！

ありがとうBiome！！

余談

CONSTANT_CASEって一般的なんですか？筆者は初めて聞きました...。いつもはUPPER_SNAKE って呼んでました🐍
あと、いつもはBlogもほぼ同時に公開してくれてたのですが、今回はまだ出てない(執筆時6/6現在)ですね...。いつも楽しみに読むので是非出して欲しい...。

Discussion