タグ: package.json

Biomeを使ってLintとFormatをおこなう

フロンドエンド向け垂直統合ツールチェーンRomeが開発終了となり、Rome開発チームのひとりが作成したのがBiomeです。

Rustで構築されたBiomeは既存のFormatter、Linterと比べ非常に高速に動作するように設計されています。設定も非常に簡単でエディタの拡張機能・プラグインも提供されていることから今後のデファクトスタンダードになりそうな予感があります。

本記事ではBiomeのインストールから基本的な使い方、エディタの統合について解説します。

Biomeをインストール

Biomeはグローバルインストールすることは可能ですが推奨されていないため、プロジェクトにインストールします。また、バージョン範囲演算子を使用しないでインストールすることを強く推奨しています。

$ mkdir biome-example
$ cd biome-example
$ npm init -y
$ npm install --save-dev --save-exact @biomejs/biome
$ npx @biomejs/biome init

Node.jsをインストールせずにBiomeを使用したい場合は、Homebrewなどを使ってインストールするスタンドアロン実行形式での利用も可能ですが、本記事では割愛します。

biomejs.dev
Manual installation | Biome
Install the Biome manually

インストール後に初期化をおこなうとbiome.jsonが生成されます。

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

基本的な設定は済んでいるので、すぐに使い始められます。

Biomeの使い方

Biomeの基本的な使い方を見ていきます。

Formatter

Prettierのようにソースコードを整形してくれます。指定したディレクトリ内のファイルに対してソースコードの整形をおこなうには次のようなコマンドを実行します。

$ npx @biomejs/biome format src --write

このコマンドではsrcディレクトリを指定してフォーマットを行っていますが、単一ファイルやワイルドカード指定も可能です。

Linter

こちらはESLintの置き換えになります。次のようなコマンドを実行します。

$ npx @biomejs/biome lint src

こちらも単一ファイルの指定やワイルドカードでの指定が可能です。

Formatter＋Lint＋α

前述のFormatterとLinterに加えて、インポート文の再構成をまとめて実行するには次のようなコマンドを実行します。

$ npx @biomejs/biome check --apply src

通常はこのコマンドを使うことになると思います。

package.jsonにスクリプトを設定する

コマンドが少し長いのでpackage.jsonにスクリプトとして定義しておきましょう。

{
  "name": "biome-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "format": "biome format src --write",
    "lint": "biome lint src",
    "check": "biome check --apply src"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@biomejs/biome": "1.5.3"
  }
}

Visual Studio Codeの拡張機能を使う

開発時に都度コマンド入力するのは手間ですので、エディタ向けの拡張機能を利用するのがよいでしょう。

まずはVisual Studio Codeの拡張機能を使ってみます。

settings.jsonに以下の設定を追加します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": true,
    "source.organizeImports.biome": true
  }
}

以下の設定で、保存時にFormatterが実行されるように設定しています。

  "editor.formatOnSave": true,

デフォルトのFormatterはPrettierにしています。

  "editor.defaultFormatter": "esbenp.prettier-vscode",

言語モードがJavaScriptの場合、FormatterはBiomeになるよう設定しています。

  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },

保存時のアクションに、　Biomeによるフォーマット（"quickfix.biome": true）とインポート文の再構成（"source.organizeImports.biome": true）をおこなうように設定します。

この設定を行うことで、ファイルの保存時にソースコードの整形とインポート文の再構成をおこなってくれるようになります。

WebStormのプラグインを使う

IntelliJ向けのプラグインも提供されていますので、WebStormで使ってみます。

こちらは⌥⇧ ⌘ L or Ctrl+Alt+Lでファイルの整形ダイアログを表示して必要なオプションにチェックを入れて実行ボタンを押します。

まとめ

Biomeのインストール方法からエディタとの統合までを確認しました。 1つのパッケージで導入できてデフォルトで利用可能となっているだけでなく、エディタとの統合もサポートされているため、小さく始めて大きく育てるには非常に適したツールチェーンだといえます。

これまではPrettierとESLintを使っていましたが今後はBiomeを使ってみようと思います。

Node.jsでTypeScriptの環境を構築する

Node.jsでTypeScriptの環境を構築します。

構築する環境について

本記事では、以下のバージョンで構築しています。

$ node -v
v18.12.1
$ npm -v
9.1.2

以降の手順で、　Node.jsのバージョンが必要となりますので、必ず確認してください。

TypeScriptをインストールする

TypeScriptをインストールしていきます。

$ npm install -D typescript @types/node@18

使用しているバージョンがv18.12.1ですので、@typesパッケージも同じバージョンのものを指定します。

インストールできたらインストールされているバージョンを確認します。

$ npx tsc --version
Version 4.9.4

上記のようにtscコマンドを使ってバージョンが表示できればインストールは完了しています。

tsconfig.jsonを作成する

次にTypeScriptの設定ファイルのtsconfig.jsonを作成します。まずは、以下のコマンドを実行してファイルを作成します。

$ npx tsc --init

このままでも動作しますが、一部設定を変更しておきます。

{
  "compilerOptions": {
-   // "outDir": "./",               /* Specify an output folder for all emitted files. */
+   "outDir": "./dist",              /* Specify an output folder for all emitted files. */
- }
+ },
+ "include": [
+   "src/**/*"
+ ]
}

ここでは、TypeScriptファイルの格納先（include）とコンパイルして作成されるJavaScriptファイルの出力先（outDir）を追加・変更しています。

環境の構築時期やTypeScriptのバージョン、プロジェクトの都合によっては他の設定も変更することがありますが、ここでは省略します。

動作確認

実際に動作確認をしてみましょう。まずはsrc/index.tsを作成し、ファイルの中身は以下のようにします。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("John"));

以下のコマンドを実行し、src/index.tsをコンパイルします。

$ npx tsc

ファイルはdist/index.jsにされ、設定の違いで多少異なるかもしれませんが、以下のように出力されます。

"use strict";
function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("John"));

実行にはJavaScriptファイルを使用します。

$ node dist/index.js
Hello, John!

エラーなくメッセージが表示されれば正しくコンパイルされています。

package.jsonにスクリプトを追加する

package.jsonにスクリプトを追加してnpmコマンドでビルドできるようにします。

{
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "build": "tsc",
+   "watch": "tsc --watch"
  },
}

ここでは2つのスクリプトを追加しています。ひとつはビルドを行うスクリプト（build）で、もう一つは変更を監視して変更があればビルドを行うスクリプトです（watch）。

追加したコマンドは以下のように実行します。

$ npm run build
$ npm run watch

モバイルバージョンを終了