RUNTEQで学習のいささんです。
学習中に使っているVS Codeのちょっと使いやすくなる拡張機能とショートカットを紹介します。
拡張機能
Japanese Language Pack for Visual Studio Code
VScode のメニュー等を日本語化してくれます。
プログラミングを勉強する際、英語には慣れる必要がありますが、コードやエラー文以外のところは日本語にしておくと少しストレスが減ります。
Material Icon Theme
ファイル種別に合わせてアイコンを設定してくれます。
デフォルトで用意されているものよりディティールが細かいのと、設定される種類が多いです。（アイコン可愛いので気分も上がります）
このMaterial Icon Themeはフォークされたもので、オリジナルの拡張機能は開発終了となっているようで、本家の後継としてVira Themeというアイコン以外に配色テーマも含めて変更できるものがあるようです。認知負荷を減らして長時間コーディング作業ができるようにしているとか。
erb
erbファイルの <% %> とか <%= %> のコード部分をハイライトで色分けしてくれます。
この拡張機能と、VS Codeの設定、emmet.includeLanguages を以下のように設定することで、ERBファイルでもhtmlタグの補完ができるようになります。
ショートカット
ここからはショートカットです。Macのキーを基準に、カッコ内はWindowsのキーになります。
ファイル操作系
cmd (ctrl) + P : ファイルの呼び出し
ディレクトリのツリーからファイルを探しに行かなくても良くなります
移動系
option(alt) + ↑/↓ : カーソル行のテキストの移動
コードの順番を入れ替えたい時に使います
ctrl(ctrl) + G : 指定の行へジャンプ
エラー表示された行にジャンプして、エラーの原因を探します。
option(alt) + shift + ↑/↓ : カーソル行を複製して移動
同じ動作などを行ごとコピーするのに使います
編集系
cmd(ctrl) + enter : カーソル行の下に空行を入れる
行末にいなくてもcmdを押しながら、enterを押すとカーソル行に影響なく、カーソル行の下に改行することができます
cmd(ctrl) + shift + enter : カーソル行の上に改行を入れる
htmlやerbの編集などでdivタグの中身を入力したい時など、カーソル行の上でコードを足したい時に使います
cmd(ctrl) + shift + K : 選択行の削除
不要となった記述を行ごと削除します。さっと消せます
最後に
ここで紹介しているのは、かなり絞ったものになっています。もし、ほかにはどんなショートカットがあるのかなと思った方は、調べるばすぐでてくると思うので、自分で探して効率化していきましょう！