ショートカットと便利機能 | Visual Studio Codeの設定 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

Visual Studio Codeのショートカットと便利機能とは?

Visual Studio Code(VSCode)は、さまざまなショートカットと便利機能を備えており、これを活用することで開発効率を大幅に向上させることができます。ここでは、特にJavaScript開発に役立つショートカットとVSCodeの便利機能を紹介します。

よく使われるショートカット一覧

以下は、VSCodeで頻繁に使われるショートカットの一覧です。これらを覚えておくと、コード編集やファイル管理がよりスムーズになります。

操作 Windows / Linux Mac
コードフォーマット Shift + Alt + F Shift + Option + F
コメントアウト(行コメント) Ctrl + / Cmd + /
コメントアウト(ブロックコメント) Shift + Alt + A Shift + Option + A
クイックオープン Ctrl + P Cmd + P
ファイルの切り替え Ctrl + Tab Cmd + Tab
エクスプローラ表示/非表示 Ctrl + B Cmd + B
ファイルを保存 Ctrl + S Cmd + S
複数行選択 Ctrl + D Cmd + D
コードの折りたたみ/展開 Ctrl + Shift + [ / ] Cmd + Shift + [ / ]

Visual Studio Codeの便利機能

ショートカット以外にも、VSCodeには多くの便利機能が搭載されています。ここでは、特に役立つ機能を紹介します。

マルチカーソル機能

マルチカーソル機能を使うと、複数の位置にカーソルを置き、同時に異なる場所での編集が可能です。これにより、同じ変数やタグの一括修正が簡単に行えます。

コードフォーマットの自動適用

コードフォーマットは保存時に自動的に適用されるように設定できます。この設定は非常に便利で、コードの整形を忘れる心配がなくなります。

自動フォーマットの設定方法

以下の手順で自動フォーマットを設定します。

  1. メニューから「File」→「Preferences」→「Settings」を選択します。
  2. 検索バーに「format on save」と入力し、editor.formatOnSaveをオンにします。

Zen Mode(集中モード)

Zen Modeでは、余分なメニューやツールバーを非表示にして、コードに集中することができます。フルスクリーンで、サイドバーやタブを隠してコードだけを表示するため、特に集中したいときに便利です。

Zen Modeの起動方法

以下の手順でZen Modeを起動します。

  1. ショートカットCtrl + K Z(Windows/Linux)またはCmd + K Z(Mac)を押します。
  2. Zen Modeがオンになり、再度同じショートカットを押すと元に戻ります。

ファイル比較機能

VSCodeには、異なるファイル間のコードの違いを比較する機能があります。Gitなどのバージョン管理システムを利用する際、変更点の確認に役立ちます。

ファイル比較の使い方

以下の手順でファイル比較を行います。

  1. エクスプローラーで2つのファイルを選択し、右クリックメニューから「Compare Selected」を選びます。
  2. VSCodeが自動的に2つのファイルの差分を表示します。

まとめ

Visual Studio Codeには、多くのショートカットや便利機能が搭載されており、それらを活用することで開発効率が大幅に向上します。特に、JavaScriptのコードを効率的に編集するためには、これらのショートカットを覚え、マルチカーソルや自動フォーマットなどの便利機能を使いこなすことが重要です。Zen Modeやファイル比較機能も非常に役立つため、ぜひ試してみてください。