LoginSignup
5
5
@umuy(yumu)

VSCodeでHSP3開発を超快適にしよう！ [2023-2024年]

Last updated at Posted at 2023-04-07

2024年2月14日の最新情報に更新しました！　→追記

概要

HSP3 (Hot Soup Processor) を未だに初期装備のＨＳＰスクリプトエディタ（以下、標準エディタ）で開発している方に向けて、VSCodeで超快適な開発環境を作ります！

↓ こうなります（demo.hspを実行している画面）
最終的な環境

最終環境

執筆時点(2024/02/14)で構築できた最終的な環境。

  • HSP3.6
    • hspc v3.5.1
    • knowbug v2.2.0
  • VSCode v1.86.1
    • Japanese Language Pack for Visual Studio Code v1.85.2024020709
    • language-hsp3 v1.2.0
    • HSP3 アナライザー・ミニ (LSP) v0.5.1
    • Code Runner v0.12.1
    • language-hsp3-icon

VSCodeとは

VSCode (正式名称: Visual Studio Code) とは、Microsoftが開発している高機能かつ無料のコードエディタです。
とにかく使いやすくて、見た目もかっこいい！

Let's 環境構築

0. 前提

  • HSPをインストールしていること（最新のHSP3.6を推奨）
  • VSCodeの要件を満たしていること
    • OSがWindows 10, 11 1
    • 500MBの空き容量

1. VSCodeをインストール

  1. https://code.visualstudio.com/ からインストーラーをダウンロード
  2. 実行してインストール

初回起動時は「Get Started with VSCode」の画面が出ますが、テーマ選択やちょっとした説明なので無視で構いません。

2. 日本語化

最初はUIが英語なので、日本語にします。

  1. 左にあるサイドバーの一番下のアイコンをクリックし (またはCtrl+Shift+X)、拡張機能のビューを開く
  2. 上部の検索欄に japanese と入力
  3. 一番上に「Japanese Language Pack for Visual Studio Code」という拡張機能が出てくるので「Install」ボタンを押す
    Japanese Language Packのインストール画面
  4. 右下に出るポップアップの「Change Language and Restart」ボタンを押して、VSCodeを再起動する

3. 拡張機能をインストール

VSCodeでHSPの開発ができるよう、次の3つの拡張機能を入れます。

  1. language-hsp3
  2. HSP3 アナライザー・ミニ (LSP)
  3. Code Runner

インストール方法は、前項の日本語化のときと同じです。拡張機能のビューを開き、検索欄に拡張機能の名前を入力して「インストール」ボタンを押してください。

3-1. language-hsp3

HSPの基本的な開発を可能にする拡張機能。

機能一覧
  • シンタックスハイライト（コードの色分け）
  • コンパイル+実行
  • 実行ファイル作成
  • ヘルプ起動
  • アウトライン
  • if文などの折りたたみ

なお、コンパイル+実行と実行ファイル作成は、内部で「hspc」という外部のコマンドラインツールを起動して行う仕組みになっています。

3-2. HSP3 アナライザー・ミニ (LSP)

HSPの開発に便利機能を追加する拡張機能。どれも標準エディタにはない機能です。

機能一覧

シンボルとは 2

  • セマンティックハイライト（コード内のシンボルの色分け）
  • アウトライン（language-hsp3より多くのシンボルに対応）
  • 定義へ移動（シンボルの使用箇所から定義箇所に飛べる）
    • ginger.txtにファイル名を書いておくと#include先のファイルも開ける
  • 参照へ移動（シンボルの定義箇所から使用箇所すべてに飛べる）
  • シンボルの名前の一括変更
  • ホバー（マウスカーソルをのせると、HSPのヘルプなどが表示される）
    screen命令のヘルプ
  • 入力補完（入力途中にシンボル名の候補が表示される）
    meの入力補完
  • シグネチャヘルプ（命令や関数の呼び出しを書いている途中に、引数の情報が表示される）
    mes命令のシグネチャヘルプ

