SvelteKit関連のVSCodeの設定

2023/08/04

VSCode で、SvelteKit のデフォルトの拡張機能を入れています。これの設定内容を ChatGPT に解説してもらったのでメモです。

Svelte: Ask-to-enable-TS-plugin

VS Code が起動するたびに、TypeScript プラグインを有効にするかどうかを尋ねます。TypeScript を使って Svelte を開発する場合に便利です。

Svelte: Enable-TS-plugin

Svelte ファイル内で TypeScript/JavaScript の IntelliSense(コード補完や定義ジャンプなどの機能)を提供する TypeScript プラグインを有効にします。

Svelte > Language-server: Debug

Svelte の言語サーバー(エディタと Svelte プロジェクトの間のコミュニケーションを行うプログラム)のロギングを詳細にします。通常はデバッグの際に使用します。

Svelte > Language-server: Ls-path

言語サーバーの実行可能ファイルへのパスを指定します。カスタムバージョンの言語サーバーを使用する場合や、“svelte-language-server” npm パッケージをインストールした場合に設定します。

Svelte > Language-server: Port

言語サーバーを起動する際のポートを指定します。デバッグやプロファイリングのためにプロセスに接続する際に使用します。

Svelte > Language-server: Runtime

言語サーバーを起動するために使用する Node の実行可能ファイルへのパスを指定します。ネイティブモジュール(例:node-sass)を使っている場合に便利です。

Svelte > Plugin > CSS › Color Presentations: Enable

CSS の色選択機能を有効にします。

Svelte > Plugin > CSS > Completions: Emmet

CSS の Emmet 自動補完を有効にします。

Svelte > Plugin > CSS Completions: Enable

CSS の自動補完を有効にします。

Svelte > Plugin > CSS › Diagnostics: Enable

CSS に対する診断メッセージを有効にします。

Svelte > Plugin > CSS > Document Colors: Enable

CSS のドキュメントカラー機能を有効にします。

Svelte > Plugin > CSS > Document Symbols: Enable

CSS のドキュメントシンボル(クラス名や ID など)機能を有効にします。

Svelte > Plugin > CSS: Enable

CSS プラグインを有効にします。

Svelte > Plugin > CSS: Globals

グローバル変数をチェックする CSS ファイルを指定します。これらの変数は CSS の補完に追加されます。カンマ区切りのファイルパスか、ワークスペースのルートに対する相対的な glob を指定します。

Svelte > Plugin › CSS Hover: Enable

CSS のホバー情報(マウスオーバー時に表示される情報)を有効にします。

Svelte > Plugin > CSS Selection Range: Enable

CSS の選択範囲機能を有効にします。

Svelte > Plugin > HTML > Completions: Emmet

HTML の Emmet 自動補完を有効にします。

Svelte > Plugin > HTML > Completions: Enable

HTML の自動補完を有効にします。

Svelte > Plugin > HTML > Document Symbols: Enable

HTML のドキュメントシンボル(タグ名など)機能を有効にします。

Svelte > Plugin > HTML: Enable

HTML プラグインを有効にします。

Svelte > Plugin > HTML > Hover: Enable

HTML のホバー情報を有効にします。

Svelte > Plugin > HTML Linked Editing: Enable

HTML のリンク編集(開始タグと終了タグの同時編集など)を有効にします。

Svelte > Plugin > HTML Tag Complete: Enable

HTML のタグ自動クロージング(タグの自動補完)を有効にします。

Svelte > Plugin > Svelte > Code Actions: Enable

Svelte のコードアクション(コードのリファクタリングやエラー修正などのアクション)を有効にします。

Svelte > Plugin › Svelte: Compiler Warnings

無視するか、エラーとして扱う Svelte コンパイラの警告コードを設定します。

Svelte > Plugin > Svelte Completions: Enable

Svelte の自動補完を有効にします。

Svelte > Plugin > Svelte: Default Script Language

新しいスクリプトタグを生成するときに使用するデフォルトの言語を設定します。

Svelte > Plugin > Svelte Diagnostics: Enable

Svelte の診断メッセージを有効にします。

Svelte > Plugin > Svelte: Enable

Svelte プラグインを有効にします。

Svelte > Plugin > Svelte > Format > Config: Print Width

コードが折り返される最大行幅を設定します。これは Prettier のオプションで、Prettier 拡張がインストールされている場合、このオプションは無視され、その拡張の対応するオプションが代わりに使用されます。また、Prettier の設定ファイルがある場合も、このオプションは無視されます。

Svelte > Plugin > Svelte > Format > Config: Single Quote

可能な場合にはシングルクォートをダブルクォートの代わりに使用するかどうかを制御します。この設定も、Prettier の設定ファイルや拡張が存在する場合には無視されます。

