VSCodeだけで簡易ローカルサーバーを建てて、javascriptのデバッグもどきを行なう

2022-04-05

VisualStudioCode JavaScript

いきさつとか趣旨とか

.html+.js だけのワリとシンプルな開発
でも import , export 構文を用いているので純ローカル環境(file://~)だとCORS制約が発生する
解決の為に(簡素な)ローカルサーバー機能が必要なのだが、そのサーバー&起動もVSCode内の物だけで完結させてみたかった
別にVSCodeでブレークポイントとか貼れなくても良い ← (！？ｗｗ)
実用的かと言われるとすごく微妙なんだけど、まぁ個人的な備忘録という事で...

プロジェクト構成例

📁 /MyProject
 ├ 📁 /.vscode 
 │  ├ launch.json
 │  ├ setting.json
 │  └ tasks.json
 ├ viewer.html ← ローカルサーバーで開きたい
 └ script.js

準備1. ローカルサーバー的な拡張機能を導入

Live Server が有名どころらしいけど、今回はMicrosoft 純正の Live Preview っての入れてみました。
( サーバー主体というよりは、ページのリアルタイムレンダリング/プレビュー用みたいなもので、そもそも執筆時はテスト版 です )
https://github.com/microsoft/vscode-livepreview/blob/main/README.md

準備2. `setting.json` から、一部機能を切る

Live Server インストール後、プロジェクトフォルダのエクスプローラ上から
構成ファイル viewer.html を右クリックにて、
LivePreview: OpenAutomatically on Server Start を選択。
こうする事で /.vscode/settings.json が(存在しなかった場合)新規で作られる。

setting.json を適当に弄る。
いずれも Live Preview 拡張機能に関する設定ですね

{
    // サーバ起動関係のメッセージをオフ
    "livePreview.showServerStatusNotifications": false ,
    // デフォルトデバッグ時に表示させる プロジェクトフォルダ内 html
    "livePreview.defaultPreviewPath": "/viewer.html",
    // 編集毎の自動リアルタイムプレビュー・レンダリング表示オフ
    "livePreview.autoRefreshPreview": "Never",
}

Live Preview 独自の設定項目など細かく見たければこちらから。
https://github.com/microsoft/vscode-livepreview/blob/main/package.json

構成

「VSCodeでデバッグ = VSCodeプロセスでChromeを起動する」のと同義みたいなものだったので、
VSCodeを噛ませたデバッグ自体はしない路線で進めました。 ( もうそれ半分タイトル詐欺じゃん )

方針は以下の通り

F7キー で発動 ( F5キー のデバッガを咬ませたくないので )
このため、launch.json の出番ナシ
通常プロセスで Chromeを開く ( =普段使いChromeの新しいタブで表示 )
Live Preview のローカルサーバーも同時に起動
http://127.0.0.1:3000/viewer.html を開く

「VSCodeのデバッガを使いたい訳ではなく(←!?) VSCodeでコーディングはするけど、
　開くのは通常Chromeのプロセスが良いし、更にワンポチでVSCode内部のローカルサーバーを起動してくれると嬉しい」

...みたいな意図ですね。

実現のため、以下複数のファイルを弄る運びとなりました

/.vscode/tasks.json
keybindings.json
/.vscode/settings.json

1. tasks.json を編集

以下の3タスクを定義

(VSCodeを咬ませていない通常プロセスで)Chromeを指定URLで開く
Live Preview でローカルサーバーを起動
上記の 1 と 2 をまとめて呼び出す処理

// tasks.json
{
    "version": "2.0.0",
    "tasks": [
        // 定義1. ChromeでURLを開く
        {
            "label": "Show viewer.html",
            "type": "shell",
            "windows":{
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
                "args": [ "http://127.0.0.1:3000/viewer.html", ]
            },
            "presentation": {
                "echo": true,
                "reveal": "never",
                "focus": false,
                "panel": "dedicated",
                "showReuseMessage": false,
                "clear": false
            }
        }
        , // 定義2. Live Preview でローカルサーバーを起動
        {
            "label": "Run Live Preview Server",
            "type": "Live Preview",
            "args": [],
            "isBackground": true,
            "presentation": {
                "echo": true,
                "reveal": "never",
                "focus": false,
                "panel": "dedicated",
                "showReuseMessage": false,
                "clear": false
            }
        }
        , // 定義1+2をまとめたものを、定義3 として用意
        {
            "label": "サーバー起動 & Chromeでviewer.html 表示",
            // ※ 配列中の要素は、1,2のラベル名と全く同じにする事
            "dependsOn": ["Run Live Preview Server", "Show viewer.html"],
            "presentation": {
                "echo": false,
                "reveal": "never",
                "focus": false,
                "panel": "shared",
                "showReuseMessage": false,
                "clear": false
            }
        }
    ]
}

2. keybindings.json を編集

こちらは C:\Users\[ユーザー名]\AppData\Roaming\Code\User\keybindings.json が編集対象となります。
( /.vscode/keybindings.json を個別に用意したところで、効果が得られない事に注意 )

アクセス手順
1. Ctrl+Shift+P でコマンドパレットを開く
2. key とか shortcuts とかテキトーに入力する
3. 候補に出てくる Preferences: Open Keyboard Shortcuts (JSON) を選択
4. 開かれた keybindings.json に追記編集

記載内容(意図)は以下の通り

F7キー を指定
特定のタスクを実行させる
args は tasks.json 側で定義しておいたものと全く同じ名前を指定
when式は後述の 一意な構成設定コンテキスト を指定

↑↓ 意訳：「F7キーを押したら、whenの条件を満たした時にだけ、argsで指定した固有タスクを実行してね」

// keybindings.json
[
  { 
    "key": "f7",
    "command":"workbench.action.tasks.runTask",
    "args": "サーバー起動 & Chromeでviewer.html 表示",
    "when": "config.workspaceKeybindings.someProjectName.enabled"
  },
]

↑ args の対応値(名前)が、先程編集した tasks.json の定義3と全く同じになっているのが分かると思います

3. settings.json に追記

冒頭で紹介・編集した settings.json に新しく1行分追記します

// settings.json (抜粋)
{
    // サーバ起動関係のメッセージをオフ
    "livePreview.showServerStatusNotifications": false ,
    // デバッグ時、デフォルトで表示させる プロジェクトフォルダ内 html
    "livePreview.defaultPreviewPath": "/viewer.html",
    // 編集毎の自動リアルタイムプレビュー・レンダリング表示オフ
    "livePreview.autoRefreshPreview": "Never",
    // ↓ ここを追記
    "workspaceKeybindings.someProjectName.enabled": true,
    // ↑ ここを追記
}

あとは `F7キー` ポチればええんや

👍 上記手順を踏めば準備OK

これで、概ね自分が意図した通りの処理がキーひとつで通るようになりました。

【解説】プロジェクト固有のショートカットキー設定になる理屈

執筆時点のVSCodeでは "プロジェクトごとに直接キーバインドを紐づける機能" は用意されていないものの、
先程の編集手順を踏む事で、疑似的にその効果を得られます。

以下仕組み解説

/.vscode/settings.json の中で workspaceKeybindings.someProjectName.enabled という
独自の構成設定コンテキストを設け、値を true とします。
/.vscode/settings.json ファイルはプロジェクト配下でのみ効果を発揮しますから、
言い換えれば、ここで定義された workspaceKeybindings.someProjectName.enabled は
プロジェクト固有の存在 とも言えます。
更に、VSCodeユーザー設定の一つ keybindings.json に記載した F7キー 処理の when式で、
workspaceKeybindings.someProjectName.enabled が true の時のみ、
当該ショートカットキー設定が有効になる条件を仕込みました。

以上の事から「workspaceKeybindings.someProjectName.enabled : true が定義されているプロジェクトファイルでのみ、
VSCode本体に割り当てた F7キー 独自のキーバインドが有効になる」ので、
事実上 プロジェクト固有のキーバインド(ショートカット設定)の実現に繋がる ...という寸法です。

このテクニック、色々ググってたらこちらで見つけました。天才じゃん...
https://stackoverflow.com/questions/48945319/a-keybindings-json-per-workspace-in-visual-studio-code

その他記載ネタ・メモ

launch.json

VSCodeが咬んだ(経由した)Chromeを立ち上げて、
file://～で viewer.html を開いてデバッグ

// launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type":"chrome",
            "request": "launch",
            "name": "Open viewer.html",
            "file": "${workspaceFolder}/viewer.html",
        }
    ]
}