その他、細かい機能はマーケットプレイスを参照。

3-3. Code Runner

様々な言語のコードを実行できる拡張機能。
language-hsp3によるHSPのコード実行と実行ファイル作成には欠点があるため、その欠点を解消できるこれで代替します。

詳細

まず、language-hsp3の欠点は以下の2つです。

  1. 処理後に強制的に出力ウィンドウにフォーカスされる（そのため、いちいちエディタにフォーカスし直さなくてはならない）
  2. 保存されていないファイルの変更が反映されない
    ※標準エディタは現在のコードを「hsptmp」ファイルにコピーして処理しているため、ファイル保存していなくても変更が反映されます。それに対し、language-hsp3は開いているファイルを直接処理するため、一度ファイルを保存する必要があります。

Code Runnerでは、以下のように解決できます。

  1. そもそも出力ウィンドウにフォーカスされない
  2. 処理前にファイル保存するオプションがあるのでそれをオンにする

実際のコード実行と実行ファイル作成について。
Code Runnerの仕組みは言語ごとにコード実行のコマンドを定義し、編集中の言語に合ったコマンドが実行できるというものです。（例: .batなら cmd /c hoge.bat）
language-hsp3の仕組みは内部でhspcを呼び出しているだけで、コード実行などの処理自体はhspcが行っています。
そのため、Code Runnerで同じようにhspcを実行すればlanguage-hsp3と同じような処理ができるというわけです。

4. hspcを導入

hspcとは、HSPのコード実行や実行ファイル作成ができるコマンドラインツールです。
通常は拡張機能language-hsp3が使うものですが、前項の説明通りこの記事では代わりにCode Runnerが使います。

  1. hspcを https://dev.onionsoft.net/seed/info.ax?id=1392 からダウンロード
  2. 中にあるhspc.exeをHSPのインストールディレクトリ3 にコピーするだけ

5. 設定

VSCode本体と拡張機能の設定をします。

  1. 左下にある歯車アイコンをクリックして「設定」を選択（またはCtrl+,）
  2. 右上にあるファイルアイコン「設定 (JSON) を開く」をクリック
  3. settings.jsonが開かれるので、以下に書き換え
    ※【HSPのインストールディレクトリ】 は、HSPのインストールディレクトリ3 のパスにCtrl+Hですべて置き換えてください。パスの区切り文字は \\ なことに注意（例: C:\\hsp36）
    settings.json
    {
    // 【おすすめ】空白文字を表示（行末にある不要な空白や、インデントのスペースとタブの混在が発見しやすくなります）
    "editor.renderWhitespace": "boundary",
    // 【おすすめ】ファイル保存時に最終行を単一の空行にする
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    // HSPの規定の文字コードをShift-JISにし、インデントをタブにする
    "[hsp3]": {
        "files.encoding": "shiftjis",
        "editor.insertSpaces": false
    },
    // 以下、拡張機能の設定
    "hsp3-analyzer-mini.hsp3-root": "【HSPのインストールディレクトリ】",
    "language-hsp3.helpman.path.local": "【HSPのインストールディレクトリ】\\hsphelp\\helpman.exe",
    "code-runner.clearPreviousOutput": true,
    "code-runner.customCommand": "chcp 65001 > nul && 【HSPのインストールディレクトリ】\\hspc -aCD2mP $fullFileName",
    "code-runner.enableAppInsights": false,
    "code-runner.executorMap": {
        "hsp3": "chcp 65001 > nul && 【HSPのインストールディレクトリ】\\hspc -aCDdRw -oobj $fullFileName"
    },
    "code-runner.saveFileBeforeRun": true,
    "code-runner.showExecutionMessage": false,
    "code-runner.showRunCommandInEditorContextMenu": false,
    "code-runner.showRunCommandInExplorerContextMenu": false
}
  4. Ctrl+Sで上書き保存