Svelte > Plugin > Svelte > Format > Config: Svelte Allow Shorthand

コンポーネントの属性名とその値が同じ場合に、短縮形を許可するかどうかを制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。

Svelte > Plugin > Svelte > Format > Config: Svelte Bracket New Line

複数行にわたる HTML 要素の終了記号 (>) を新しい行に置くかどうかを制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。

Svelte > Plugin > Svelte > Format > Config: Svelte Indent Script And Style

<script> および <style> タグ内のコードをインデントするかどうかを制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。

Svelte > Plugin > Svelte > Format > Config: Svelte Sort Order

options, scripts, markup, styles のキーを結合し、その順番を制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。

Svelte > Plugin > Svelte > Format > Config: Svelte Strict Mode

より厳格な HTML シンタックスを使用するかどうかを制御します。この設定も、Prettier の設定ファイルが存在する場合には無視されます。

Svelte > Plugin › Svelte > Format: Enable

Svelte(CSS および JS を含む)のフォーマットを有効にします。この拡張機能を通じていくつかのフォーマットオプションを設定できますが、Prettier の設定ファイルが存在する場合には無視されます。

Svelte > Plugin › Svelte > Hover: Enable

Svelte のホバー情報(マウスカーソルを要素の上に置いたときに表示される情報)を有効にします。

Svelte > Plugin › Svelte > Rename: Enable

Svelte ファイルの名前変更/移動機能を有効にします。

Svelte > Plugin > Svelte > Selection Range: Enable

Svelte の選択範囲機能を有効にします。

Svelte > Plugin › TypeScript Code Actions: Enable

TypeScript のコードアクション(コードのリファクタリングやエラー修正などのアクション)を有効にします。

Svelte > Plugin > TypeScript Completions: Enable

TypeScript の自動補完を有効にします。

Svelte > Plugin > TypeScript Diagnostics: Enable

TypeScript の診断メッセージを有効にします。

Svelte > Plugin > TypeScript> Document Symbols: Enable

TypeScript のドキュメントシンボルを有効にします。これは、現在のファイル内のシンボル(クラス、関数、変数など)に対するナビゲーションを提供します。

Svelte > Plugin > TypeScript: Enable

TypeScript プラグインを有効にします。これは、TypeScript に対するシンタックスハイライトや自動補完などの機能を提供します。

Svelte > Plugin > TypeScript > Hover: Enable

TypeScript のホバー情報を有効にします。これにより、マウスカーソルをコードの上に置くと、その部分の情報がポップアップ表示されます。

Svelte > Plugin > TypeScript Selection Range: Enable

TypeScript の選択範囲を有効にします。これは、特定のコードブロックの選択を容易にする機能です。

Svelte > Plugin > TypeScript Semantic Tokens: Enable

TypeScript のセマンティックトークン(セマンティックハイライト)を有効にします。これは、コードの意味に基づいて色分けを提供し、読解を助けます。

Svelte > Plugin > TypeScript > Signature Help: Enable

TypeScript のシグネチャヘルプ(パラメーターヒント)を有効にします。これにより、関数のパラメーター情報がポップアップ表示され、どのように関数を使用すべきかを理解するのに役立ちます。

Svelte > Trace: Server

VS Code と Svelte 言語サーバー間の通信を追跡します。これはデバッグや問題解決に有用な情報を提供します。

Svelte > Ui > Svelte Kit Files Context Menu: Enable

SvelteKit ファイルのコンテキストメニューを表示します。“always”を選ぶと常に表示され、“never”を選ぶと常に非表示になり、“auto”を選ぶと SvelteKit プロジェクト内でのみ表示されます。このメニューから、新しい SvelteKit ファイルを生成することができます。

Rust🦀, Network⚡, PostgreSQL🐘, Unity🎮

Tags

rust  (9)
rocket  (7)
svelte  (5)
c++  (4)
ethereum  (3)
solidity  (3)
vscode  (3)
sqlx  (3)
glfw  (2)
opengl  (2)
nestjs  (2)
graphql  (2)
render  (2)
wsl2  (2)
truffle  (1)
goerli  (1)
geth  (1)
hardhat  (1)
nft  (1)
gui  (1)
tetris  (1)
next.js  (1)
jwt  (1)
nextauth  (1)
node.js  (1)
prisma  (1)
passport  (1)
urql  (1)
codegen  (1)
mdsvex  (1)
markdown  (1)
tmux  (1)
nvim  (1)
axum  (1)
atcoder  (1)
vim  (1)
pacman  (1)
tracing  (1)
Cursor  (1)
VSCode  (1)
PHP  (1)
Laravel  (1)