【新人エンジニア向け】VSCodeがより便利になる知識【part2】
新人エンジニアのsatokです。
今回も、現場配属から半年と少し経った今、私が「過去の私」に教えたい
“Windowsで”VSCodeを便利にする要素について書いていきます。
この記事は前の記事からの続きとなっております。
是非こちらもご一読ください。
※この記事では、視認性のためにコードをあえて汚く書いています。
「良いコードとは」については過去の記事で触れていますので気になる方はそちらへお願いします。(新人エンジニア向けの内容です。)
目次
1.この記事の目的
この記事では、早くに知っておくことで業務の効率を向上させることができたVSCode関連の要素について共有いたします。
「VSCodeを使い始めたけどまだ操作に慣れない」という方から、「VSCode使って少し経つけどもっと便利に使いたい」という方まで、何か助けになれば幸いです。
なお、OSはWindows10、VSCodeのバージョンは1.85.2です。
2.VSCode操作おススメpart2
本編です。
前回の記事と比較して少し応用的なものを紹介いたします。
頻繁に使用するものから、いざという時に役に立つものまでありますので是非覚えていっていただけますと幸いです。
ctrl+shift+[ : 折り畳み
メソッドやオブジェクトなど”{}”(チュウカッコ、と私は読んでいます)などのカッコ類で囲まれている範囲を折りたたむことができます。
画面上のvマークをクリックすることでも折りたたむことができます。
ctrl+shift+n : 新しいウィンドウを立ち上げる
今開いているVSCodeの画面とは別にVSCodeの画面を立ち上げることができます。
これだけでは特に用途はありませんが、ここから「エクスプローラー」->「フォルダーを開く」を押下し、フォルダを選択することで運用することができます。
特に、gitの別のリポジトリで作業する場合は画面を分けた方が良いでしょう。(push先のミスなどに繋がるため)
ctrl+g -> 数字 : 行数に飛ぶ
数字を入力しエンターキーを押下することで、指定した行数に遷移することができます。
例のような行数では恩恵はありませんが、ファイルが大きくなり、1000行単位などになってくるとかなり恩恵があります。
例えば5000行ほどあるファイルにおいて、「3254行目を修正して」と言われた場合、
スクロールだけでたどり着くのはそれなりに時間がかかってしまいます。
しかし、この操作を覚えておけば一発で飛ぶことができます。
ctrl+. : クイックフィックス
赤い波線や黄色の波線が引かれている箇所にカーソルを合わせ、ctrl+.(ドット)でクイックフィックスを開けます。
コードが何か間違えている、もしくは改善できる際にクイックフィックスを利用することができます。
shift+alt+↑ or shift+alt+↓ : 行の複製
カーソルがある行を複製することができます。
デバッグする際や目印などを一時的に残す際に使用することがあります。
蛇足かもしれませんが、上記でない目的の場合、特にコードの特定の挙動を複製する際は、
ループなどで簡略化できる場合がほとんどだと思いますのでリファクタすることをおススメします。
ctrl+shift+p : コマンドパレット
コマンドパレットと呼ばれるものを開くことができます。
これは、コマンドプロンプトなどとは別の機能であり、VSCodeに対して命令を出すことができます。
かなり様々な命令がありますが、今回は2つ、実際に私が使ったものを紹介いたします。
基本設定: キーボードショートカットを開く
各種ショートカットを閲覧、変更することができます。
コマンドパレットに「キーボード」や「open key」など入力すると設定がサジェストされます。
この設定を選択すると、以下の画像のような画面に遷移します。
ここではVSCodeデフォルトのショートカットキーや拡張機能によって追加されたショートカットキーを確認することができます。
また、それぞれのショートカットキーは変更が可能であり、上の画像の赤丸で囲ったペンのアイコンを押し、設定したいショートカットキーを入力することで登録することができます。
ちなみに設定が他のショートカットキーとバッティングすると注意されますが、無視して登録することもできます。
もちろん推奨はしません。
被らないようなショートカットキーにすることをおススメします。
ファイル: アクティブファイルを比較しています…
今開いているファイルと他のファイルの差分を視覚的に表示することができます。
イメージはgitでの差分表示に近いです。
コマンドパレットに「アクティブ」や「compare」と入力すると設定がサジェストされます。
この設定を選択すると、以下の画像のように、比較対象のファイルを選択する欄が表示されます。
ここには一度VSCodeで開いたことがあるファイルのみが表示されるため、選択肢にない場合は一度ファイルをVSCodeで開いてください。
ここでファイルを選択すると、以下の画像のようにファイルの差分がハイライトされて表示されます。
なお、ファイルに差分がない場合はファイルの全量がそのまま表示されます。
[応用]grepの再現
そもそも「grepとは」という方もいらっしゃると思うので軽く解説します。
grepとは、Unix系で使用できるコマンドの一種であり、「検索したい文字列がある行」を検索することができます。
前回紹介したctrl+fと似たようなものではありますが、こちらは該当する単語が存在する行全体を取り出すことができます。
VScode自体には、デフォルトでgrepコマンドのような機能はなく、ターミナルとしてgit bashを使うか、拡張機能を入れることで使用することができます。
以下ではVSCodeの機能のみでこのgrepコマンドを再現する方法を記載しますが、grepコマンド自体は上記の方法で行うことが確実に簡単なので、「VSCodeにはこういう機能もあるのか」といった感じでご覧ください。
①ctrl+shift+fで検索
ctrl+shift+fで表示される検索窓に、grepで検索したい文字列を入力します。
この時、検索対象のファイルを「含めるファイル」の欄に入れることを忘れないでください。
今回は例として”aaa”という文字列を検索します。
②「エディターで開く」
「エディターで開く」を押下すると、以下のような画面が表示されます。
③コンテキスト行を切り替える
この状態では、検索した文字列が含まれる行の前後1行も表示されてしまっているため、画面右上の3本線のボタンを押下します。
こうすることで、余計な行を取り除くことができます。
この機能は正確には「該当箇所の前後何行を表示するか」を調整してくれるものなので、3本線のボタンのすぐ左にある数字を0にすることでも同様の表示にすることができます。
④行番号を置換で消去する
ここまででおおよそgrepコマンドと同様の表示が得られていますが、このままでは行番号が余計です。
最後に以下の正規表現を用いて行番号を消去しましょう。
^ *[0-9]*: *
上記の正規表現を「置換」(前回参照)の枠に入力し、置換後を空白のまま「すべて置換」(下の画像の赤枠)を実行します。
これでgrepコマンドの再現が完了です。
結果の部分をお好みでコピーし、使用してください。
2度目にはなりますが、grepコマンドを使用したい、という目的でこの方法を用いることはおススメしません。
VSCodeに搭載されている機能を組み合わせると様々なことができる、ということが伝わっていれば幸いです。
4.まとめ
今回はWindowsでVSCodeを便利にする要素について、前回よる発展的な内容に触れて書きました。
VSCodeの機能は紹介したもので全てではないため、まだまだ役に立つ機能がたくさんあります。
今回は紹介することができませんでしたが、「拡張機能」を用いることで業務の効率をさらに上げることもできます。
「こんな機能が欲しい」と思ったとき、大抵は拡張機能として用意されていることがほとんどのため、困ったときは調べてみるのも良いと思います。
それでは良きVSCodeライフを。
また次の記事でお会いしましょう。
