BlueBear

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\">" },

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

ライター情報

七堂 結衣

教師→WEBデザ→フロントエンジニア

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

フロント系技術を中心としたメモ書きとWEBやアフィリエイトの情報を発信しています

更新は不定期

関連記事

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

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

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

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

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

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