かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

【Visual Studio Code】よく使うカスタムショートカット登録しておく

2022年6月30日

2022年7月14日

いくつかよく使うものをショートカットに設定していますので紹介。

自分でキーボードショートカットを設定する方法

  1. Command + pkeyと入力する
  2. 基本設定: キーボードショートカットを開く(JSON)を開く」を選択する
  3. jsonファイルが開くのでそこにカスタムショートカットを設定する


console.logのショートカット入れておくと便利

[ 
 {
    "key": "ctrl+c",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log($0)"
    }
  }
]

$0とはショートカット実行後にその位置にカーソルがくるのですぐに、あらかじめコピーしておいたテキストを貼り付けることができるのでよいです。

キャメルケース、ケバブケースなどを変換するショートカット

change-caseのプラグインを使うことになりますが、こちらもショートカットに設定しておくと便利です。

  • Javascriptで使いたい場合はキャメルケース、定数にしたい場合は大文字で
  • CSSで使いたい場合はケバブケース
  • Vueのpropsで使いたい場合はケバブケース


などさまざまな場合に使い分けることがあります。
その時にサクッとショートカットで変換することができるので便利です。

[  
  {
    "key": "cmd+4",
    "command": "extension.changeCase.camel"
  },
  {
    "key": "cmd+5",
    "command": "extension.changeCase.constant"
  },
  {
    "key": "cmd+6",
    "command": "extension.changeCase.param"
  }
]

change-case プラグインをインストールは忘れずに。
ショートカットはお好みで変更してください。

まとめ

何度も使うものはショートカットにいれることを検討すると、
毎回同じことを繰り返さずに済むので日々の作業のスピードがあがるかと思うので、
たまに見直して検討すると良いかなと思います。

他にも登録しているショートカットはあったのですが、使ってるもののみ紹介しました。
少ないですが本当によく使うもののみ残ったと考えることもできますかね!

日々の作業をスピードアップできるに越したことはないので便利なショートカットがあればまた更新していきたいですね。

関連する記事

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

{}
{}
{}

よくみられてる記事