VSコード（Visual Studio Code）は、豊富な機能とカスタマイズ性に優れたエディタです。ショートカットキーを活用することで、コーディングの効率を大幅に向上させることができます。この記事では、よく使われるショートカットキーと作業効率を上げる設定について詳しく説明します。
1. 基本的なショートカットキー
1.1 ファイル操作
新しいファイル作成：
Ctrl + N（MacではCmd + N）
新しいファイルをすばやく作成できます。ファイルを保存：
Ctrl + S（MacではCmd + S）
現在のファイルを保存します。定期的な保存は非常に重要です。すべてのファイルを保存：
Ctrl + K + S（MacではCmd + Option + S）
開いているすべてのファイルを一括で保存します。
1.2 ナビゲーション
ファイルを開く：
Ctrl + P（MacではCmd + P）
ファイル名を入力してすばやく開けます。行へのジャンプ：
Ctrl + G（MacではCmd + G）
特定の行番号に一気にジャンプできます。エクスプローラーの表示/非表示：
Ctrl + B（MacではCmd + B）
サイドバーのエクスプローラーを表示または非表示にできます。
1.3 エディタ操作
複数カーソル：
Alt + クリック（MacではOption + クリック）
複数の場所にカーソルを立てることで、同時に複数の箇所を編集できます。コメントアウト：
- 単一行コメント：
Ctrl + /（MacではCmd + /） - 複数行コメント：
Shift + Alt + A（MacではCmd + Option + A）
コメントの切り替えが簡単に行えます。
- 単一行コメント：
選択範囲のインデント：
Ctrl + ]（MacではCmd + ]）
選択範囲をインデント（字下げ）します。逆はCtrl + [（MacではCmd + [）。コードフォーマット：
Shift + Alt + F（MacではShift + Option + F）
ドキュメント全体や選択範囲を自動でフォーマットします。複製行：
Shift + Alt + ↓（MacではShift + Option + ↓）
現在の行を下に複製します。削除行：
Ctrl + Shift + K（MacではCmd + Shift + K）
現在の行を削除します。
1.4 検索と置換
検索：
Ctrl + F（MacではCmd + F）
ファイル内でテキストを検索します。置換：
Ctrl + H（MacではCmd + H）
検索したテキストを他のテキストに置換します。
1.5 その他便利なショートカット
クイック修正（エラーの修正候補表示）：
Ctrl + .（MacではCmd + .）
エラーや警告に対して、VSコードが修正候補を提案します。シンボルの定義にジャンプ：
F12
定義された場所へジャンプできます。Ctrlを押しながらクリックでも可能。シンボルの参照を確認：
Shift + F12
シンボルがどこで使用されているか一覧表示します。
2. 作業効率を上げる設定
2.1 自動保存
- 自動保存の有効化：
常にファイルの保存を忘れてしまう人には、ファイルを自動保存する設定がおすすめです。Ctrl + ,（MacではCmd + ,）で設定画面を開く- 「Auto Save」を検索し、
afterDelayやonWindowChangeを選択することで自動保存が有効になります。
2.2 ミニマップの非表示
- ミニマップの無効化：
デフォルトでは右側にコードの「ミニマップ」が表示されていますが、これが邪魔な場合は以下の方法で非表示にできます。- 設定画面で「Minimap」を検索
- 「Editor: Minimap Enabled」のチェックを外す
2.3 スニペットの活用
- スニペットの設定：
よく使うコードブロックをスニペットとして登録しておくと、入力効率が上がります。Ctrl + Shift + P（MacではCmd + Shift + P）で「Snippets」を検索Preferences: Configure User Snippetsを選択して、プロジェクトに合わせたスニペットを作成
2.4 ライブサーバー機能の活用
- Live Serverの設定：
HTMLやCSSの変更をリアルタイムで確認するためには、「Live Server」という拡張機能が便利です。拡張機能をインストールし、右クリックで「Open with Live Server」を選択すると、変更が即座にブラウザで反映されます。
2.5 タブ設定のカスタマイズ
- インデントガイドの表示とタブの設定：
インデントをより見やすくするために、設定から「インデントガイド」を表示させることができます。また、タブの幅やスペースでのインデントもカスタマイズ可能です。- 設定画面で「Indentation」を検索し、設定をカスタマイズ
- 必要に応じて、
spacesやtabsを使い分け
3. よく見るclass名の例
以下は、一般的に使用されるclass名の例です。
- container：ページ全体を囲むコンテナ要素に使用
- header：ヘッダー部分を表すクラス
- nav：ナビゲーションメニューに使用
- footer：フッター部分に使用
- btn：ボタン要素に使用
- active：現在アクティブな状態を示すクラス
- hidden：非表示の要素に使用
- text-center：テキストを中央揃えにするクラス
これらのクラス名は、一般的にプロジェクトで再利用され、コードを読みやすく、管理しやすくするために役立ちます。
まとめ
VSコードのショートカットキーやカスタマイズ機能を活用すれば、作業効率を飛躍的に向上させることができます。自動保存やスニペット、ライブサーバーの利用など、エディタの機能をフルに使いこなし、快適なコーディング環境を作りましょう。
コメント