VSCode上で各行の文字列にマウスカーソルを重ねることで、それぞれの設定の説明を見ることができます。

UTF-8で書く場合

HSPのソースコードをUTF-8で書きたい場合に

settings.jsonに以下2つの手順を行ってください。

  1. 規定の文字コードをUTF-8にするため、"[hsp3]"内のfiles.encodingをutf8に変更、または行自体を削除。
  2. Shift-JISのソースコードも開けるように、"files.autoGuessEncoding": true（文字コード自動判別）を追加。
    ※ただし、Shift-JISのソースコードでも日本語文字が少ないとWindows-1252に誤認識されるので注意。
コードの書き方

UTF-8で書かれたソースコードを実行するには、UTF-8対応のhsp3utfランタイムを使う必要があります。
コードの先頭に "#include "hsp3utf.as" と書くだけです。

  • 「絵文字」を描画する場合の注意点。HSPデフォルトフォントの「FixedSys」には絵文字が含まれておらず表示できないため、必ず「ＭＳ ゴシック」など別のフォントに変更してください。
    emoji.hsp
    #include "hsp3utf.as
; font "ＭＳ ゴシック", 100 // これがないと表示されない
mes "😊"

Coder Runnerのコマンド解説

意味が分かる方向け

hspcのオプションの詳細は、hspc同梱のReadme.mdかReadme.pdfを参照。

code-runner.customCommand

Code Runnerのカスタムコマンド。この記事ではHSPの実行ファイル作成をするのに使っています。
2つのコマンドを&&で繋げています。

  • chcp 65001 > nul コンソールのコードページをUTF-8に変更。このときの標準出力は邪魔なので破棄する。
    ※標準出力はShift-JISなのにVSCodeの出力ウィンドウはUTF-8らしく、hspcの出力が文字化けするため。
  • hspcの実行
    • -a ソースファイルのUTF-8自動判定
    • -C カレントディレクトリをソースファイルのディレクトリに移動
    • -D2 中間ファイルとpackfileを削除
    • -m 実行ファイル自動作成とiconinsツールによるリソース挿入
    • -P packfileを生成
    • $fullFileName ソースファイルのフルパス（Code Runnerの専用引数）
code-runner.executorMap

Code Runnerの言語に関連させるコマンド。これでHSP実行をしています。
language-hsp3で定義される言語hsp3に対して、2つのコマンドを&&で繋げてセットしています。

  • chcp 65001 > nul (前述)
  • hspcの実行
    • -a (前述)
    • -C (前述)
    • -D 中間ファイルを削除
    • -d デバッグ情報付与
    • -R 同期実行（HSPが終了するまで待機）
    • -w デバッグウィンドウ表示
    • -oobj 中間ファイルの名前をobjに変更
      ※デフォルトの中間ファイル名は、ソースファイル名の拡張子を.axに変えた名前となります。しかしHSPの不具合で、UTF-8対応のhsp3utfランタイムにマルチバイト文字（要は日本語）を含む中間ファイル名を渡すと「Startup failed.」と出て実行に失敗してしまいます。つまり、hsp3utfランタイムでファイル名に日本語を含むソースファイルを実行できるようにするためobjで固定しています。なお、この不具合はテスト版のHSP3.7β7で修正されているようです。
    • $fullFileName (前述)

なお、-Rではなく-rで非同期実行した場合、中間ファイルが削除されないようです。

6. キーボードショートカットを変更

