Zenn
📥

AWS CDKのプロジェクトでBiomeを導入して使ってみる

2024/06/16に公開
AWS
AWS CDK
Biome
tech

以前 AWS CDK のプロジェクトのためのテンプレートを作成しました。

linter、formatter として、eslint と prettier を導入していましたが、Biomeの TypeScript namingConvention がかなりいい感じに使えるようになってきたので、eslint + prettier の設定から移行しようと思います。

（元記事の linter、formatter の記載については後日修正します）

まずは導入

以前作成したAWS CDK Project templateに Biome を導入して、設定を migration します。

Biome を導入して初期化します(コメントも残したいので jsonc で初期化しています)

npm i -D --save-exact  @biomejs/biome
npx @biomejs/biome init --jsonc

続いて公式にしたがって eslint と prettier から migration を行います。

このとき eslint の plugin とか extends にあるようなルールを migration するようにします。

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

CDK プロジェクトに適用するためのBiome設定各種

まずはサンプルプロジェクトで既存の eslint + prettier との設定差異について確認していきます。

基本的にはCDKの命名規則やスタイルに合わせたいので、ざっくりと下記のように対応をまとめます。

元の設定 migrationによる結果 修正したい理由 修正後
常にsemicolonつける "semicolons": "asNeeded" CDKの命名規則に従う "semicolons": "always"
propertyの設定特に無し デフォルトは camelCase(参考) CDKの命名規則から外れるが、スナップショットテストやるときにCfnのプロパティ名(VisibilityTimeout)とかがPascalCaseだったりするのでそれに対応 "selector": { "kind": "objectLiteralProperty" },
"formats": ["camelCase","PascalCase", "CONSTANT_CASE"]
import aliasについての設定なし 設定なし(デフォルトでcamelCase or PascalCase or CONSTANT_CASE.) CDKのサンプルではimport aliasが snake_caseのことがおおい "selector": { "kind": "importAlias" },
"formats": ["camelCase", "PascalCase", "snake_case", "CONSTANT_CASE"]
js の ignore についての設定なし 設定なし TypeScript Build 後の js について無視したい "files": {"ignore": ["node_modules/*", "cdk.out/*", "*.js"], }

基本的には migration によっていい感じに設定ファイルができあがっているはずですが、本当に AWS CDK のプロジェクトに適用できるか、BLEAの repository を使って確認します。

ちなみにサンプルで作成されるプロジェクトだと、この設定をそのまま migration すると下記のように怒られてしまいます。

  ✖ This object property name should be in camelCase.

    16 │   template.hasResourceProperties('AWS::SQS::Queue', {
  > 17 │     VisibilityTimeout: 300,
       │     ^^^^^^^^^^^^^^^^^
    18 │   })

実際に今までの設定を BLEA で使うと最後に下記のようなエラーが残ります。

  ✖ This parameter is unused.

    6 │ const tableName = process.env.DDB_TABLE;
  > 7 │ module.exports.getItem = (event, context, callback) => {
      │                                  ^^^^^^^
    8 │   var params = {
    9 │     KeyConditionExpression: 'title = :title',

  ✖ This object property name should be in camelCase or PascalCase or CONSTANT_CASE.

    13 │       title: { S: request.title },
    14 │       content: { S: request.content },
  > 15 │       created_at: { S: datetime },
       │       ^^^^^^^^^^
    16 │     },
    17 │   };

これらのエラーについては、以下の理由からあえて残しておきたいと思っています。

  • 未使用のパラメータはアンダースコアを付けることで明示的に利用していないことが分かるから便利
  • 採用している大きなプロジェクトが多いため

最後に

今回は、AWS CDK プロジェクトに Biome を導入して eslint と prettier から移行しました。

実際にプロジェクトに適用する際は、プロジェクトの規模やスタイルガイドに応じて調整が必要だと思いますが、Biome がいい感じにやっていってくれそうなので今後も使い続けたいですね。

Discussion