www.tsukutarou.net
www.tsukutarou.net

こんにちは、つくたろうです。

今回はタイトルの通り、「VSCodeでMarkdownを書くときに、『ドラッグして選択した範囲を任意のタグで囲む』という処理をするショートカットの作成」について記事を書いていきたいと思います。

プログラマーのためのVisual Studio Codeの教科書 (Compass Booksシリーズ)

作者:川崎庸市,平岡一成,阿佐志保
マイナビ出版

Amazon

はじめに
やったことの流れ
具体的なコード
- 選択した範囲を「任意の文字列で囲む」スニペットを作成
- 作成したスニペットを呼び出せるようなショートカットを作成
実装結果
おわりに

www.tsukutarou.net

はじめに

僕はブログを始めた当初から記事をMarkdownで書いているのですが、つい最近「VSCode」に乗り換えました。

理由としては、はてなブログの標準エディタではMarkdownの時に「太字」などのショートカットが効かないために、これらの使えるVSCodeを導入しようと思い立ったからです。（もともと大学の課題などでVSCodeは使っていたので、導入といっても拡張機能「Markdown All in One」をインストールしただけですが）

Markdownの.mdのファイルで書けば、Githubなどでの管理も簡単にできるというメリットもありますね。
www.tsukutarou.net

さて、このVSCodeでMarkdownを書いているときに「Ctrl+B」で太字ができるようになったのはいいものの、「ほかの機能（ショートカット）が無い」と気づきました。

具体的にはサイズ変更や色替えなどです。

いちいちタグをコピペしていては元も子もないな…と思い、選択した部分を任意の文字列で囲むことのできるショートカットを自作することにしました。

実際にできるようになったので、具体的な処理を備忘録的に残しておきたいと思います。

www.tsukutarou.net

やったことの流れ

処理の流れとしては、以下のようにやりました。

①：選択した範囲を「任意の文字列で囲む」スニペットを作成

②：先ほど作成したスニペットを呼び出せるようなショートカットを作成

恐ろしいほど面白味のない愚直な手段ですが、結局これが手っ取り早くて楽なんですよね。

具体的なコード

先の①、②をそれぞれ以下のように実装しました。

選択した範囲を「任意の文字列で囲む」スニペットを作成

まず、「Ctrl」+「Shift」+「P」でコマンド入力欄を開き、そこに「snippet」と入力。

そうすると「ユーザスニペットの構成」という項目が表示されるので、それを選択。

続いて「markdown」と入力。「markdown.json」というファイルがあるので、それを選択して開く。

開いた画面に、以下のようにスニペットを記述し、保存。

 "hogehoge": {
     "prefix": "hoge", 
     "body": "囲い(前)${TM_SELECTED_TEXT}囲い(後)"
 }

記述内容について具体的に説明すると、"hogehoge"という名前のスニペットを作成し、その処理として${TM_SELECTED_TEXT}という部分を"囲い（前）"と"囲い（後ろ）"という部分で囲ませた状態のものに書き換えているということになります。

ここで、${TM_SELECTED_TEXT}というのが「ドラッグして選択している部分」を指しているので、結果的に「選択部分を『囲い（前）』と『囲い（後ろ）』で囲む」という処理をさせるようになっています。

作成したスニペットを呼び出せるようなショートカットを作成

さて、続いては先ほど作ったスニペットをショートカットで呼び出せるようにします。

まず先ほどと同じように「Ctrl」+「Shift」+「P」でコマンド入力欄を開き、そこに「keyboard」と入力して「キーボード　ショートカットを開く（JSON）」を開きます。

そしてそこに、以下のように記述して保存します。

 {
     "key": "割り当てたいキー",
     "command": "editor.action.insertSnippet",
     "args": {"langId": "markdown","name": "hogehoge"}  
 }

"key"には割り当てたいショートカットを入力しますが、既にあるものと競合したくない場合は先のコマンド入力欄で同じように「keyboard」と入力し、今度は「『既定の』キーボード　ショートカットを開く（JSON）」を開き、「Ctrl」＋「F」などでそのキーが使われていないかどうかを検索してから設定すると良いと思います。

また、"args"の"hogehoge"には先ほど設定したスニペットの名前を設定しましょう。

これで、Markdownの編集画面で設定したショートカットキーを押せば先ほどの処理ができるようになりました。