🦔

VSCodeで開発サーバーを自動起動する

2022/02/05に公開

VSCodeを開くたびに、開発サーバー起動のコマンド（例えばnpm run dev）を毎回手動で実行していて面倒だなと思っていたのですが、調べたところ、プロジェクトフォルダが開かれたタイミングで開発サーバーを自動起動させることができたので、手順を書いておきます。

手順

1. VSCodeのタスクを作成する

VSCodeには、タスクという機能があるのですが、この機能を使います。タスクは、tasks.jsonというファイルに記述します。このファイルは、プロジェクトフォルダ直下の.vscodeディレクトリの中に配置します。

内容は、以下のように記述します。

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "label": "npm: dev",
      "runOptions": {
        "runOn": "folderOpen" // ここがポイント
      }
    }
  ]
}

上記の例では、npm run dev というコマンドを実行するタスクを作成したことになります。

そして、今回のポイントは"runOn": "folderOpen"の部分です。
これを書くことで、プロジェクトフォルダを開いたときに、自動でこのタスクが実行されます。

2. 自動実行を許可する

次に、自動実行を許可します。

コマンドパレット（command + shift + P）を開いて、
Tasks: Manage Automatic Tasks in Folder
を入力（選択）して、
Allow Automatic Tasks in Folder
を選択します。

これで完了です。

VSCodeを一旦閉じてから再度開くと、TERMINALの部分に、指定したコマンドが自動実行されているはずです。

おわりに

今回は、開発サーバーの自動起動ということで書きましたが、実際には任意のコマンドを実行できるので、色々なことに応用できそうです。