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

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

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

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

【圧倒的 低コスト】Oracle Cloud 構築・運用保守・監視サービス

【圧倒的 低コスト】Oracle Cloud 構築・運用保守・監視サービス

【WordPress専用】高速 クラウド / サーバー『WebSpeed』

【WordPress専用】高速 クラウド / サーバー『WebSpeed』

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

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

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

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

【SNSアプリ開発】LINE カスタムアプリ開発サービス

【SNSアプリ開発】LINE カスタムアプリ開発サービス

【ECアプリ開発】Shopify カスタムアプリ開発サービス

【ECアプリ開発】Shopify カスタムアプリ開発サービス

【音声アプリ開発】Twilio カスタムアプリ開発サービス

【音声アプリ開発】Twilio カスタムアプリ開発サービス

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

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

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

ショートカットおじさんが言うから間違いない、知って得する VSCode のショートカット集

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

少し前にも Visual Studio Code(以下、VSCode)のショートカット記事は書いているのですが、それから私も日々ショートカットをググったりコンフィグを読み漁る日々を過ごしておりました。
ショートカットをたくさん覚えて、いかにキーボードから手を離さずに作業を進められるかをテーマに日々仕事をしている訳ですが、前回から新たに覚えたショートカットから、しばらく使ってみて、自分の手に馴染んだものだけに厳選してお届けします!


 

行頭から行末まで選択状態にする

私も昔は home キーからの Shift + end というコンビネーションを多用していましたが、一発で現在の行を選択するショートカットがありました。

Ctrl + L

 

大抵の場合、行ごと消したい場合なので都合がいいのですが、行末にある改行コードも選択範囲に入っているので、稀に改行がおかしくなるケースもありますが慌てずに。

 

先頭にインデントを追加/削除

インデントを付けるには、タブキー、もしくはシフトを押しながらタブキーというのが定番かも知れませんが、 VSCode にはインデント用のショートカットも割り当てられています。

確かにタブキーでインデントを付けることは可能ですが、必ずタブキーでインデントを付けられる訳ではありません。
タブキーにインデントを付けるには、カーソルが行頭にある必要があるため、途中でインデントのズレに気付いた場合はカーソルを動かす必要がありますよね。

つまりそういうことです。

# 追加
Ctrl + ]

 

# 削除
Ctrl + [

 

増やす(減らす)数、と文字種(タブやスペース)は言語モードの設定を利用します。

 

コードフォールディング

# 折りたたむ
Ctrl + Shift + [

 

# 展開する
Ctrl + Shift + ]

 

とんでもなく長いコードを修正したりする場合は、コードフォールディングやエディタの分割( Ctrl + \ )を駆使して、なるべく行ったり来たりを繰り返して時間のロスを減らしていきたいですね。

ちなみに、「ファイル内の折りたためるところはすべて折りたたむ」コマンドも存在していて、以前紹介したかも知れませんが Ctrl + K, Ctrl + 0 のコンビネーションで全て折りたためます。
逆に「展開できるところはすべて展開する」コマンドは Ctrl + K, Ctrl + J コンビネーションですね。

 

間違って閉じちゃったファイルを開きたい

これは偶然発見したんですが、 Chrome などのブラウザと同じショートカットが割り当てられています。

Ctrl + Shift + T

 

Ctrl + W を連打しがちなせっかちさんには特にオススメのショートカットですね。

 

全てのコマンドを見たい

要するに Ctrl + Shift + P でコマンドパレットを開くということなんですが、 F1 キーだけで開くことをご存知でしたか?
だから何だよと思われるかも知れませんが、私、ドヤ顔していますよ?

 

番外編:未割り当てのショートカットを活用する

サーバーサイド開発をしていると、コードエディタとターミナルを行ったり来たりすることはよくあることです。
なのに、エディタからターミナル、ターミナルからエディタへカーソルを移動させるショートカットは標準ではショートカットキーが割り当てられていません!

なので、ここは1つ、自分の好みのポジションに割り当ててしまおうではありませんか、というわけです。

 

まずはエディタからターミナルへ移動するショートカット

キーボードショートカットの設定は、 Ctrl + K, Ctrl + S のコンビネーション(ショートカットの設定をショートカットで開くなんて!)ですね。
コマンド名は「 workbench.action.focusPanel 」となっているので、コピペで検索します。

おそらくキーバインドは空っぽになっていると思いますので、行にマウスカーソルを合わせると左に表示される、鉛筆のアイコンをクリック。

お好きなキーバインドを入力し、エンターを押せば登録完了です。

 

続いて、ターミナルからエディタへ移動するショートカット

エディタからターミナルへの移動はできるようになりましたので、今度は行ったら帰る、ターミナルからエディタへ移動するショートカットを設定します。
コマンド名は「 workbench.action.focusActiveEditorGroup 」となっているので、先程のようにコピペで検索します。
こちらもキーバインドは空っぽなので、同じ要領でキーバインドを登録。

私の場合、同じショートカットで行ったり来たりしたかったため、同じものを設定したところうまく動かず。

そこで、こちらのショートカットだけ when 式なるものを設定します。

when 式はどのタイミングでこのショートカットが有効になるかというもので、 when 式にかかれているタイミングの場合、優先される仕組みになっています。
ここではターミナルにフォーカスされている場合を示す、「terminalFocus」という when 式を設定しておきます。

すると、ターミナルにフォーカスがある場合は、ターミナルからエディタへ移動するショートカットが優先されるため、いい感じに行ったり来たりできるようになったというわけでした。

 

まとめ

ショートカットで稼いだ数秒の積み重ねはかなり重要なんじゃないかな、と思って利用し始めたはずが、ショートカットを使う、まだ見ぬ良いショートカットを発掘するのがメインになってしまいました。

ショートカットの紹介記事も数回書いているので、そろそろネタが......となりそうですが、今回はいよいよ未割り当てのコマンドという禁断の領域にまで手を染めてしまいました。
よくよく見てみると、とんでもない数のコマンドが用意されていて、標準で設定されているショートカットはまさに氷山の一角の様相です。

個別のコマンドについて、解説してあるページがなかなか見当たらないので理解できていないものも多いですが、発掘して有用な未割り当てコマンド集のようなブログも書いてみたいものです。

 
以上です。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
6,832
facebook twitter はてなブックマーク
【大阪 / 横浜】インフラエンジニア / サーバーサイドエンジニア 積極採用中!

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

この記事をかいた人

About the author

萬代陽一

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