上記のローカルアドレス版
サーバが立ってなければ当然無意味だし、この構成だけだと都合よくサーバーも立ててはくれない

// launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type":"chrome",
            "request": "launch",
            "name": "Open viewer.html",
            "url": "http://127.0.0.1:3000/viewer.html",
        }
    ]
}

また、preLaunchTask / postDebugTask という、
デバッガ起動の直前または終了後に任意のタスクを起動するドチャクソ便利なものが launch.json 内で使える。
知っておくと良いかも✨

tasks.json

こちらはタスクに関するメモ

通常プロセスの Chrome で指定URLを開く。

// tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "クローム起動",
            "type": "shell",
            "windows":{
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
                "args": [ "https://packetroom.net" ]
            }
        }
    ]
}

Live Preview のサーバー起動

// tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run Live Preview Server", // 自由
            "type": "Live Preview", // 固定
            "args": [],
            "isBackground": true,
            // 必要に応じて色々
            "presentation": {
                "echo": true,
                "reveal": "never",
                "focus": false,
                "panel": "dedicated",
                "showReuseMessage": false,
                "clear": false
            }
        }
    ]
}

プロジェクトを開いた時、無条件で viewer.html を開いてアクティブ化させる

VSCode起動直後だと Live Preview タスクプロバイダが即座に有効化されず、サーバーを起動できなかったため。
"shell" を使って viewer.html を即時開こうとしているのがミソ。
また、 "runOptions" で、VSCode起動時に即発動するようにしている
( 自動起動なので、一度手動でタスク実行をしつつ、通知からセルフ許可する必要アリ )

// tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label":"open & active viewer.html tab",
            "type":"shell",
            "command":"code .\\viewer.html",
            "detail": "viewer.html タブをアクティブにして Live Preview タスクプロバイダを即時有効化",
            // 一度手動でタスク実行をして、通知から許可する (コマンドパレット候補に挙がらなかった)
            "runOptions": {
                "runOn": "folderOpen"
            },
            "presentation": {
                "echo": false,
                "reveal": "never",
                "focus": false,
                "panel": "dedicated",
                "showReuseMessage": false,
                "clear": false
            }
        }
    ]
}

おまけ
デバッグとは直接関係ないものの、ビルド時のタイミングでも使えるそうな。
至れり尽くせりなオプション...

    // ※ 抜粋
    // ...略...
    "group": {
        "kind": "build",      // ビルドタスクとして認識させる
        "isDefault": true     // Cmd + Shift + B で即実行
    }

所感

想定の100倍くらい奥が深かった。

「○○の操作時、××とか△△を□□のタイミングで実行したい」 ...みたいな時に滅茶苦茶使える方法なだけあって、
掘り下げようとすると、その自由度の高さ・設定項目の多さにビックリしますた。

code.visualstudio.com - launch.json
https://code.visualstudio.com/docs/editor/debugging#_launch-configurations

code.visualstudio.com - keybindings.json
https://code.visualstudio.com/docs/getstarted/keybindings#_advanced-customization

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

オチ

まぁ、ここまでやって結局使い勝手が微妙だったので使ってないんですが (=_=)

プロフィール

このサイトについて

VSCodeだけで簡易ローカルサーバーを建てて、javascriptのデバッグもどきを行なう

いきさつとか趣旨とか

プロジェクト構成例

準備1. ローカルサーバー的な拡張機能を導入

準備2. `setting.json` から、一部機能を切る

構成

1. tasks.json を編集

2. keybindings.json を編集

3. settings.json に追記

あとは `F7キー` ポチればええんや

【解説】プロジェクト固有のショートカットキー設定になる理屈

その他記載ネタ・メモ

launch.json

tasks.json

所感

オチ

プロフィール

このサイトについて

VSCodeだけで簡易ローカルサーバーを建てて、javascriptのデバッグもどきを行なう

いきさつとか趣旨とか

プロジェクト構成例

準備1. ローカルサーバー的な拡張機能を導入

準備2. setting.json から、一部機能を切る

構成

1. tasks.json を編集

2. keybindings.json を編集

3. settings.json に追記

あとは F7キー ポチればええんや

【解説】プロジェクト固有のショートカットキー設定になる理屈

その他記載ネタ・メモ

launch.json

tasks.json

所感

オチ

準備2. `setting.json` から、一部機能を切る

あとは `F7キー` ポチればええんや