Svelte入門：リファレンス CLI -sv check- [Vol.1]

今日は、SvelteKitのリファレンスについて解説して います。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

sv check の使用方法

sv checkは、プロジェクト内の以下のような問題点や警告を見つけます：

• 未使用のCSS
• アクセシビリティのヒント
• JavaScript/TypeScriptコンパイラのエラー

Node 16以降が必要です。

インストール

プロジェクトにsvelte-checkパッケージをインストールする必要があります：

npm i -D svelte-check

使用方法

npx sv check

オプション

–workspace <path>
作業スペースへのパス。node_modulesと--ignoreでリストされたものを除く全てのサブディレクトリがチェックされます。

–output <format>
エラーと警告の表示方法。機械可読出力を参照してください。

• human
• human-verbose
• machine
• machine-verbose

–watch
プロセスを継続させ、変更を監視します。

–preserveWatchOutput
ウォッチモードでの画面クリアを防止します。

–tsconfig <path>
tsconfigまたはjsconfigファイルへのパスを指定します。パスは作業スペースパスに対して相対パスか絶対パスで指定できます。これを指定すると、設定ファイルのfiles/include/excludeパターンに一致するファイルのみが診断されます。また、TypeScriptとJavaScriptファイルからのエラーも報告されます。指定しない場合、プロジェクトディレクトリから上向きに次のjsconfig/tsconfig.jsonファイルを探します。

–no-tsconfig
現在のディレクトリとその下にあるSvelteファイルのみをチェックし、.js/.tsファイルを無視する（型チェックされない）場合に使用します。

–ignore <paths>
無視するファイル/フォルダ（作業スペースルートからの相対パス）。パスはカンマ区切りで引用符で囲んでください。例：

npx sv check --ignore "dist,build"

--no-tsconfigと併用した場合のみ効果があります。--tsconfigと併用した場合、これは監視されるファイルにのみ効果があり、診断されるファイルには効果がなく、それはtsconfig.jsonによって決定されます。

–fail-on-warnings
指定した場合、警告によってsv checkがエラーコードで終了します。

–compiler-warnings <warnings>
引用符で囲まれたカンマ区切りのcode:behaviourペアのリスト。codeはコンパイラ警告コードで、behaviourはignoreまたはerrorのいずれかです：

npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error"

–diagnostic-sources <sources>
コードに対して診断を実行すべきソースの、引用符で囲まれたカンマ区切りのリスト。デフォルトでは、すべてが有効です：

• js（TypeScriptを含む）
• svelte
• css 例：

npx sv check --diagnostic-sources "js,svelte"

–threshold <level>
診断をフィルタリングします：

• warning（デフォルト）- エラーと警告の両方が表示されます
• error – エラーのみが表示されます

解説

このヘルプページは、Svelteプロジェクトで使用できるsv checkコマンドについて説明しています。このツールは、プロジェクト内の問題（未使用CSSやアクセシビリティの問題、JavaScriptやTypeScriptのコンパイラエラーなど）を検出するために使用されます。

主な機能としては：

1. プロジェクト全体のコード品質チェック
2. リアルタイムの監視モード（--watchオプション）
3. TypeScript/JavaScriptの型チェック（--tsconfig関連オプション）
4. カスタマイズ可能な警告レベルと無視するファイルの設定

このツールは、Svelteアプリケーションの開発プロセスを改善し、早期にバグを発見するのに役立ちます。特に大規模なプロジェクトや、チームで作業する場合に有用です。コードの品質を維持し、アクセシビリティの問題を早期に発見することができます。

Svelteプロジェクトでの sv check の使用例をいくつか紹介します。これらの例は、実際の開発ワークフローで役立つシナリオに基づいています。

1. 単純なチェック実行

npx sv check

これは最も基本的な使用方法で、プロジェクト内のすべてのSvelteファイルをチェックし、エラーや警告を表示します。

2. 特定のディレクトリをワークスペースとして指定

npx sv check --workspace src

これにより、src ディレクトリ内のSvelteファイルのみがチェックされます。大規模なプロジェクトで特定の領域だけに集中したい場合に便利です。

3. ウォッチモードでの実行

npx sv check --watch

ファイルの変更を監視し、変更があるたびに自動的にチェックを実行します。開発中にリアルタイムでフィードバックを得るのに役立ちます。

4. 特定のtsconfigファイルを指定

npx sv check --tsconfig tsconfig.app.json

複数のTypeScript設定ファイルがある場合、特定の設定ファイルを指定してその設定に基づいてチェックを実行できます。

5. 特定のフォルダを無視

npx sv check --no-tsconfig --ignore "tests,mock-data,dist"

特定のディレクトリ（この例では tests、mock-data、dist）を検査から除外します。

6. 特定の警告を無視またはエラーとして扱う

npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_aria_attributes:error"

未使用のCSSセレクタに関する警告を無視し、ARIAアクセシビリティの問題をエラーとして扱うように設定します。

7. 機械可読形式での出力

npx sv check --output machine > svelte-check-results.json

結果を機械可読形式で出力し、ファイルにリダイレクトします。これはCI/CDパイプラインや自動化スクリプトでの使用に適しています。

8. JavaScript/TypeScriptファイルを除外

npx sv check --no-tsconfig

Svelteファイルのみをチェックし、通常のJavaScriptやTypeScriptファイルの型チェックをスキップします。

9. 警告でビルドを失敗させる（CIでの使用）

npx sv check --fail-on-warnings

警告が存在する場合にもプロセスを失敗させます。CI/CDパイプラインで厳格な品質基準を適用したい場合に有用です。

10. 複数のオプションを組み合わせた実際の例

npx sv check --workspace src --tsconfig tsconfig.json --watch --compiler-warnings "css_unused_selector:ignore" --diagnostic-sources "js,svelte"

この例では:

• src ディレクトリをワークスペースとして使用
• tsconfig.json の設定を使用
• ファイルの変更を監視
• 未使用のCSSセレクタの警告を無視
• JavaScriptとSvelteの診断のみを実行し、CSSの診断をスキップ

このようなオプションの組み合わせは、特に大規模なプロジェクトやチーム開発で特定の要件に合わせてツールをカスタマイズする際に役立ちます。

おわりに 

今日は、 SvelteKitのリファレンスについて解説しました。