VSCode本体と拡張機能のキーボードショートカットを変更します。

  1. 左下にある歯車アイコンをクリックして「キーボード ショートカット」を選択（またはCtrl+Kの後にCtrl+S）
  2. 右上にあるファイルアイコン「キーボード ショートカット (JSON) を開く」をクリック
  3. keybindings.jsonが開かれるので、以下に書き換え
    keybindings.json
    [
    // 【おすすめ】タブ移動を使用した順ではなくタブ順にする
    {
        "key": "ctrl+tab",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+shift+tab",
        "command": "workbench.action.previousEditor"
    },
    // HSP実行
    {
        "key": "f5",
        "command": "code-runner.run",
        "when": "editorLangId == 'hsp3'"
    },
    {
        "key": "ctrl+k f5",
        "command": "-language-hsp3.run",
        "when": "editorLangId == 'hsp3'"
    },
    // HSP実行ファイル作成
    {
        "key": "ctrl+f9",
        "command": "code-runner.runCustomCommand",
        "when": "editorLangId == 'hsp3'"
    },
    {
        "key": "ctrl+f9",
        "command": "-language-hsp3.make",
        "when": "editorLangId == 'hsp3'"
    },
    // HSPヘルプ起動
    {
        "key": "f1",
        "command": "language-hsp3.helpman.search",
        "when": "editorLangId == 'hsp3'"
    },
    {
        "key": "ctrl+f1",
        "command": "-language-hsp3.helpman.search",
        "when": "editorLangId == 'hsp3'"
    },
]
  4. Ctrl+Sで上書き保存

F5とF1は既存のVSCode標準コマンドと重複しますが、問題ありません。F5のデバッグ関係はHSPの開発をするときには使わないため、F1の「すべてのコマンドの表示」はCtrl+Shift+Pで代用できるためです。

7. HSPのファイルアイコンを追加

VSCodeではタブやエクスプローラーにファイルアイコンが表示されるのですが、HSPのアイコンは表示されません。
そのため、HSPのファイルアイコンを追加する拡張機能（筆者自作）をインストールします。

  1. https://github.com/yumunet/language-hsp3-icon/releases から、language-hsp3-icon-0.0.1.vsixをダウンロード
  2. VSCodeの拡張機能のビュー (Ctrl+Shift+X) に、ダウンロードした.vsixをドラッグ＆ドロップ
  3. VSCodeを再起動して反映させる

.hspと.asファイルを別々のアイコンにしたい場合

手順が難しいので上級者向け（長文注意）

最低限、次で使用するソフトの使い方や、JSONのフォーマットの知識が要ります。

アイコンを用意する

HSPのインストールディレクトリにあるファイルからアイコンを取り出します。
icoをpngに変換できる「＠icon変換」と、exeからアイコンを取り出せる「Resource Hacker」の2つを使います。同等の機能があるのなら別のソフトでも構いません。

  • .hspのアイコン

    1. hspscr_icon.icoから、＠icon変換で256x256アイコンをpngで取り出す（hsp.pngで保存）

  • .asのアイコン

    1. hsed3.exeから、Resource Hackerで256x256アイコンを取り出す
    2. ico形式なので＠icon変換でpngに変換（as.pngで保存）

  • .hsのアイコン

    1. hdl.exeから、Resource Hackerで64x64アイコンを取り出す
    2. ico形式なので＠icon変換でpngに変換
    3. 背景が黒なのでてきとうな画像エディタで背景を透過させる（hs.pngで保存）
vscode-theme-seti (ビルトイン) の場合

VSCodeに標準で入っているファイルアイコンテーマのvscode-theme-seti (Seti (Visual Studio Code)) にアイコンを追加します。
アイコン設定の上書きはできないため、テーマを複製して直接改造します。
おそらくどのテーマでも同じことができるはずです。

  1. 【VSCodeのインストールディレクトリ】\resources\app\extensions\theme-setiのフォルダを丸々てきとうな場所にコピー
  2. コピーしたフォルダ名をtheme-seti-hspに変更
  3. 中のpackage.jsonを開く
  4. Shift+Alt+Fでフォーマット
  5. nameキーに vscode-theme-seti-hsp をセット
  6. displayNameキーに Seti File Icon Theme (HSP) をセット
  7. contributes > iconThemes > idキーに vs-seti-hsp をセット
  8. contributes > iconThemes > labelキーに Seti (Visual Studio Code) - HSP をセット
  9. 中のiconsフォルダに、前項で用意したアイコンをすべて入れる
  10. 中のicons\vs-seti-icon-theme.jsonを開く
  11. Shift+Alt+Fでフォーマット
  12. iconDefinitionsオブジェクト内に以下を追加 
    "_hsp": {
    "iconPath": "./hsp.png"
},
"_as": {
    "iconPath": "./as.png"
},
"_hs": {
    "iconPath": "./hs.png"
},
  13. fileExtensionsオブジェクト内に以下を追加 
    "hsp": "_hsp",
