「Visual Studio Code」をHTMLエディタにしてみたい話（今更）

公開 2024/03/01 20:52

最終更新 2024/03/02 10:37

Visual Studio Code
https://code.visualstudio.com/

最近、なんとなく「Visual Studio Code」をHTMLエディタに使えないかなといじりまくっているのですが、現状ではマクロ入れまくったサクラエディタの方が便利なんよね……
なんとなくメジャーな「Visual Studio Code」をなんとなく使えたらなんとなくかっこいいかな？　くらいのどうでもいい動機で使っているので。ｗ
とりあえず「手打ちで簡単にHTML書いてる」人向けに何をどうしたら使い勝手が良くなるか、あとは私の忘備録でメモを置いておきます。
私の場合は
「まず文章をテキストエディタに一気に書く」
「そこからレイアウトを考えるのでタグを入れるのは後から」
という手順なので、こういう機能が欲しい！　が他の方とは一致しないこともあるかとは思いますが……。

ちなみに今のところ、サクラエディタよりVisual Studio Codeの方が上だな、という点は、

・タブインデントがすごく見やすい

・ファイルの管理がまあまあしやすい
（サイドバーでファイル管理ができるので。サクラエディタのファイルツリーはあまり使い勝手が良くない）

・「HTMLHint」という拡張機能でHTML構文チェックがリアルタイムにできる

……この3点くらいなのです。HTML手打ち派にとって、「HTMLHint」は本当にありがたい機能なので、構文チェックのためだけに導入しても良いかも。
とりあえずインストールしたら「Japanese Language Pack for Visual Studio Code」っていう拡張機能でメニュー等日本語化しましょう。英語が平気な人は入れなくてOK。私は無理なので入れています。
拡張機能の解説とかだいたい英語なので、結局わからんことは検索して機械翻訳にかけて調べる羽目になるんだけど。ｗ

ぶっちゃけ、HTMLエディタとしての使い勝手はサクラエディタの方が上、とは書きましたが、基本的な機能はインストールしたばかりの状態でも付いています。
新規ファイルを開いて「言語の選択」で「HTML」を選ぶ、または既に制作したHTMLファイルを読み込めば、初期の時点でタグの色分けもある程度やってくれます。
また、歯車マーククリック→設定→拡張機能→HTML　という項目がありまして、最初の「HTMLタグの自動クローズの有効/無効」から始まり、便利な機能が最初から使えるようになっています。
ただ、「HTMLタグの自動クローズ」というのは「」とキーボード入力すると「」と自動でが付く機能なので、私のように「文章を打ってからタグ打ち」派にはあまりありがたくない時があったりなかったり。好みで色々設定してください。
また、普通にタグを打っていてもたくさん候補が出てきてくれたり親切は親切ですが、やっぱりもうちょい欲しい機能があるわけで。

どうやったらHTMLエディタとして使い勝手が良くなるのかなと色々調べたのですが、調べてわかったのは、Visual Studio Codeはあまり日本語に優しくないといいますか……。
IMEのオンオフの見分けができないし（サクラエディタだとIMEのオンオフでキャレットの色を変えることが可能）。
多分HTMLエディタとして使っている人があまり居ないんだろうな、しかもその中で日本語を普段使っている人はもっと居ないな、って感じがします。

と、文句ばかり書いているのも何なので、私はどうしたのかという話を以下にて。

まずはショートカットキーの変更。
サクラエディタにショートカットキー設定を合わせたい場合、少々設定を手直しする必要があります。
たとえばサクラエディタだと、置換のショートカットキーは「ctrl + R」なのですが、Visual Studio Codeだと「ctrl + H」です。
HTMLエディタとして使う場合、検索や置換はしょっちゅう使用すると思いますので、他にも諸々、変更したいショートカットキーがあれば変更してください。
画面の一番左下の歯車マーククリック→キーボードショートカットで変更可能です。
ここで「こんなショートカットキーいらん」とか「設定してあると間違って押しそう」なのがあれば削除しても良いかもしれませんが、好みで。

