こんにちは、皆さん！今日は、エンジニアの作業効率を大幅に向上させるショートカットキーと拡張機能について解説します。

ショートカットキー

これらのショートカットキーは、日常のコーディング作業を効率的かつ迅速に進めるために非常に役立ちます。基本的なコマンドが多いですが、おさらいとして学習していってください。カチカチとキーボードで操作しているのを見るとかっこいいですよね。私は憧れます。

基本操作

Windows:

• Ctrl + X: カット。選択範囲を切り取ります。
• Ctrl + C: コピー。選択範囲をコピーします。
• Ctrl + V: ペースト。クリップボードからコピーまたはカットした内容を貼り付けます。
• Ctrl + Z:戻す。 変更を元に戻します。
• Ctrl + Shift + Z:戻した操作を戻す。元に戻した操作を取り消します。
• Ctrl + S: 保存。ファイルを保存します。
• Ctrl + F: 検索。テキスト内を検索します。
• Ctrl + H: 置換。テキスト内の文字列を置換します。
• Ctrl + A: 全選択。文書内のすべてのテキストを選択します。

Mac:

• Cmd + X: カット。選択範囲を切り取ります。
• Cmd + C: コピー。選択範囲をコピーします。
• Cmd + V: ペースト。クリップボードからコピーまたはカットした内容を貼り付けます。
• Cmd + Z:戻す。 変更を元に戻します。
• Cmd + Shift + Z:戻した操作を戻す。元に戻した操作を取り消します。
• Cmd + S: 保存。ファイルを保存します。
• Cmd + F: 検索。テキスト内を検索します。
• Cmd + H: 置換。テキスト内の文字列を置換します。
• Cmd + A: 全選択。文書内のすべてのテキストを選択します。

便利な編集機能

Windows:

• Alt + Shift + F: コード整形。コードをきれいな形式に整形します。
• Ctrl + Space: 自動補完。変数名、関数名などを自動で補完します。
• Ctrl + /: コメント行追加。選択した行または行をコメントアウトします。
• Ctrl + /: コメント行解除。選択した行または行のコメントアウトを解除します。
• Ctrl + D: 次の一致項目の選択。同じ単語を順番に選択します。リファクタリングに便利です。

Mac:

• Option + Shift + F: コード整形。コードをきれいな形式に整形します。
• Ctrl + Space: 自動補完。変数名、関数名などを自動で補完します。
• Cmd + /: コメント行追加。選択した行または行をコメントアウトします。
• Cmd + /: コメント行解除。選択した行または行のコメントアウトを解除します。
• Cmd + D: 次の一致項目の選択。同じ単語を順番に選択します。リファクタリングに便利です。 ファイルとウィンドウ管理

Windows:

• Ctrl + Tab: タブ切り替え。開いているファイル間を素早く切り替えます。
• Ctrl + W: タブ閉じる。現在のファイルタブを閉じます。
• Ctrl + Shift + T: 最後に閉じたタブを再開。誤って閉じたファイルを素早く戻します。
• Ctrl + B: サイドバーの表示切り替え。プロジェクトのファイルとフォルダを一覧表示します。

Mac:

• Cmd + Shift + [ or ]: タブ切り替え。開いているファイル間を素早く切り替えます。
• Cmd + W: タブ閉じる。現在のファイルタブを閉じます。
• Cmd + Shift + T: 最後に閉じたタブを再開。誤って閉じたファイルを素早く戻します。
• Cmd + B: サイドバーの表示切り替え。プロジェクトのファイルとフォルダを一覧表示します。

これらのショートカットキーは、日常のコーディング作業を効率的かつ迅速に進めるために非常に役立ちます。Visual Studio Codeでは、これらのショートカットキーのカスタマイズも可能です。設定を開いて、自分の作業スタイルに合ったショートカットキーに変更することができます。

拡張機能

次は開発作業を効率化するための便利な拡張機能を20個紹介します。これらの拡張機能は、コーディングの生産性を向上させるための強力なツールです。それでは、早速見ていきましょう。

1. Prettier