"as": "_as",
"hs": "_hs",
  14. hsオブジェクトが重複している警告が出るので、既存のオブジェクトを削除。またはコメントアウト
  15. theme-seti-hspフォルダを、VSCodeの拡張機能のフォルダにそのまま入れる
    ※拡張機能のフォルダ: コマンドパレット(Ctrl+Shift+P)にworkbench.extensions.action.openExtensionsFolderで開けます。
  16. コマンドパレット(Ctrl+Shift+P)にworkbench.action.selectIconThemeと入力してEnter
  17. Seti (Visual Studio Code) - HSP を選択
vscode-iconsの場合

vscode-icons (VSCode Icons) の場合は前項のvscode-theme-setiと違い、アイコンカスタマイズ用の設定が用意されているのでそれを使います。
前提として、すでにvscode-iconsをインストールし、ファイルアイコンテーマに設定しているものとします。
アイコンカスタマイズの詳細は、公式ドキュメントを参照。

  1. %APPDATA%\Code\Userにvsicons-custom-iconsフォルダを作成
  2. 中に、用意したアイコンをすべて入れる
  3. 各アイコンのファイル名の先頭にfile_type_を付ける
  4. VSCodeのsettings.jsonに以下を追加 
    "vsicons.associations.files": [
    {
        "icon": "hsp",
        "extensions": [
            "hsp"
        ],
        "format": "png"
    },
    {
        "icon": "as",
        "extensions": [
            "as"
        ],
        "format": "png"
    },
    {
        "icon": "hs",
        "extensions": [
            "hs"
        ],
        "format": "png"
    }
]
  5. コマンドパレット(Ctrl+Shift+P)にvscode-icons.regenerateIconsと入力してEnter

8. 右上の実行ボタンを非表示化

右上に出るlanguage-hsp3の実行ボタンを非表示にします（Code Runnerで代替していて使うことがないため）。4

  1. VSCodeでてきとうな.hspファイルを開く
  2. タブ欄右端の⋯を右クリック
  3. 出てきたメニューで「Run HSP program」のチェックを外す

番外編: knowbugを導入しよう

VSCodeとは無関係の番外編です。

knowbugはとても見やすいデバッグウィンドウです！
標準のデバッグウィンドウは窓から投げ捨ててknowbugを使いましょう。
この機会にどうぞ。

導入方法と機能の詳細は以下から。

標準エディタとの機能の対応

標準エディタ VSCode
実行+コンパイル F5 5
実行ファイル作成 Ctrl+F9
HSPキーワード検索 F1 またはマウスオーバー
ラベル・関数一覧 (F11) アウトライン (Ctrl+Shift+O)
リンクラベル ラベル上で 定義へ移動 (F12)
かんたん入力 ユーザースニペット
ウィンドウの分割 画面分割
置換 (Ctrl+R) Ctrl+H
先頭行に移動 (Ctrl+T) Ctrl+Home
最終行に移動 (Ctrl+B) Ctrl+End
指定行に移動 (Ctrl+J) Ctrl+G

なお、Code Runnerの仕様で同時に2つ以上のスクリプトは実行できないようになっています。
個人的には単一インスタンスの方が開発しやすいと思いますが、複数実行したい場合は設定のcode-runner.executorMapでhspcの-Rオプションを-rに変えてください。ただしその場合、中間ファイルが削除されなくなるので注意。

