【VSCode】よく使うコマンドをtasks.jsonでショートカットさせよう

sanagi
2024-09-10
2024-09-10

こんにちは、sanagiです!

普段開発するとき、あのコマンドなんだったっけ?とか、このコマンドよく使うんだけど毎回打つの面倒くさいなぁ、、となることが良くあると思います。

そういった際、VSCodeのtasks.jsonが便利なので紹介したいと思います。

 

tasks.jsonに登録したらどんな感じになるの?

tasks.jsonにコマンドを登録すると、「Ctrl + Shift + b」のショートカットキーから呼び出せるようになります。便利ですね。

<Ctrl + Shift + b を実行すると、上部窓にタスクの選択肢が出る>
<タスク(echo)を選択するとターミナルでコマンド実行される>

tasks.jsonを作ってみよう

早速、tasks.jsonを作ってみましょう。

①まず、VSCode上で「Ctrl + Shift + b 」を実行します。

この時注意してほしいのが、VSCodeで開いているワークスペースです。
登録したいコマンドが特定のプロジェクトで使うものである場合、そのプロジェクトフォルダをワークスペースとして開き直してください。
(例えば、pythonコマンドはpython・djangoプロジェクト等で実行すると思うので、適切なプロジェクトフォルダをワークスペースとして選択してください。)

実行すると、VSCodeの上部窓に「No build task to run found. Configure Build Task...」(「実行するビルド タスクが見つかりません。ビルドタスクを構成...」みたいな意味)と出てくると思うので、選択してください。

②次に「Create tasks.json file from template」(テンプレートからtasks.jsonファイルを作成する)を選択してください。

③次に「others」を選択してください。

そしたら、以下のように「.vscode」フォルダ配下にtasks.jsonファイルが生成されると思います。一旦作成まではこれで完了です。

tasks.jsonにコマンドを登録してみよう

コマンド登録のjson(項目説明あり)を書いてみました。

以下のような項目がありますが、基本的な内容で良ければ、presentation内の項目は特に必要ないかもしれません。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo", // タスクのラベル。タスクを識別するための名称。
      "detail": "Helloと出力する", // タスクの説明。
      "type": "shell", // タスクのタイプ。通常は "shell"や"process"などを指定。
      "command": "echo", // 実行するコマンド。
      "args": ["Hello"], // コマンドの引数。
      "group": "build", // ここでbuildを選択するとビルドタスクとして認識。
      "presentation": {
        "reveal": "always", // 出力パネルの表示タイミング。
        "echo": true, // コマンドのエコーを表示するかどうか。
        "focus": false, // タスク実行後に出力パネルにフォーカスを移すかどうか。
        "panel": "shared" // 出力パネルの共有設定。
      }
    }
  ]
}

登録するコマンドを増やす場合は、以下のようにtasksの配列にjsonを追加する形になります。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo", // タスクのラベル。タスクを識別するための名称。
      "detail": "Helloと出力する", // タスクの説明。
      "type": "shell", // タスクのタイプ。通常は "shell"や"process"などを指定。
      "command": "echo", // 実行するコマンド。
      "args": ["Hello"], // コマンドの引数。
      "group": "build", // ここでbuildを選択するとビルドタスクとして認識。
      "presentation": {
        "reveal": "always", // 出力パネルの表示タイミング。
        "echo": true, // コマンドのエコーを表示するかどうか。
        "focus": false, // タスク実行後に出力パネルにフォーカスを移すかどうか。
        "panel": "shared" // 出力パネルの共有設定。
      }
    },
// 以下、追加のタスク
    {
      "label": "django runserver",
      "detail": "django サーバ起動",
      "type": "shell",
      "command": "python",
      "args": [
        "manage.py",
        "runserver",
        "0:8000"
      ],
      "group": "build", 
    }
  ]
}

commandとargsで項目を分けなくても"command": "python manage.py runserver 0:8000"と一続きに書いてもタスク実行することができます。

おわり

どうでしたか?

私は同じコマンドを何回も調べたりするくらい、コマンド覚えるのが苦手なので、便利な機能だなと感じています。

tasks.jsonをプロジェクト内で共有することで、チーム全体の効率化にも繋がると思うので、ぜひ試してみてください!