VSCode で、SvelteKit のデフォルトの拡張機能を入れています。これの設定内容を ChatGPT に解説してもらったのでメモです。
VS Code が起動するたびに、TypeScript プラグインを有効にするかどうかを尋ねます。TypeScript を使って Svelte を開発する場合に便利です。
Svelte ファイル内で TypeScript/JavaScript の IntelliSense(コード補完や定義ジャンプなどの機能)を提供する TypeScript プラグインを有効にします。
Svelte の言語サーバー(エディタと Svelte プロジェクトの間のコミュニケーションを行うプログラム)のロギングを詳細にします。通常はデバッグの際に使用します。
言語サーバーの実行可能ファイルへのパスを指定します。カスタムバージョンの言語サーバーを使用する場合や、“svelte-language-server” npm パッケージをインストールした場合に設定します。
言語サーバーを起動する際のポートを指定します。デバッグやプロファイリングのためにプロセスに接続する際に使用します。
言語サーバーを起動するために使用する Node の実行可能ファイルへのパスを指定します。ネイティブモジュール(例:node-sass)を使っている場合に便利です。
CSS の色選択機能を有効にします。
CSS の Emmet 自動補完を有効にします。
CSS の自動補完を有効にします。
CSS に対する診断メッセージを有効にします。
CSS のドキュメントカラー機能を有効にします。
CSS のドキュメントシンボル(クラス名や ID など)機能を有効にします。
CSS プラグインを有効にします。
グローバル変数をチェックする CSS ファイルを指定します。これらの変数は CSS の補完に追加されます。カンマ区切りのファイルパスか、ワークスペースのルートに対する相対的な glob を指定します。
CSS のホバー情報(マウスオーバー時に表示される情報)を有効にします。
CSS の選択範囲機能を有効にします。
HTML の Emmet 自動補完を有効にします。
HTML の自動補完を有効にします。
HTML のドキュメントシンボル(タグ名など)機能を有効にします。
HTML プラグインを有効にします。
HTML のホバー情報を有効にします。
HTML のリンク編集(開始タグと終了タグの同時編集など)を有効にします。
HTML のタグ自動クロージング(タグの自動補完)を有効にします。
Svelte のコードアクション(コードのリファクタリングやエラー修正などのアクション)を有効にします。
無視するか、エラーとして扱う Svelte コンパイラの警告コードを設定します。
Svelte の自動補完を有効にします。
新しいスクリプトタグを生成するときに使用するデフォルトの言語を設定します。
Svelte の診断メッセージを有効にします。
Svelte プラグインを有効にします。
コードが折り返される最大行幅を設定します。これは Prettier のオプションで、Prettier 拡張がインストールされている場合、このオプションは無視され、その拡張の対応するオプションが代わりに使用されます。また、Prettier の設定ファイルがある場合も、このオプションは無視されます。
可能な場合にはシングルクォートをダブルクォートの代わりに使用するかどうかを制御します。この設定も、Prettier の設定ファイルや拡張が存在する場合には無視されます。
コンポーネントの属性名とその値が同じ場合に、短縮形を許可するかどうかを制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。
複数行にわたる HTML 要素の終了記号 (>) を新しい行に置くかどうかを制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。
<script>
および <style>
タグ内のコードをインデントするかどうかを制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。
options, scripts, markup, styles のキーを結合し、その順番を制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。
より厳格な HTML シンタックスを使用するかどうかを制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。
Svelte(CSS および JS を含む)のフォーマットを有効にします。この拡張機能を通じていくつかのフォーマットオプションを設定できますが、Prettier の設定ファイルが存在する場合には無視されます。
Svelte のホバー情報(マウスカーソルを要素の上に置いたときに表示される情報)を有効にします。
Svelte ファイルの名前変更/移動機能を有効にします。
Svelte の選択範囲機能を有効にします。
TypeScript のコードアクション(コードのリファクタリングやエラー修正などのアクション)を有効にします。
TypeScript の自動補完を有効にします。
TypeScript の診断メッセージを有効にします。
TypeScript のドキュメントシンボルを有効にします。これは、現在のファイル内のシンボル(クラス、関数、変数など)に対するナビゲーションを提供します。
TypeScript プラグインを有効にします。これは、TypeScript に対するシンタックスハイライトや自動補完などの機能を提供します。
TypeScript のホバー情報を有効にします。これにより、マウスカーソルをコードの上に置くと、その部分の情報がポップアップ表示されます。
TypeScript の選択範囲を有効にします。これは、特定のコードブロックの選択を容易にする機能です。
TypeScript のセマンティックトークン(セマンティックハイライト)を有効にします。これは、コードの意味に基づいて色分けを提供し、読解を助けます。
TypeScript のシグネチャヘルプ(パラメーターヒント)を有効にします。これにより、関数のパラメーター情報がポップアップ表示され、どのように関数を使用すべきかを理解するのに役立ちます。
VS Code と Svelte 言語サーバー間の通信を追跡します。これはデバッグや問題解決に有用な情報を提供します。
SvelteKit ファイルのコンテキストメニューを表示します。“always”を選ぶと常に表示され、“never”を選ぶと常に非表示になり、“auto”を選ぶと SvelteKit プロジェクト内でのみ表示されます。このメニューから、新しい SvelteKit ファイルを生成することができます。