コード色分けの比較

VSCodeでは変数や数値にも色が付きます。ただ、命令とラベルの色は同じです。

標準エディタ VSCode
標準エディタのコード色分け VSCodeのコード色分け

※標準エディタのフォントは、VSCodeに合わせてConsolasの12pxにしています。

アウトライン

左サイドバーのエクスプローラー内には「アウトライン」というビューがあります。ここではシンボル2 が一覧になっており、選択するとそのシンボルがある行に飛べます。

また、Ctrl+Shift+Oでエディタ上からも飛べます。しかしその場合、後述する2つのアウトラインが混ざって表示されるので注意。

アウトライン

アウトラインは拡張機能によって作成され、「HSP3 アナライザー・ミニ (LSP)」と「language-hsp3」の2つが別々のアウトラインを作成しています。

表示されるシンボルやアイコンに違いがあり、language-hsp3ではシンボルの種類の表示やモジュールの階層表示もされます。なお、HSP3 アナライザー・ミニ (LSP) にはラベルが二重に表示される不具合があります（#11）。

HSP3 アナライザー・ミニ (LSP) language-hsp3
HSP3 アナライザー・ミニ (LSP) のアウトライン language-hsp3のアウトライン
上のアウトラインが表示されるコード

※一応コンパイルは通るようにしています。

.hsp
#module mod
	#deffunc deffunc int p1
		return
	#defcfunc defcfunc
		return
	#modfunc modfunc
		return
	#modcfunc modcfunc
		return
	#modinit
		return
	#modterm
		return
#global

#uselib "a.dll"
#func func "func"
#cfunc cfunc "cfunc"

#regcmd "","b.dll"
#cmd cmd 0

#usecom ICom "{00000000-0000-0000-0000-000000000000}"
#comfunc comfunc 0

#define DEFINE 0
#const CONST 1
#enum ENUM = 2
variable = 3
*label
詳細比較

シンボルが表示されるか（✅or❌）と、分類（これによりアイコンが変わる）の比較表です。

シンボル HSP3 アナライザー・ミニ (LSP) language-hsp3
#deffunc ✅ function ✅ method
#defcfunc ✅ function ✅ method
#func ✅ function ✅ method
#cfunc ✅ function ✅ method
#cmd ✅ constant ✅ method
#comfunc ❌ ✅ string
#define ✅ constant ✅ object
#const ✅ constant ✅ constant
#enum ✅ constant ✅ enumeration
#module ✅ module ✅ class
#modfunc ✅ method ✅6 method
#modcfunc ✅ method ✅6 method
#modinit ❌ ✅6 constructor
#modterm ❌ ✅6 method
ラベル ✅ constant ✅ key
変数 ✅ variable ❌
引数 ✅ constant ❌

なお、どちらのアウトラインも設定で無効化ができ、片方だけ使うことも可能です。

ユーザースニペット

標準エディタの「かんたん入力」に似た機能です。
使い方はこちらの記事がとても分かりやすいです。

参考までに、私が実際に使っているスニペットの1つです。

"16進数に変換": {
    "prefix": "toHex",
    "body": "strf(\"0x%08X\", $1)"
}

画面分割

メニューバーの 表示 > エディターレイアウト から行えます。
基本的にはタブ領域ごと増えていき分割数はほぼ無制限ですが、グループ内分割 (Ctrl+K Ctrl+Shift+\) で1つのタブ内でも分割できます（その場合は2分割まで）。

VSCodeの機能

標準エディタにはない、VSCodeの便利な機能を紹介します。
「HSP3 アナライザー・ミニ (LSP)」の項にも便利機能を書いているので一緒に参照してください。

エクスプローラー

左サイドバーの一番上のボタン (またはCtrl+Shift+E) から「エクスプローラー」のビューが開けます。VSCodeではフォルダーを開くことができ、このエクスプローラーでファイル操作ができます。

