興味という山に単独行。

WEB屋の登山とバイクとイラスト

VScodeで特定文字列をショートカットキーで入れる

2019年 8月 15日  2019年 8月 20日

VScodeで特定文字列をショートカットキーで入れる

ショートカットキーで特定の文字列(主に装飾タグ)を入れられるようにしておくと、作業効率がアップします。

ぶっちゃけ私は、マクロが登録ができるキーボードで対応したほうが扱いやすいです(複数同時押しが苦手)。

まぁ、職場だとどうしてもVSCodeで対応するしか無いので、メモしておきますね。

VScodeのkeybinding.jsonに追加する

ctrlshiftp

を押して、keybinding.jsonを開きます。

VSCodeでkeybinding.jsonを開く

以下のコードを追加します。

    { "key": "ctrl+alt+b", "command": "type",
        "args": { "text": "<span class=\"bold\">" },
        "when": "editorTextFocus"
    },

画像だとこんな感じです

VSCodeでkeybinding.jsonを開いて、設定を書き換える

テキストエリアで、ctrlaltbを押してみてください。

こうなるはずです。

<span class="bold">

お疲れさまでした。

解説

コードの意味をかんたんに解説します。

下記の部分で押したキーを設定します。

"key": "ctrl+alt+b"

キーがかぶらないようにするためには、設定ファイルで一度検索してみてください。

「ファイル」→「基本設定」→「キーボードショートカット」から検索することができます。

VSCodeでショートカットキーを検索する

また、この画面からショートカットに使用するキーの入力の仕方を調べることができます。

VSCodeでショートカットキーを検索する

(「入力してキーバインド内を検索」ボックスの右にあるキーボードボタンを押下。)

挿入するテキストの部分は下記の部分で設定しています。

 "args": { "text": "<span class=\"bold\">" },

「”(ダブルクォーテーション)」は「¥(バックスラッシュ)になります」でエスケープしてください

関連記事

関連記事

VScodeで静的サイトを作るためのおすすめプラグイン6選
VScodeで静的サイトを作るためのおすすめプラグイン6選

VSCodeで静的サイトジェネレーター用のmarkdownを書くのに便利なプラグインを紹介します。 VSCodeのプラグインは、結構かゆい所に

VScodeをwindowsにインストールする方法
VScodeをwindowsにインストールする方法

優秀なエディタであるVSCodeのインストール方法を紹介します。 まずは使っっているPCのスペックを調べる いや、ただのエディタなんで、スペック

VScodeのemmetをmarkdownで有効にする方法
VScodeのemmetをmarkdownで有効にする方法

ショートカットをいくら作ろうとも、markdownでemmet使えるのは便利なので・・・ ちょっとばかし設定に、戸惑ったので備忘録です。 VSc

ライター情報

アイコン

七堂 結衣

XジェンダーなWEB屋。

自分の性別が好きじゃなく、プライベートでは女装しています。

教師→WEB屋→フロントエンジニア→Vtuber

WEBマーケやWEBマスタも兼任。SNS広告で一発当てたことも…

趣味の登山やバイク、イラストとWEBの情報を発信しています

更新は不定期。YouTubeはじめました!