フォントも設定で変更できます。私はお気に入りの「Hackgen」さんを使っています。
漢字の「一」とカタカナの伸ばし棒「ー」がはっきり見分けられる日本語プログラミングフォントはHackgenさんくらいなので。
https://github.com/yuru7/HackGen

更に、拡張機能を別途入れました。
拡張機能はサイドバーの拡張機能で検索すると出てきます。

HTMLHint
Live Preview
Close HTML/XML tag
Keyboard Macro Beta
Whitespace+
配色テーマ

HTMLHint #

https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint

上でも記したHTML構文チェック用の拡張機能です。
表示→外観→パネルを表示させておけば、HTML構文にエラーがあった時、「問題」タブに表示が出ます。
エラーは英語表示だけどわからんかったら機械翻訳にでも（ｒｙ

Live Preview #

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

リアルタイムプレビュー機能。あれば便利。

Close HTML/XML tag #

https://marketplace.visualstudio.com/items?itemName=Compulim.compulim-vscode-closetag

個人的には「これだよ」と言いたい便利機能。閉じていないタグを閉じてくれます。
なのですが、デフォルトのままだと に対してとか、閉じタグが不要なタグまで閉じるので、設定を変更しなければなりません。
設定変更はsettings.jsonの書き換えを行います。というか、Visual Studio Codeの設定関係は.jsonをいじらないといけないことが多かったりします。このあたりが素人向けじゃないというか。プログラマー向けエディタだからこれくらいわかるだろ（ﾄﾞﾔｧ感が。ｗ私はわからんよ！
それはさておき、設定→「ワークスペース」タブ→Close tag configuration→settings.jsonで編集　をクリック。

{
	"closeTag.ignoreTags": ""
}

デフォルトでこうなっているので、「閉じる必要のないタグ」を以下のように追加していきます。他に必要なタグがあれば各自で追加してください。
HTML5だと閉じる必要のないタグとか色々あるけど、一般的に「必要がない」のは以下で充分かと。

{
	"closeTag.ignoreTags": {
		"area": true,
		"base": true,
		"br": true,
		"col": true,
		"embed": true,
		"hr": true,
		"img": true,
		"input": true,
		"link": true,
		"meta": true,
		"param": true,
		"source": true,
		"track": true,
		"wbr": true
	},
}

これで保存すればOK。
あとはデフォルトのキーボードショートカットが「Alt + .」で「タグを閉じる」に設定されているので、キーボードショートカット一覧から「closeTag.closeHTMLTag」を探して任意のショートカットキーを設定してください。

Keyboard Macro Beta #

https://marketplace.visualstudio.com/items?itemName=tshino.kb-macro

キーボードマクロを使いたい場合はこちらで登録をします。
要するに「改行の をショートカットキーで一発で入れたいんだよ」とか、「文章打った後にその前後にと入れたい」といった、サクラエディタならマクロで解決できるアレです。Visual Studio Codeはこのあたりがかなり不便で、拡張機能をまず入れなきゃならないという。
で、マクロの記録は「Ctrl+Alt+R」で開始、同じく「Ctrl+Alt+R」で記録終了。
記録したマクロは、「コマンドパレット」を開き（メニューの「表示」→「コマンドパレット」）、そこで「Keyboard Macro: Copy Macro as Keybinding」を検索し選ぶと、JSON形式でクリップボードにコピーされます。
これを、キーボードショートカットの設定画面のタブ右上「キーボードショートカットを開く（JSON）」をクリックで表示される「keybindings.json」の適当な場所（一番下がわかりやすいかと）に貼り付けて保存した後、実行するキーボードショートカットも登録して完成。ってな手順です。

めんどい。ｗ
まあ、慣れだと思うけど。ｗ
マクロは一度記録してみれば、何が何なのかだいたいわかります。
たとえば「 を入力」は、

{
    "key": "",
    "command": "kb-macro.playback",
    "args": {
        "sequence": [
            { "command": "$type", "args": { "text": "<br>" } }
        ]
    }
},