そのため、別のファイルを開くのにいちいちWindowsのエクスプローラーにウィンドウを切り替える必要がなくなります。操作感も同じです。

VSCodeのエクスプローラー

注意点として、ファイルを左クリックなどで切り替えると複数のタブが開くのではなく、1つのタブが再利用される仕様になっています。ファイルを編集したり、ダブルクリックや中クリックで開くと別のタブで開けます。

開いたタブはそのフォルダーごとにVSCodeが記憶するため、フォルダーを閉じても再度開ければすぐに当時の状態に戻ることができます。また、フォルダーごとにVSCodeの設定を変えることもできます。

タイムライン

左サイドバーのエクスプローラー内にはアウトラインと一緒に「タイムライン」というビューがあります。これはファイルが保存されるたびに差分が記録されるもので、その差分を見たり、その時点の内容を復元したりできます。

ファイルを一度閉じた後でもタイムラインは残るため、編集中に後から前の変更を見たくなったときなどのバックアップとして便利です。

VSCodeのタイムラインビュー

マルチカーソル

VSCodeには複数のカーソルを挿入できる「マルチカーソル」という機能があります。
反復的な編集、特にテキストデータの加工なんかをするのに便利です。

詳細はこちらの記事が分かりやすいです。

便利なキーボードショートカット17選

とりあえずこれさえ覚えておけば便利です。

