【Windows向け】VSCodeのタスクで指定したページをChromeで開けるようにする

はじめに

Webプログラミングをしている時、開発作業を再開する都度手動でブラウザを起動し対象のページにアクセスするという作業は、一回一回はそこまで大変ではないですが回数を重ねる度に面倒になってくるかと思われます。
また、シークレットモードで確認作業をしたいことも多々あるかと思われます。
そこで、VSCodeのタスクで指定されたURLを新しく開くことができるようにします。また、VSCodeからローカルサーバーも起動できるようにします。

環境

• OS：Windows 11
• エディター：Visual Studio Code
• ブラウザ：Google Chrome
  • 「C:\Program Files\Google\Chrome\」にインストールされているものとする
• （ローカルサーバー：XAMPPのApache）
  • XAMPPが「C:\xampp\」にインストールされているものとする
• バッチファイル等のエンコード：UTF-8

1. Apacheを起動するバッチファイルを作る

バッチファイルはVSCodeがアクセスできればどこでもいいかとは思われますが、今回はわかりやすさの観点から

（対象のプロジェクトのルートディレクトリ）\.vscode\bat\

の中に作成します。

.vscode/bat/apache_start.bat

cd "\xampp"
cmd /c "\xampp\apache_start.bat"
exit

XAMPPがインストールされたパスに移動し、コマンドプロンプトでxamppのインストールパス内にあるapache_start.batを実行します。
単純にapache_start.batを実行してしまうと、VSCodeの設定次第ではコマンドプロンプト（cmd）以外（PowerShellなど）で実行されてしまい、PowerShellで実行された場合はエラーが出るため強制的にcmdでバッチファイルを実行するようにします。

2. Chromeを新しく起動するバッチファイルを作る

.vscode/bat/chrome_open.bat

"\Program Files\Google\Chrome\Application\chrome.exe" %1 --profile-directory="Default" --incognito --new-window

このバッチファイルは、最初のコマンドライン引数で指定されたURLを新しいシークレットモードのウィンドウで開くものです。

また、複数のユーザープロファイルが存在する場合、デフォルトユーザーのシークレットモードとして新しいウィンドウを開きます。

--profile-directoryの値を変更するとどのプロファイルでウィンドウを開くかを変更できます。
また--profile-directory="プロファイル名"を除去すると、最後に手動でタブを切り替えたウィンドウのプロファイルとして処理が実行されます。
（シークレットモードのウィンドウがない状態でリンクの右クリックメニューから「シークレットモードで開く」を選択した時と同じような挙動です）

--incognitoが指定されている場合、シークレットモードでURLが開かれます。

--new-windowが指定されている場合、既にChromeが開かれている場合でも新しいウィンドウでURLが開かれます。

3. 【オプション】XAMPPを起動するバッチファイルを作る

.vscode/bat/apache_start.bat

cd "\xampp"
start "" \xampp\xampp-control.exe
exit

必要があればこちらも作成してください。

4. ローカルサーバーの準備を整えるバッチファイルを作る

.vscode/bat/launch.bat

chcp 65001
start "【自動実行】Apache" /min apache_start.bat
start "【自動実行】xampp" xampp_start.bat

新しいターミナルとして1.と3.のバッチファイルを起動します。

コマンドプロンプトのタイトル指定にコードページの差異で文字化けする文字が含まれていない場合は冒頭のchcp 65001は不要です。

「3. 【オプション】XAMPPを起動するバッチファイルを作る」のバッチファイルを作っていない場合は「【自動実行】xampp」と記載された行を除去してください。

5. VSCodeのタスクを設定する

ローカルサーバーを起動するタスク

以下の記述をtasks.jsonのtasksの配列内に追加します。

.vscode/tasks.json

{
    "label": "ローカルサーバー起動",
    "group": "none",
    "type": "process",
    "options": {
        "cwd": "${workspaceFolder}\\.vscode\\bat\\"
    },
    "command": "${workspaceFolder}\\.vscode\\bat\\launch.bat",
    "presentation": {
        "reveal": "always",
        "panel": "shared",
        "revealProblems": "onProblem",
        "close": true
    },
    "problemMatcher": []
}

指定されたURLをChromeで新しく開くタスク

以下のような記述をtasks.jsonのtasksの配列内に追加します。

.vscode/tasks.json

{
    "label": "トップページを表示",
    "group": "none",
    "type": "process",
    "command": "${workspaceFolder}\\.vscode\\bat\\chrome_open.bat",
    "args": [
        "ここに開きたいページのURLを指定する"
    ],
    "presentation": {
        "reveal": "always",
        "panel": "shared",
        "revealProblems": "onProblem",
        "close": true
    },
    "problemMatcher": []
}

導入してみての実感

今回の方式を取り入れる前は手動でローカルサーバーを起動したり、CHromeのシークレットモードを起動したり、手打ちでURLを打ち込んだりという工程が作業再開の度に入り、色々な画面を切り替える必要があったためたいへんに面倒だったのですが、導入後はVSCodeからそれらの工程を実行したり、よく使うURLをChromeで表示したりする工程ができるようになったことで作業効率が大幅に上がりました。