2. VSCodeの基本

オンライン教材 > VSCode & Cursor 超入門

VSCode & Corsorの基本画面

VSCode

VSCodeは縦要素に3つに別れています。

Cursor

Corsorは縦要素に2つに別れています。

項目 画面
1 アクティビティバー よく利用するメニュー
2 エクスプローラー フォルダやファイルの一覧表示
3 エディタエリア ファイルの表示・編集画面

1. アクティビティバー

画面一番左は「アクティビティバー」で、VSCode の標準メニューが搭載されています。

項目 画面
エクスプローラー 開いているフォルダのファイル一覧を表示
検索 ファイルの中の文字を検索・置換
実行とデバッグ プログラム実行・デバッグ※直接実行できるファイルに限る
機能拡張 VSCode & Cursor の機能拡張を管理

2. エクスプローラー

「エクスプローラー」は、フォルダやファイルの一覧を表示します。ファイルをクリックすると、ファイルが開きエディタエリアに表示されます。

3. エディタエリア

「エディタエリア」は、ファイルの中身を表示・編集するメイン画面です。

ファイル未保存

ファイル修正中にタブやエクスプローラーアイコンに未保存のマーク表示されます。ファイル保存を忘れないように注意しましょう。

機能拡張

機能拡張とは

VSCodeやCorsorではサードパティのプラグインをインストールして機能拡張することがで、コーディング、デバッグ、ビルド、テスト、データベース接続など、さまざまな作業フローで役立つ追加機能を提供します。

標準機能

機能拡張しなくても、以下のような機能が標準搭載されています。

  • ファイル操作
  • ターミナル
  • ソース管理（Git）
  • デバッグ

機能拡張の種別

種別 概要
言語サポート シンタックスハイライト、コード補完、リファクタリングなど、プログラミング言語やフレームワークのサポート
デバッグ デバッグアダプターと連携して、ステップ実行、変数監視、ブレークポイントの設定
テーマ＆アイコン テーマやアイコンパックを選択して、エディタの外観を変更
コードスニペット よく使用するコードを素早く挿入し、効率的にコーディング
静的解析 コードの解析や警告の表示し、コード品質の向上やバグの早期検出
フレームワークサポート: フレームワークやテクノロジー（例：Laravel、React、Docker、Pythonなど）のサポート

プラグインのインストール

Visual Studio Code Marketplace

機能拡張は「Visual Studio Code Marketplace」と呼ばれる公式のオンラインストアで提供されています。このマーケットプレイスから必要な機能拡張を検索してインストールできます。

日本語化プラグインのインストール

「Japanese Language Pack for Visual Studio Code」プラグインを使ってエディタを日本語化できます。

機能拡張メニュー

「アクティビティバー」から「機能拡張」をクリックします。

検索

検索のテキストボックスに「Japanese」を入力し、「Japanese Language Pack for Visual Studio Code」を探します。

インストール

「Japanese Language Pack for Visual Studio Code」が見つかったら選択し、【Install】をクリックしてインストールします。

再起動して確認

エディタを再起動して、メニューなどが日本語化されているのを確認しましょう。

Web開発のプラグイン

プラグインはたくさんありますが、Web開発系のおすすめのプラグインを紹介します。

  • プラグインは入れ替わりがサポートが終了しやすいので、開発言語や好みに合わせながらインストールしてみましょう。

Path Intelisense

コーディングのとき、ファイル、フォルダ、画像パスの候補から自動入力してくれます。スペルミスやリンク切れを防ぐのに効果的です。

Auto Close Tag

HTMLの終了タグを自動入力してくれます。

Auto Rename Tag

HTMLの開始、終了タグを自動でリネームします。

JavaScript (ES6) code snippets

ECMAScript6 対応のコードスニペットです。

CSS Formatter

CSS をフォーマット（綺麗に整形）してくれるプラグインです。

コマンドパレットとは

コマンドパレットは、インストールした機能拡張プラグインを利用するためのコマンド入力モードです。 コマンドパレットは、メニュー選択やショートカットで起動します。

コマンドパレットを開く

メニューから「表示＞コマンド パレット...」を選択します。

コマンドパレットのテキストボックスが表示されたら「language」と入力し、「Configure Display Language」を選択します。

表示したい言語を入力、または選択します。英語は「en」日本語は「ja」です。

ショートカットを利用して効率化

コマンドパレットはとてもよく利用する操作なので、ショートカットを覚えておくとよいでしょう。

OS キー
Mac Cmd + P
Windows Ctrl + P
<< はじめに

VSCode & Cursor 超入門