VS Codeの使えそうな機能を何回かに分けて記事に整理していく。
今回は、変数の参照について深堀り。
環境
- Windows 11 Home 23H2
- Visual Studio Code 1.91
変数の参照
VS Codeは、launch.jsonやtasks.jsonからの変数の参照をサポートしている。
変数には以下の種類があり、これらはデバッグやタスク実行時に評価、置換される。
- 定義済み変数…VS Codeに事前定義されている変数
- 環境変数…マシンの環境変数
- VS Codeの設定変数…VS Codeのユーザ、ワークスペース、フォルダーなどの設定に使用する変数
- コマンド変数…VS Codeで実行可能なコマンドを表す変数
- 入力変数…ユーザが入力、選択した値を表す変数
定義済み変数の一部と環境変数を覚えておけば、ほとんどのケースはカバーできると思われる (たぶん)
定義済み変数
VS Codeで事前定義されている変数を、以下を前提とした例を含めて一覧にまとめる (よく使われそうなものだけ、青下線で示している)
- ワークスペース /home/your-username/your-project を開いている
- ファイル /home/your-username/your-project/folder/file.ext 開いている
| 定義済み変数 | 説明 | 例 |
| ${userHome} | ユーザのホームフォルダのパス | /home/your-username |
| ${workspaceFolder} | VS Codeで開いているフォルダのパス | /home/your-username/your-project |
| ${workspaceFolderBasename} | VS Codeで開いているフォルダ名 | your-project |
| ${file} | 現在開いているファイル | /home/your-username/your-project/folder/file.ext |
| ${fileWorkspaceFolder} | 現在開いているファイルのワークスペースフォルダ | /home/your-username/your-project |
| ${relativeFile} | 現在開いているファイルのワークスペースフォルダから見た相対パス | folder/file.ext |
| ${relativeFileDirname} | 現在開いているファイルのフォルダのワークスペースフォルダから見た相対パス | folder |
| ${fileBasename} | 現在開いているファイルのベース名 | file.ext |
| ${fileBasenameNoExtension} | 現在開いているファイルの拡張子無しベース名 | file |
| ${fileExtname} | 現在開いているファイルの拡張子 | .ext |
| ${fileDirname} | 現在開いているファイルのフォルダのパス | /home/your-username/your-project/folder |
| ${lineNumber} | 現在開いているファイルのカーソル位置の行数 | |
| ${selectedText} | 現在開いているファイルの選択テキスト | |
| ${execPath} | VS Codeの実行ファイル(Code.exe)のパス | |
| ${pathSeparator} | OSが使用するファイルパスのセパレータ | Windows: \ Mac: / Linux: / |
| ${/} | ${pathSeparator}の省略形 | 上に同じ |
ルートフォルダ名をコロン(“:”)付きで変数に追加すると、兄弟ルートを表すことができる。
例.
以下のような複数ルートのワークスペースの場合、
/home/your-username/your-project-c/Client
/home/your-username/your-project-s/Server
次のように表すことができる。
${workspaceFolder:Client} -> /home/your-username/your-project-c/Client
${workspaceFolder:Server} -> /home/your-username/your-project-s/Server環境変数
環境変数を参照するには、以下の構文を使用する。
${env:<変数名>}
例. ユーザ名を参照
${env:USERNAME}
VS Codeの設定変数
VS Codeの設定変数を参照するには、以下の構文を使用する。
${config:<設定変数>}
例. エディタのフォントサイズを参照
${config:editor.fontSize}
コマンド変数
コマンド変数として参照するには、以下の構文を使用する。
コマンドIDで指定したコマンドの実行結果が、変数と置き換わる。
${command:<コマンドID>}
例. Node.jsのプロセスIDを参照
${command:extension.pickNodeProcess}
入力変数
ユーザの入力値を、入力変数として参照するには、launch.jsonやtasks.jsonにinput属性を定義し、以下の構文を使用する。
${input:<入力値>}
inputs属性
入力変数の属性は下表の通り。
| 属性 | 説明 |
| id | 変数ID ${input:<変数ID>}として参照できる |
| type | 以下の入力種別から1つを指定する。 ・promptString: 値を入力 ・pickString: 候補から値を選択 ・command: コマンド実行 指定したtypeに応じて、追加属性を指定する必要あり (各リンク先参照) |
promptStringの追加属性
入力ボックスを表示し、ユーザに値を入力させる。
| 属性 | 説明 |
| description | 入力に関する情報 |
| default | ユーザが何も入力しなかった場合のデフォルト値 |
| password | パスワードのように入力値を非表示にする true: 表示しない、false: 表示する |
pickStringの追加属性
ドロップダウンを表示し、ユーザに値を選択させる。
| 属性 | 説明 |
| description | 入力に関する情報 |
| options | 選択可能な候補の配列。 { label, value } 形式で定義すると、labelを表示する |
| default | ユーザが何も入力しなかった場合のデフォルト値。optionsで指定した要素の1つである必要がある |
commandの追加属性
| 属性 | 説明 |
| command | 実行するコマンド |
| args | コマンドに渡す引数 |
例. inputs属性を使って、Angular CLIを使用する
// tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "ng g",
"type": "shell",
// 実行コマンド
// ng g ${input:componentType} ${input:componentName}
"command": "ng",
"args": ["g", "${input:componentType}", "${input:componentName}"]
}
],
"inputs": [
{
// 1. componentType変数を、
// 2. ユーザがoptionsの候補から選択可能な形式で定義する
// 3. 省略した場合は、defaultの値が適用される
// 4. 入力値の説明は、description参照
"id": "componentType",
"type": "pickString",
"description": "What type of component do you want to create?",
"options": [
"component",
"directive",
"pipe",
"service",
"class",
"guard",
"interface",
"enum"
],
"default": "component"
},
{
// 1. componentName
// 2. ユーザが入力可能な形式で定義する
// 3. 省略した場合は、defaultの値が適用される
// 4. 入力値の説明は、description参照
"id": "componentName",
"type": "promptString",
"description": "Name your component.",
"default": "my-new-component"
}
]
}各変数の値の確認方法
各変数の値を確認するには、以下のようなecho コマンドを実行するタスクを作成して、実行すれば良い。
例. ${workspaceFolder}の値を確認する
// tasks.json
{
"version": "2.0.0",
"tasks": [
{
// 1. "echo"タスクにて、
// 2. shellを利用して、
// 3. echoコマンドを実行し、値を表示する
"label": "echo",
"type": "shell",
"command": "echo ${workspaceFolder}"
}
]
}参考