Prettierは、コードを美しく整形してくれる拡張機能です。設定をカスタマイズして、チーム全体で一貫したコードスタイルを維持することができます。保存時に自動でコードを整形してくれるので、手動で整える手間が省けます。

2. ESLint

ESLintは、JavaScriptやTypeScriptのコードを検証し、問題を指摘してくれるツールです。カスタムルールを設定して、コードの品質と一貫性を保つことができます。初心者がよく犯すミスを未然に防ぐのに役立ちます。

3. GitLens

GitLensは、コードの各行が誰によって、いつ変更されたかを簡単に確認できるGitの拡張機能です。ブランチやコミットの履歴を直感的に探索できるため、バージョン管理が学べます。

4. Debugger for Chrome

Debugger for Chromeは、VS Code内で直接Google Chromeのデバッグを可能にする拡張機能です。ブレークポイントを設定したり、ステップ実行したり、変数の値を監視したりできます。これにより、コンテキストを切り替えることなく、効率的にデバッグ作業を行うことができます。

5. Live Server

Live Serverは、ローカル開発サーバーを簡単に立ち上げて、リアルタイムでWebページの変更を確認できる拡張機能です。HTMLやCSSを編集して保存すると、自動的にブラウザが更新されるので、変更をすぐに確認できます。

6. Indent-Rainbow

Indent-Rainbowは、インデントの深さに応じて色を変えて表示する拡張機能です。これにより、コードの構造を視覚的に理解しやすくなります。特に、ネストが深くなった場合や、大きなファイルを扱う際に役立ちます。

7. zenkaku

zenkakuは、全角スペースを可視化する拡張機能です。全角スペースは目で見ても見つけにくいため、この拡張機能があると、全角スペースが誤って入力されている場所をすぐに見つけることができます。

8. Trailing Spaces

Trailing Spacesは、行の最後に無駄なスペースがある場合にそれを強調表示する拡張機能です。これにより、不要なスペースをすぐに見つけて削除することができ、コードをきれいに保つことができます。

9. Image preview

Image previewは、HTMLやCSSで画像のファイルパスを入力した際に、その画像をエディター上でプレビューしてくれる拡張機能です。毎回ブラウザなどで確認しなくても、パスが合ってるかわかるため作業効率がアップしミスも軽減してくれます。

10. Fig

Figは、ターミナルでコマンドラインを入力する際、コマンドやオプション、ファイルパスなどを補完して使いやすくしてくれる拡張機能です。コマンドラインが苦手、なかなか覚えられずいつも調べてるという方は必見です。

11. IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTMLは、classを付与するのに、なんて名前付けたか忘れたり、タイプミスしたり、ほかに使った場所までコピペするのに探したり面倒だと思ったことはないでしょうか。この拡張機能を入れておくと、入力候補を表示して手助けしてくれるため、面倒な思いをしないで済むようになります。

12. CSS Formatter

CSS Formatterは、CSSの記述で、インデントや改行がずれているときに簡単に整形してくれます。一つ一つ目で探すのは大変なので、ショートカットで一括修正してくれるのは嬉しいですね。

13. IntelliCode

IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。

14. CSS Peek

CSS Peekは、HTMLファイル内でCSSクラス名やIDにマウスオーバーすると、そのスタイル定義をプレビュー表示してくれる拡張機能です。これにより、スタイル定義を確認するためにCSSファイルを切り替える手間が省けます。

まとめ

VS Codeの便利なショートカットキーと拡張機能についてご紹介しました。これらのツールを活用することで、コーディングの効率と品質が大幅に向上します。初心者から経験豊富な開発者まで、これらのツールは誰にとっても有用です。

しかし、最も重要なのは、自分自身の作業スタイルに最適なツールを見つけることです。今回紹介したツールは一例に過ぎません。VS Codeの拡張機能は数千もあり、それぞれが異なるニーズを満たすために設計されています。是非、自分に最適な拡張機能を見つけて、より効率的な開発環境を構築してください。

最後に、この記事があなたのVS Code体験を向上させる一助となれば幸いです。どんなフィードバックも大歓迎ですので、何か質問やコメントがあればお気軽にお寄せください。Happy coding!