Loading
BLOG 開発者ブログ

2024年3月14日

【新人エンジニア向け】VSCodeがより便利になる知識【part1】

こんにちは。

新人エンジニアのsatokです。
今回は、現場配属から半年と少し経った今、私が「過去の私」に教えたい
“Windowsで”VSCodeを便利にする要素について書いていきます。
※この記事では、視認性のためにコードをあえて汚く書いています。
「良いコードとは」については過去の記事で触れていますので気になる方はそちらへお願いします。(新人エンジニア向けの内容です。)

目次

1.この記事の目的

この記事では、早くに知っておくことで業務の効率を向上させることができたVSCode関連の要素について共有いたします。
「VSCodeを使い始めたけどまだ操作に慣れない」という方への何か助けになれば幸いです。
なお、OSはWindows10、VSCodeのバージョンは1.85.2です。

2.大前提編

まずは常識過ぎてもはやほとんど解説されないレベルのショートカットなどを紹介します。
「PCほとんど触ってこなかったです」といったレベル感の方はぜひ覚えていってください。

ctrl+c: コピー, ctrl+x: 切り取り

どちらも、範囲選択を行ってから入力することでクリップボードへ情報を乗せることができます。
コピーは選択対象を残しますが、切り取りは選択対象が消去されます。
また、範囲選択を行わない状態で行うと、カーソルが存在する行が丸ごとクリップボードに乗ります。

ctrl+v: ペースト

前述のショートカットでクリップボードに乗った情報を貼り付けることができます。
なお、1度張り付けてもクリップボードからは情報は無くならないので、複数箇所に貼り付けることができます。

ctrl+a: 全選択

開いているドキュメント内をすべて選択状態にします。
全選択状態でBack spaceやDeleteを押すと文字通り白紙に戻るので注意しましょう。

ctrl+s: 保存

ctrl+shift+s: 名前を付けて保存

どちらもファイルを保存することができます。
ctrl+sの方では既存のファイルを編集する際に上書き保存します。そのため、新規作成したファイルでこのコマンドを使用するとctrl+shift+sと同様の挙動になります。
ctrl+shift+sの方では編集前のファイルとは別のファイルとして(もしくは新規作成として)ファイルを保存することができます。
こちらの場合ではファイル名を入力する必要があるので必要に応じて名前を付けましょう。

ctrl+f: 検索

ドキュメント内の文字や単語などを検索できます。
コードが長くなればなるほど修正したい箇所を探すのは大変になるので、検索が必要になります。

検索にヒットすると強調表示される

ctrl+h: 置換

検索と似たような機能ですが、こちらは検索してヒットした文字列を別の文字列に置き換えることができます。
変数名などの修正のために一括で変更したい、といった際に使います。

また、ここで<<正規表現>>が使えるとさらに色々なパターンに対処できるようになりますが、今回の内容とは逸れますので割愛します。
また後日別の記事で紹介しますので、是非そちらもご一読いただければと思います。

ctrl+z: アンドゥ(動作の取り消し)

何か間違ってしまった動作を取り消すことができます。
かなり前の状態まで戻ることができますので、この後のコマンドと組み合わせて使うことが多いです。

ctrl+shift+z もしくは ctrl+y: リドゥ(動作の取り消しの取り消し)

1つ前のctrl+zで取り消した動作を復活させます。
ctrl+zのコマンドは複数回使用して遡ることができるためよく長押しや連打で使用しますが、誤って取り消しすぎることがあります。
そのようなときにこのコマンドの出番です。
「取り消したという動作」を取り消すことができます。

3.VSCode操作おススメpart1

本編です。
私が業務を通して覚えたものなので、「そのくらい知っている」と思われるものもあると思いますが温かい目でご覧いただければ幸いです。

ctrl+@: ターミナルを立ち上げる、しまう

ターミナルを立ち上げる、しまうことができます。
ターミナルをシャットダウンするコマンドではないのでご注意ください。
見かけ上見えなくはなりますが、裏では起動しているという状態です。
ターミナルをシャットダウンする場合はゴミ箱ボタンを押してください。

ctrl+shift+@: 新しいターミナルを立ち上げる

開いているターミナルとは別に新たなターミナルを作ることができます。
このコマンドでは規定で設定されているターミナルを立ち上げるため、立ち上げる種類を変える際には設定を変更する必要があります。

ctrl+/: コメントアウト、コメントアウト解除

カーソルが存在する行をコメントアウトします。
もしくは、範囲選択をするとその範囲の行すべてをコメントアウトします。
(※範囲用のコメントアウト (/**/など) にはならないため注意してください)
この機能でコメントアウトした場合なら、同じ操作でコメントアウトを解除することができます。

F12: 定義へ移動

変数や関数などが定義されている場所へ移動することができます。
変数や関数をクリックし、薄くハイライトされている状態でF12を押すと移動できます。
importやrequireなどで別ファイルで定義されている場合でも移動することができます。

ctrl+shift+f: フォルダ指定検索

大前提編で紹介したctrl+fでは、開いているファイル内のワードは検索できても、他のファイルまで含めた検索はできませんでした。
そこでctrl+shift+fの出番です。
ショートカットキーを入力すると画面左部が画像のようになります。

ここでは、検索したいワード、検索対象のファイル、検索から除外するファイルを指定することができます。

ctrl+d: 同じワード選択

VSCodeでは、カーソルがある位置の変数を、同ファイル内から検出してくれる機能があります。

bbbがうっすらとハイライトされる

この状態でctrl+dを入力すると、入力した回数分カーソルの位置からドキュメントの終わりに向かって順番に選択されます。

この状態でdeleteキーを押すと選択している箇所のみ消去することができます。

この状態は「カーソルが増えている」ような状態のため、escキーで解除できます。

4.まとめ

今回はWindowsでVSCodeを便利にする要素について書いてきました。
かなり初学者向けの内容となりましたが、逆にこの辺りの知識は当たり前すぎるので誰も教えてくれないのでは?と思いブログにしました。
次回は発展的な内容も含むため、さらに多くの人のお役に立つと思います。
それでは次の記事でお会いしましょう。

satokのブログ