VSCodeのおすすめショートカットキーまとめ

こんにちは、投資家 兼 Webクリエイターのたかひで（@takahide_web）です。

「VSCodeのおすすめショートカットキー」について紹介していこうと思います。

あなたはこんなお悩みないでしょうか。

VSCode使い始めたけど、なかなか入力に慣れなくて時間がかかってばかり、、、

効率よくコーディングをしていきたい！

私がよく使うショートカットキーについて以下ツイートしました。

他にも紹介したいショートカットキーがあるのでツイートの内容含めて紹介していきます。

行のコメント化　【Commnad】＋ 【/】

入力キー：【Command】＋/

コメントのコードってHTMLとCSS、JavaScript等のプログラミング言語ごとに異なるのが厄介ですよね

上記をいちいち入力していたら時間がかかるので【Command】＋/で終わらせましょう

行の入れ替え　【option】 + 上下の矢印キー

入力キー：【option】 +上下の矢印キー

行の入れ替えのショートカットキーを覚える前は、行を選択してコピー→削除→新しい行を選択して貼り付けを繰り返してました。。。

インデントも自動で考慮して行の入れ替えができるので便利です。

インデントの整理　【shift】＋【option】+【F】

入力キー：【shift】＋【option】+【F】

HTMLの入力をしているとインデントがぐちゃぐちゃで書いている本人もわかりにくくなりますよね

インデント整理のショートカットを使うと一気に見やすくなります。

Before

After

前提として、Formatterのプラグインが必要なのでインストールしてからお試しください。

プラグイン名：VS Code JS, CSS, HTML Formatting

https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter

＜ご参考＞

その他、VSCodeで有能なプラグインは他の記事で紹介しているので参考にしてください。

行のコピー　【shift】+ 【option】＋上下の矢印キー

入力キー：【shift】+ 【option】＋上下の矢印キー

１行だけでなく、複数行を選択して【shift】+ 【option】＋上下の矢印キーを押せばコピーできます。

複数行を選択

以下のようにコピー可能

ファイル内の文字列置換　【Command】+ 【option】＋ 【F】

入力キー：【Command】+ 【option】＋ 【F】

特定の文字列を検索して、置換してくれます。

例：クラスやIDの名前を変更　等

以下のような検索窓が出てくるので検索したいワードと置換したいワードを入力すれば完了です。

おわりに

一度に覚える必要はなく、使いながら徐々に覚えていってください。

あなたにとって今回紹介した「VSCodeのおすすめショートカットキー」が参考になれば嬉しいです。