Zenn
📔

VSCodeのlaunch.jsonおよびtask.jsonで使用可能な変数

2022/06/22に公開
VS Code
tech

公式に変数一覧が記載されているけどサイドの目次から飛べないために知らない人も多いのではないだろうか？
https://code.visualstudio.com/docs/editor/variables-reference

標準の変数はlaunch.json、task.jsonで変数を使用可能な位置でCtrl+SpaceでIntelliSenseを呼び出せば一覧が表示される。

  • ${workspaceFolder}
  • ${workspaceFolderBasename}
  • ${file}
  • ${fileWorkspaceFolder}
  • ${relativeFile}
  • ${relativeFileDirname}
  • ${fileBasename}
  • ${fileBasenameNoExtension}
  • ${fileDirname}
  • ${fileExtname}
  • ${cwd}
  • ${lineNumber}
  • ${selectedText}
  • ${execPath}
  • ${defaultBuildTask}
  • ${pathSeparator}

標準外の変数として ${extensionInstallFolder:publisher.extension} も一覧に表示される。
このpublisher.extensionの部分を拡張機能の識別子にすればその拡張機能がインストールされているフォルダのリンクが値となる。

拡張機能のページの横にある識別子(例:ygsiro.cpp-sub-snippets)

ctrl+spaceを押しても出てこない変数として ${env:環境変数} や {config:VSCode設定} というのもある。

例えば${env:PATH}とすればパソコンの環境変数のPATHの値が変数の値となります。

${config:editor.fontSize}とすればVSCodeの設定のエディタのフォントサイズが変数の値となります。

定数で満足できない場合はコマンドを使用することも可能です。
${command:commandID}で commandID に文字列を返すコマンドを指定すればその結果が値として設定されます。

ユーザー入力の変数が使用したい場合は${input:variableID}という手段もあります。
variableIDは変数名を指定します。

ユーザー入力形式には現在３種類設定があります。

  • promptString ユーザーから文字列を取得するための入力ボックスを表示します。
  • pickString ユーザーがいくつかのオプションから選択できるようにするクイックピックドロップダウンを表示します。
  • command 任意のコマンドを実行します。

ただしユーザー入力の変数を使用する場合、追加のオプションが必要です。

  • promptString
    • description: 入力欄に表示される説明文を記載します。
    • default: 入力欄が空の時にデフォルトの変数を使用します。
    • password: trueに設定すると、パスワード入力のように入力された値を表示しない形で入力します。
  • pickString
    • description: 入力欄に表示される説明文を記載します。
    • options: ユーザーが選択するためのオプションの配列。
    • default: 入力欄が空の時にデフォルトの変数を使用します。
  • command
    • command: 可変補間で実行中のコマンド。
    • args: コマンドの実装に渡される引数一覧
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "ng g",
      "type": "shell",
      "command": "ng",
      "args": ["g", "${input:componentType}", "${input:componentName}"]
    }
  ],
  //オプションはこちらで設定する
  "inputs": [
    {
      "type": "pickString",
      "id": "componentType",
      "description": "What type of component do you want to create?",
      "options": [
        "component",
        "directive",
        "pipe",
        "service",
        "class",
        "guard",
        "interface",
        "enum"
      ],
      "default": "component"
    },
    {
      "type": "promptString",
      "id": "componentName",
      "description": "Name your component.",
      "default": "my-new-component"
    }
  ]
}

commandの場合は以下のような形となります。

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run specific test",
      "program": "${workspaceFolder}/${input:pickTest}"
    }
  ],
  "inputs": [
    {
      "id": "pickTest",
      "type": "command",
      "command": "extension.mochaSupport.testPicker",
      "args": {
        "testFolder": "/out/tests"
      }
    }
  ]
}

設定ファイルの内容も参照できるのは便利そう

Discussion