【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

Visual Studio Codeで有能なショートカットキーを紹介

こんにちは。
開発チームのワイルド担当、まんだいです。

開発をしていると、エディタが手に馴染んでいるかどうかが作業スピードに関わってきたりするので、ショートカットキーはできるだけ頭を使わず、手が勝手に動くくらいになじませたいと思っています。

それでもたまにしか使わなかったり、よく使うのにどうしても染み付かず、体が拒絶しているショートカットがあったりします。
あと、うわ~便利だわ~と思っても、後で忘れてしまうかなりもったいないケースを防ぐための備忘録として、Visual Studio Code(以下、VSCode)で使える、知る人ぞ知る検索してもなかなか出てこないショートカットを紹介したいと思います。

なお、利用するバージョンによってキーコンフィグが変わったりしますが、この記事に載っているショートカットの確認環境は、1.17.2です。

対応する括弧(かっこ)にカーソルをジャンプする

Ctrl + Shift + \

JSやPHPの場合は、「[」、「{」、「(」などに反応する。

なおHTMLの場合は、タグの前後に入れる「<」、「>」のペアに反応する模様。

 

カーソル位置でコードフォルディング

Ctrl + Shift + [
Ctrl + Shift + ]

上が折りたたみ、下が展開になっています。
使っていると、いちいち行番号のところまでマウスカーソルを動かすのも面倒になってきますよ。

 

ファイル全体を対象にコードフォルディングで折りたたむ

Ctrl + k -> Ctrl + 0

Ctrlを押しながら、k0を順に押せばOK。

 

折りたたんだすべてのコードフォルディングを展開する

Ctrl + k -> Ctrl + j

Ctrlを押しながら、kjを順に押せばOK。

 

選択中のJSONデータを改行 + インデントを入れて見やすくする(JSON pretty)

Alt + Ctrl + m

パースできない場合は警告が表示されるので、JSONデータの構造チェックにも使える。

標準機能ではなかったのに紹介してしまいました。つい便利すぎて……。
JSON Toolsをインストールしてください。

 

一行をまるごと削除

Ctrl + Shift + k

EclipseではCtrl + Shiftが設定されていて、左手だけで削除できた。

 

カーソル行の前に改行を追加

Ctrl + Shift + Enter

よくわからない場合は、「Homeを押して、Enter、カーソルキーで左を1回打鍵」をすることを想像してください。

 

ファイルの先頭/末尾へ移動

Ctrl + Home
Ctrl + End

Shiftを追加して現在位置から先頭/末尾までを選択状態にすることも。

 

エディタタブの切り替え

幾つかキーボードからのエディタタブを切り替える方法が提供されているのでまとめて紹介します。

Ctrl + Tab

開いているファイルのリストから選択する。

Ctrl + PageUp
Ctrl + PageDown

隣のエディタタブへ移動する。

 

コメントアウト / アンコメント

Ctrl + /

コメントアウトはジョーシキの機能ですが、以下の理由から、よほどの理由がない限り、必ずショートカットキーを経由して行うようにしています。

  • ショートカットからコメントアウトすると、インデントを壊さないように適切なインデントでコメントアウトしてくれる
  • ブロックコメントのショートカットキーの組み合わせが不遇すぎる(Ctrl + Shift + a
  • 選択範囲とブロックコメント化の組み合わせの動きはこちらの意図とずれていて、複数行を行コメント化する方が意図した結果になる
  • VSCodeが拡張子からプログラミング言語に合わせてコメントアウトしてくれるので、いろんな言語を行ったり来たりする人にとって便利

まぁ、余計なことを考える必要がなくなるというのが一番大きいかも知れません。
デメリットは、複数行の行コメントに対しては、コードフォルディングが効かないという点でしょうか。

 

まとめ

開発をしている時、一番長い時間やっていることは、右手がマウスとキーボードを行ったり来たりしていることじゃないでしょうか(やや言い過ぎ)。
その時間が少しでも減れば、開発スピードも上がって、より生産性が高くいい仕事ができればいいんですが。

意外に好評、Altに執着した、Altから始めるVisual Studio Codeのショートカットまとめというのもありますので、合わせてどうぞ。

以上です。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
1
読み込み中...
1 票, 平均: 1.00 / 11
47,891
X facebook はてなブックマーク pocket
【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author

萬代陽一

ソーシャルゲームのウェブ API などの開発がメイン業務ですが、ありがたいことにマーケティングなどいろんな仕事をさせてもらえています。
なおビヨンド内での私の肖像権は CC0 扱いになっています。