Biome.js、Web プロジェクトをフォーマットして lint するためのツールチェーン

t3-env が lint 目的で Biomejs を使用していることがわかりました。この記事では、Biomejs の概要と t3-env での使用法について説明します。

バイオーム.js

Biome.js は、Web プロジェクトのツールチェーンです。プロジェクトのフォーマットとリンティングに役立ちます。

クイックスタート

1. インストール

npm install - save-dev - save-exact @biomejs/biome

2.構成

npx @biomejs/biome init

上記のコマンドを実行すると、biome.json ファイルが自動的に作成されます。以下は、

を実行したときにデフォルトで生成されるコードです。 biome.json.
内の上記のコマンド

{
 "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
 "vcs": {
 "enabled": false,
 "clientKind": "git",
 "useIgnoreFile": false
 },
 "files": { "ignoreUnknown": false, "ignore": [] },
 "formatter": { "enabled": true, "indentStyle": "tab" },
 "organizeImports": { "enabled": true },
 "linter": {
 "enabled": true,
 "rules": { "recommended": true }
 },
 "javascript": { "formatter": { "quoteStyle": "double" } }
}

linter.enabled: true はリンターを有効にし、rules.recommended: true は推奨ルールを有効にします。これはデフォルト設定に相当します。

フォーマットはデフォルトで有効になっていますが、formatter.enabled: false を使用して明示的に無効にすることができます。

3.バイオームコマンド

a.形式

— write オプションを指定して format コマンドを使用すると、ファイルとディレクトリをフォーマットできます。

npx @biomejs/biome format - write <files>
</files>

b.糸くず

— write オプションを指定した lint コマンドを使用すると、lint を実行してファイルとディレクトリに安全な修正を適用できます。

npx @biomejs/biome lint - write <files>
</files>

c.チェック

check コマンドを利用すると、フォーマットとリンクの両方を実行できます。

npx @biomejs/biome check - write <files>
</files>

t3-env での Biome.js の使用

1. package.json 内のスクリプト

"lint": "biome check .",
"lint:fix": "biome check . - apply",

これは、フォーマットとリンティングを適用する check CLI コマンドを使用していることが判明しました。ただし、バリエーションがあり、lint は lint 問題をチェックするだけですが、lint:fix を実行すると、 — apply で実行されます。

— 適用 — エイリアス — 書き込み、安全な修正の書き込み、書式設定およびインポートの並べ替え (非推奨、使用 — 書き込み)

2. biome.json

{
 "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
 "organizeImports": {
 "enabled": true
 },
 "formatter": {
 "enabled": true,
 "indentWidth": 2,
 "indentStyle": "space"
 },
 "linter": {
 "enabled": true,
 "rules": {
 "recommended": true,
 "a11y": {
 "noSvgWithoutTitle": "off",
 "useButtonType": "off",
 "useAltText": "off"
 },
 "complexity": {
 "noBannedTypes": "off"
 },
 "style": {
 "useImportType": "error",
 "useExportType": "error"
 }
 }
 },
 "overrides": [
 {
 "include": ["**/*.test.ts"],
 "linter": {
 "rules": {
 "suspicious": {
 "noExplicitAny": "off"
 }
 }
 }
 }
 ],
 "vcs": {
 "enabled": true,
 "clientKind": "git",
 "useIgnoreFile": true
 }
}

私たちについて:

Thinkthroo では、大規模なオープンソース プロジェクトを研究し、アーキテクチャ ガイドを提供しています。私たちは、tailwind で構築された、プロジェクトで使用できる再利用可能なコンポーネントを開発しました。 Next.js、React、Node 開発サービスを提供します。

プロジェクトについて話し合うためのミーティングを予約してください。

参考文献:

1. https://biomejs.dev/

2. https://github.com/t3-oss/t3-env/blob/main/biome.json

3. https://github.com/t3-oss/t3-env/blob/main/package.json#L10

以上がBiome.js、Web プロジェクトをフォーマットして lint するためのツールチェーンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。