こんなデータになっています。なるほど、あとは「 」を書き換えれば好きな文字を入力できると。
また、「"key": "",」の箇所を任意のキーボードショートカットに設定することも忘れずに。「"key": "ctrl+B",」とか。
なお、「文章打った後にその前後にと入れたい」は、

{
    "key": "ctrl+P",
    "command": "kb-macro.playback",
    "args": {
        "sequence": [
            { "command": "editor.action.clipboardCutAction", "await": "document selection clipboard" },
            { "command": "$type", "args": { "text": "<p>" } },
            { "command": "editor.action.clipboardPasteAction", "await": "document selection" },
            { "command": "$type", "args": { "text": "</p>" } }
        ]
    },
},

これで「選択した文章の前後にとを入力」するマクロです。
これを応用すれば

{
    "key": "ctrl+H",
    "command": "kb-macro.playback",
    "args": {
        "sequence": [
            { "command": "editor.action.clipboardCutAction", "await": "document selection clipboard" },
            { "command": "$type", "args": { "text": "<a href=\"" } },
            { "command": "editor.action.clipboardPasteAction", "await": "document selection" },
            { "command": "$type", "args": { "text": "\" target=\"_blank\"></a>" } }
        ]
    },
},

ハイパーリンクの登録もできます。「"」は「\"」にエスケープを忘れずに。

とりあえずここまであれば、まあまあ、「サクラエディタで作ったHTMLファイルの修正」には充分使えるのではないかなと。
あとはおまけ。

Whitespace+ #

https://marketplace.visualstudio.com/items?itemName=davidhouchin.whitespace-plus

Visual Studio Codeはデフォルトだと半角スペースが「·」表示なので、日本語文章打ってると「・」（中黒）とかと微妙に見分けにくいと思うんだ……
ということで、上の「Whitespace+」を入れて、「半角スペースの背景だけちょい濃い目の色が付く」ようにしました。
「コマンドパレット」で「whitespace+ config」を選び、以下のように設定し直しました。
半角スペースだけ効けば良いので、「"name": "space",」以外の「"name": "tab",」「"name": "newline",」を「"enabled": false,」に変更。
半角スペース関係は「borderWidth」やら何やらは要らないので0px、背景だけ色が付くように、かつrgbaの「a」を「0.1」とすることで半透明（薄く濃い色が乗るだけ）にしています。
あと「"autoStart": true,」も変更しました。

{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",
        "enabled": true,
        "pattern": "\\s",
        "style": {
            "borderWidth": "0px",
            "borderRadius": "0px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.1)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.1)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "tab",
        "enabled": false,
        "pattern": "\\t",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(170, 53, 53, 0.3)",
                "borderColor": "rgba(170, 53, 53, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(223, 97, 97, 0.3)",
                "borderColor": "rgba(223, 97, 97, 0.4)"
            }
        }
    },{
        "name": "newline",
        "enabled": false,
        "pattern": "\\n",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "borderColor": "rgba(38, 150, 38, 0.3)"
            },
            "dark": {
                "borderColor": "rgba(85, 215, 85, 0.4)"
            }
        }
    },{
        "name": "trailing",
        "enabled": "unlessCursorAtEndOfPattern",
        "pattern": "[^\\S\\r\\n]+$",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }]
}

配色テーマ #

設定→テーマ→配色テーマ　で配色変更ができます。初期の配色テーマ以外に拡張機能としても配色テーマが色々とあるので、見やすいテーマを入れてみてください。
細かく自分で色を変えたい場合は、settings.jsonで設定できるそうですが、まあとりあえずそこまでせんでもええか、と私は思っているので……以下参照。
https://code.visualstudio.com/api/references/theme-color
私はBetter Solarizedを入れています。
https://marketplace.visualstudio.com/items?itemName=ginfuru.ginfuru-better-solarized-dark-theme

Web制作 VSCode HTMLエディタ

LIKE 0