コマンド ショートカット
行を上/下へ移動 Alt+↓ / ↑
行を上/下へコピー Shift+Alt+↓ / ↑
行を上/下に挿入 Ctrl+Enter / Ctrl+Shift+Enter
行の削除 Ctrl+Shift+K
単語単位で削除 Ctrl+Backspace / Ctrl+Delete
行のインデント 選択状態でTab (またはCtrl+])
行のインデント解除 選択状態でShift+Tab (またはCtrl+[)
行コメントの切り替え Ctrl+/
シンボルの名前変更 シンボル2上でF2
定義へ移動 シンボル2上でF12
参照へ移動 シンボル2上でShift+F12
単語単位でカーソル移動 Ctrl+← / →
カーソルが前に戻る Alt+←
カーソルが次に進む Alt+→
閉じたファイルを開く Ctrl+Shift+T
サイドバーの表示切り替え Ctrl+B
下部パネルの表示切り替え Ctrl+J

VSCodeの欠点

標準エディタと比べての欠点です。

  • VSCodeの起動が高負荷
    VSCodeの起動は、標準エディタと比べるとかなり高負荷です7。ある程度のスペックがあれば気になりませんが、あまり古いパソコンだと気軽には開きづらいです。しかし、一度起動してしまえばそれ以降の動作は低負荷なので、許容範囲内かとは思います。

  • デバッグウィンドウの表示切り替えに手間がかかる
    標準エディタではメニューバーの「Debugウィンドウ表示」チェックで簡単に切り替えられますが、VSCodeでは設定にてhspcの-wオプションを直接付け外ししなくてはなりません。

  • コンソール版のhsp3clランタイムの実行時にコンソールが表示されない
    hsp3clランタイムを実行した場合、新規コンソールが作成されず、標準出力(mes)・入力(input)の動作確認ができません。また、終了する場合はCode Runnerの停止ボタンを使うか、タスクマネージャーで終了させる必要があります。hspcの制約みたいです。
    一応暫定的な対処法として、実行ファイルにする、またはcode-runner.runInTerminal設定をtrueにする（VSCodeのターミナル上で実行。終了する場合はCtrl+C。ただし欠点あり8）の2つがあります。

参考

追記(2023/11/06)

ほのぼのさんにこの記事を見ていただけたようで、記事に書いていたhspcの不具合を修正してくださいました！　さらにpackfile削除機能の追加もしてくださいました。
まさか見ていただけるとは思っていなくてめちゃくちゃびっくりしました。本当にありがとうございます。

次に、MIZUSHIKIさんが「HSP3forVSCodeインストーラー」というものを公開されていたのですが、この記事を参考にしてくださったようです。ありがとうございます！
興味があったので仮想環境で実際に使ってみたところ、起動 → インストールボタン → 後は待つだけでセットアップが完了して普通に感動しました。しかもアイコンテーマ作成までこなしてくれるので驚きです。ファイルの関連付けも凝っていますし、欠点にあげていたデバッグウィンドウ表示切り替えも専用の拡張機能で解消してしまっています。
ただ、この記事を書いた身としてはCode Runnerを使わないのが少し残念。ほぼ好みの問題かもしれませんが……。

最後に、Googleで「hsp vscode」と検索したら、上から2番目に出てくるようになっていました。投稿してから1ヶ月とかではまったく出てこなかったので嬉しい限りです。

追記(2024/02/14)

なんとベインさんがこの記事を見てくださり、HSP3 アナライザー・ミニ (LSP) を更新してくださいました。アウトラインの無効化オプションが追加されたのと、VC++ランタイムライブラリが不要になりました。
また、アウトラインのラベルが二重になる不具合の修正もしてくださったのですが、ラベルの定義移動が使えなくなっていたため、大変申し訳なかったのですがissueを立ててロールバックしていただきました。

まさかベインさんにまで見ていただけるとは思わなかったので、VSCodeでアナライザー・ミニの更新ボタンが出て変更内容を見たときには心臓止まるかと思いました。
本当にありがとうございます。

  1. Windows 7はv1.70.2、Windows 8/8.1はv1.79.2、の旧バージョンが利用可能ですが、この記事の対象とはしません。 ↩

  2. シンボル: 変数、命令・関数、ラベル、定数などのこと。 ↩ ↩2 ↩3 ↩4 ↩5

  3. HSPのインストールディレクトリ: HSPでmes dir_exeを実行することで確認できます。 ↩ ↩2

  4. ちなみに、個人的にはCode Runnerの実行ボタンも非表示にすることをおすすめします（常に表示されて邪魔なので）。一応、非表示後もタブ欄右端の⋯を左クリックして出るメニューから押せるため、マウス操作したいときも安心です。 ↩

  5. F5での実行は「HSPのファイルを開いているエディタにフォーカスしている時」にしか効かず、他のビューにフォーカスしている場合はデバッグ実行の操作になってしまうので注意。例えば、エクスプローラービューでファイルを開いてすぐにF5を押すと、エディタにフォーカスしていないがためにデバッグ実行となってエラーダイアログが出てしまいます。 ↩

  6. 親の#moduleでモジュール名がついている場合にのみ、モジュール名を親として階層表示される。 ↩ ↩2 ↩3 ↩4

  7. VSCodeはElectronで作られており、Chromiumレンダリングエンジンが採用されているため、Google Chromeブラウザを開いているのとほぼ同じ状態です。その代わり、マルチプラットフォーム対応でリッチなUIが実現できています。 ↩

  8. 1つ目、ターミナルなので当たり前ですが、実行結果と一緒に実行コマンドとカレントディレクトリも表示されます。通常時と比べると情報量が無駄に増えて少し見づらいです。
    2つ目、表示がバグります。具体的には複数回実行したとき（前の出力がクリアされたとき）に前の出力の一部が変に残って表示されます（実際の画面 | 拡張機能のissue）。
    一応、設定で以下のいずれかを行うことで解消はします。
    1. code-runner.clearPreviousOutputをfalseにする（前の出力をクリアしない。ただし、実行結果がすべて残るので見づらい）
    2. terminal.integrated.windowsEnableConptyをfalseにする（ConPTYではなくwinptyを使う。ただし、winptyは古い技術で不具合がある）
    3. terminal.integrated.defaultProfile.windowsをCommand Promptにする（コマンドプロンプトを使う。しかし、このためだけにVSCodeの規定のターミナルを変えるのは気になる） ↩

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5