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

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

背景

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

CLIツール（sv）

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

sv check の使用方法

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

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

Node 16以降が必要です。

トラブルシューティング

プリプロセッサの設定やその他のトラブルシューティングについては、language-toolsのドキュメントを参照してください。

機械可読出力

--outputをmachineまたはmachine-verboseに設定すると、CIパイプラインやコード品質チェックなどの機械による読み取りが容易な形式で出力されます。

各行は新しいレコードに対応します。行は単一のスペース文字で区切られた列で構成されています。すべての行の最初の列には、モニタリング目的で使用できるミリ秒単位のタイムスタンプが含まれています。2番目の列は「行タイプ」を示し、これに基づいて後続の列の数と種類が異なる場合があります。

最初の行はSTARTタイプで、ワークスペースフォルダ（引用符で囲まれている）が含まれています。例：

1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"

任意の数のERRORまたはWARNINGレコードが続く場合があります。これらの構造は同一で、出力引数によって異なります。

引数がmachineの場合、ファイル名、開始行と列番号、およびエラーメッセージが表示されます。ファイル名はワークスペースディレクトリからの相対パスです。ファイル名とメッセージはどちらも引用符で囲まれています。例：

1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
1590680326778 WARNING "imported-file.svelte" 0:37 "Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`"

引数がmachine-verboseの場合、ファイル名、開始行と列番号、終了行と列番号、エラーメッセージ、診断コード、コードの人間が理解しやすい説明、および診断のソース（例：svelte/typescript）が表示されます。ファイル名はワークスペースディレクトリからの相対パスです。各診断はログのタイムスタンプが先頭に付いたndjson行として表されます。例：

1590680326283 {"type":"ERROR","fn":"codeaction.svelte","start":{"line":1,"character":16},"end":{"line":1,"character":23},"message":"Cannot find module 'blubb' or its corresponding type declarations.","code":2307,"source":"js"}
1590680326778 {"type":"WARNING","filename":"imported-file.svelte","start":{"line":0,"character":37},"end":{"line":0,"character":51},"message":"Component has unused export property 'prop'. If it is for external reference only, please consider using `export
const prop`","code":"unused-export-let","source":"svelte"}

出力は、チェック中に検出されたファイル、エラー、警告の総数をまとめたCOMPLETEDメッセージで締めくくられます。例：

1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS

アプリケーションで実行時エラーが発生した場合、このエラーはFAILUREレコードとして表示されます。例：

1590680328921 FAILURE "Connection closed"

クレジット

• svelte-checkの基礎を築いたVueのVTI

よくある質問（FAQ）

Q: なぜ特定のファイル（例えばステージングされたファイルのみ）をチェックするオプションがないのですか？

A: svelte-checkはチェックを有効にするために、プロジェクト全体を「見る」必要があります。例えば、コンポーネントのプロパティの名前を変更したが、そのプロパティが使用されている場所を更新しなかった場合 – 使用箇所はすべてエラーになりますが、変更されたファイルだけをチェックすると、これらのエラーを見逃してしまいます。

まとめ

Svelteプロジェクトでのsv checkコマンドの出力形式とトラブルシューティングについて説明しています。特に以下の点が重要です：

1. 機械可読出力：CIパイプラインやコード品質チェックツールで使用するための構造化された出力形式を提供します。
   • machine形式：シンプルな列形式の出力
   • machine-verbose形式：より詳細なJSON形式の出力
2. 出力の構造：
   • すべての行はタイムスタンプで始まる
   • START：チェック開始を示す
   • ERROR/WARNING：発見された問題
   • COMPLETED：チェック完了の統計情報
   • FAILURE：実行時エラー
3. FAQ：特定のファイルだけをチェックするオプションがない理由として、プロジェクト全体のコンテキストでの検証が必要である点が説明されています。

この機能は特に自動化されたビルドシステムやCI/CDパイプラインで役立ちます。例えば、ビルドプロセスの一部としてsv checkを実行し、エラーや警告の数に基づいてビルドを成功または失敗させることができます。また、機械可読出力を解析して品質メトリクスを収集したり、開発チームにフィードバックを提供したりする自動化ツールを構築することも可能です。

おわりに 

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