Zenn
🚀

【VSCode】開発環境を自動で立ち上げる

2022/04/03に公開
VS Code
shell
frontend
効率化
tech

突然ですが世の中には2種類のエンジニアがいます。

開発環境をずっと立ち上げっぱなしにするエンジニアと毎回落とすエンジニアです。

自分を含む毎回落とすエンジニアにとって、開発環境を立ち上げる度に複数のターミナルを開き、それぞれでコマンドをたくさん打たないといけないのは苦痛です🥺

そこでこの記事ではVSCodeでプロジェクトを開いたときに開発環境を自動で立ち上げる方法をご紹介します！

おまけで紹介するAlfredまで設定するとコマンド一発で開発環境が立ち上がるようになり、こんな感じになります！

ではいってみましょう！

対象読者

  • 開発環境を毎回落とすエンジニア
  • VSCodeを使っている
  • 開発環境を立ち上げるためのコマンドがたくさんあって毎回打つのがめんどくさい

環境

  • VSCode: 1.66.0
  • macOS Monterey

Hello Custom Task!

VSCodeでプロジェクトを開くと自動でコマンドを実行するにはCustom tasksを使います。

習うよりなれろ。
まずはHello Custom Taskとターミナルに表示させるタスクを定義してみましょう。

タスクを定義する

  1. 空のディレクトリを準備し、その中にタスクを定義する.vscode/tasks.json を作成します。
$ mkdir ~/hellovscode-tasks                    # ディレクトリを作成
$ mkdir ~/hellovscode-tasks/.vscode            # .vscodeディレクトリを作成
$ touch ~/hellovscode-tasks/.vscode/tasks.json # タスクを定義するtasks.jsonを作成
  1. 作成したプロジェクトをvscodeで開きます。(※ codeコマンドのインストールが必要です)
$ code ~/hellovscode-tasks
  1. カスタムタスクを定義します。1で作成した .vscode/tasks.json を以下のように編集します。
{
  "version": "2.0.0",
  "tasks": [
    {
      // 表示名
      "label": "Hello Custom Task",
      // タスクのタイプ。shellかprocessを指定
      "type": "shell",
　　　 // 🌟 実行するコマンド
      "command": "echo Hello Custom Task", 
      // windowsで実行された場合にデフォルトのプロパティを上書く
      "windows": {
        "command": "echo Hello Custom Task(Windows)"
      },
　　　 // タスクが所属するグループ。test、build、noneのいずれかを指定
      "group": "none",
　　　 // 実行結果の表示方法について指定
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": {
	// 🌟 プロジェクトを開くと同時に実行する
        "runOn": "folderOpen"
      }
    }
  ]
}

重要なのは🌟 をつけた箇所です。

  • command: echo Hello Custom Task: 実行するコマンドを定義
  • runOptions.runOn: folderOpen フォルダが開いた際にコマンドを実行

(その他のプロパティの詳細を知りたい方はtasks.jsonのスキーマ をご覧ください。)

⚠️これでフォルダを開き直せば実行されるのかと思いきや実行されません。⚠️
ここがハマりポイントで、一度手元でタスクを実行し、folderOpen時の実行を手動で許可する必要があります。

タスクの実行を許可する

  1. Cmd+P > Tasks: Run Task を選択します。
    1
  2. 定義したHelloCustomTask を選択します。
  3. すると画面右下にフォルダを開いた時の自動実行を許可するかのトーストが出てくるので、Allow and run を選択して、実行を許可します。

以上でタスクが定義できました！

一度VSCodeを閉じて、再度

code ~/hellovscode-tasks

でHello Custom Taskが実行されるか試してみましょう。

以下のようにタスクが実行されれば成功です🎉

実際のプロジェクトで試してみよう

カスタムタスクの基本が理解できたところで、実際のプロジェクトで試してみましょう。

今回は自分が個人開発しているプロダクト日程調整のニッテの開発環境を例にご説明します。

自身の開発環境のコマンドに置き換えて、試してみてください！

それぞれのコマンドのタスクを定義する

開発環境立ち上げ時に以下の2つのコマンドの実行が必要です。

  • yarn run serve: サーバー立ち上げ
  • yarn ngrok: ngrokの立ち上げ

そこで、まずはこれら2つのコマンドを実行するタスクを.vscode/tasks.json に定義します。

{
  "version": "2.0.0",
  "tasks": [
    // yarn serveコマンドの定義
    {
      "label": "yarn serve",
      "type": "shell",
      "command": "yarn serve",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    // yarn ngrokコマンドの定義
    {
      "label": "yarn ngrok",
      "type": "shell",
      "command": "yarn ngrok",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

dependsOnを用いて複数のタスクを1つのタスクにまとめる

続いて、作成したタスクを1つにまとめるタスクを定義します。
複数のタスクを1つにまとめるにはdependsOn プロパティを使用します。
まとめたいタスクのラベルを配列で記述することで、複数のタスクをまとめて実行できます。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "yarn serve",
      ...
    },
    {
　　　 "label": "yarn ngrok",
      ...
    },
　　　// 複数タスクを1つにまとめる
    {
      "label": "dev",
      "type": "shell",
      // まとめたいタスクのラベルを配列で記述
      "dependsOn": [
        "yarn serve",
        "yarn ngrok"
      ],
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

あとは先ほどと同様に一度Tasks: Run Task から実行を許可します。
最後に実際に立ち上がるか確認してみましょう！
定義したタスクが全て実行され、フォルダを開くだけで開発環境が立ち上げればOKです💡

(おまけ) Alfredと繋いでさらに楽にしてみよう

既にかなり楽になりましたが、自分にとってはまだいちいちターミナルを開いて

code path/to/project

と打つのが面倒です。

そこで、AlfredのWorkflowを使って、もっと楽にできるようにします。

  1. AlfredのWorkflowsタブの画面右下の+ > Blank Workflow を選択
    a
  2. 名前などを入れてCreate
    b
  3. Workflowのビューの中で右クリック > Inputs > Keyword を選択
    c
  4. Workflowを呼び出すためのキーワードを入力。引数は不要なので、No Argumentに変更して Save を選択
    e
  5. キーワードノードから出ている突起を選択 > Acttions > RunScript
    f
  6. VSCodeプロジェクトを開くスクリプトを書いてSave
    スクリプト例(ついでにブラウザでローカルホストも開くようにしました。)
# バックエンド
/usr/local/bin/code /Users/matsumoto.kazuya/ghq/github.com/WombatTechnology/nitte-backend/functions
# フロントエンド
/usr/local/bin/code /Users/matsumoto.kazuya/ghq/github.com/WombatTechnology/nitte-frontend
# http://localhost:8080をブラウザで開く
/usr/bin/open -a "/Applications/Google Chrome.app" 'http://localhost:8080'

これで冒頭の動画のように全て開発環境がコマンド一発で立ち上がるようになりました！
やったね🎉

参考リンク

https://code.visualstudio.com/docs/editor/tasks#_custom-tasks

宣伝

マネーフォワードでは一緒に働けるエンジニアを募集しています。

Discussion