VSCodeの使い方

VSCodeとは

Visual Studio Code (以下VSCode)は、エディタ（ソースコードを書くためのソフト）の一種です。以下のような特徴を持つことから、現在幅広く使われています。

  • 軽量で、動作が非常に高速
  • txtはもちろん、R、Python、C++、md、htmlなどほとんどの言語・ファイル形式に対応
  • プログラムの記述、実行、デバッグ、ソースコード管理なまで、一通りの機能がそろっている
  • 拡張機能をはじめ、カスタマイズ性が高い
  • Windows、macOS、Linuxなど、環境を問わず無料で利用可能

このページでは、Visual Studio Codeのインストールから簡単な使い方まで、一通り解説します。

セットアップ

インストール

公式Webサイトからインストーラーをダウンロードしてきてもよいですが、以下のようなwinget（Windows）あるいはbrew（macOS）を使ったインストールが簡単です。

スタートメニューでPower Shellと検索し、出てきたアプリを実行してください。開いた画面で、以下のコマンドを入力し、最後にエンターキーをおしてください。

winget install Microsoft.VisualStudioCode

homebrewをインストール後、ターミナルで以下のコマンドを入力し、最後にエンターキーをおしてください。

brew install --cask visual-studio-code
webサイトからもダウンロードできます

上手くいかなければ、以下のWebサイトからもインストール可能です。
https://code.visualstudio.com

上手くインスト―スできれいれば、Power Shell、またはターミナル上で以下のコマンドを入力し、最後にエンターキーを押すことで、VSCodeが立ち上がるはずです。

code

もちろん、スタートメニュー（Windows）やアプリ一覧から開いてもかまいません。

日本語化

デフォルトでは英語表示なので、日本語化しましょう。左側のアクティビティバーから拡張機能ボタン（4つの四角マーク）を選びます。検索窓でJapaneseを検索し、出てきた一番上のJapanese Language Pack for Visual Studio Codeのinstallボタンをクリックします。

すると、右下に言語設定を変えて再起動するか尋ねてくるポップアップが出るので、青いボタンを押します。

これで、表示が日本語に切り替わったはずです。

うまく日本語化できない？

上記でうまく日本語化できない場合、Japanese Language Pack for Visual Studio Codeのインストール後、VSCode上部の検索窓に 「> display」と入力し、出てきた候補から「Configure Display Language」を選択し、日本語を選んでみてください。

拡張機能の導入

以下の説明では、VSCodeに拡張機能を導入する操作がしばしば出てきます。実は、先ほど日本語化した際にインストールしたJapanese Language Pack for Visual Studio Codeは拡張機能の一種です。ほかの拡張機能も導入方法は同じです。

  1. アクティビティバーから拡張機能ボタン（4つの四角マーク）を選ぶ。
  2. 検索窓で導入したい拡張機能の名称を検索し、該当する拡張機能のインストールボタンを押す。
  3. 表示されていた「インストール」の表示が消えれば完了。

基本の使い方

開く単位はフォルダ

VSCodeでは、フォルダ（ディレクトリ）を単位として開くことをお勧めします。これは、プログラミングでは複数のファイルを同時に扱うことが多いためです。

ファイルは開けない？

もちろん、ファイルを単独で開くこともできます。ただ、後述するエクスプローラなどの一部機能が使えなくなるため、特に理由がなければ「いじりたいファイルがあるフォルダごと開く」ことを癖にしておくと良いでしょう。

  • フォルダを開く：上部メニューの「ファイル」から「フォルダーを開く」を選択し、目的のフォルダを選択することでそのフォルダを開くことができます。

作成者を信頼しますか？

初めて開くフォルダでは、以下の画像のような警告画面が表示されることがあります。VSCodeは読み込んだプログラムの実行などが簡単にできるため、悪意のあるプログラムの実行を防ぐため警告が表示されるようです。

自分で作成したフォルダや、信頼できる場所からダウンロードしたファイルの場合、気にせず「はい、作成者を信頼します」を選んでください。「いいえ」を選んだ場合、プログラムの実行等が制限されます。

なお、「はい」の上部にある「親フォルダ・・・内のすべてのファイルの作成者を信頼します」にチェックを入れると、以後その親フォルダ内（つまり開いたフォルダの一つ上の階層のフォルダ内）にあるファイル・フォルダを開く場合は警告が表示されなくなります。

以下では、「古典集」というサンプルフォルダを開いてみます。このサンプルを試してみたい場合は、以下からzipファイルをダウンロード後、中にある「古典集」というフォルダを適当な場所においてから開いてみて下さい。

【古典集（サンプルフォルダ）をダウンロード】

画面構成

画面全体の構成は以下のようになっています。

  1. メニューバー：フォルダを開いたり、表示設定、細かい編集操作に使用。画面幅が狭いと省略され「≡」と単一ボタンとなっていることもある。
  2. アクティビティバー：主要なツールへのアイコンを表示。基本的にここを切り替えながら作業する。
  3. サイドバー：アクティビティバーで選択している画面を表示。
  4. メイン画面：開いたファイル等はここにタブ形式で表示。
  5. ステータスバー：ファイルについての情報等を表示

ファイルの表示と編集

アクティビティバーの一番上、ファイルマークのアイコンが、「エクスプローラ」です。フォルダの中身の表示、ファイルの表示、ファイルの作成・削除などを行います。

  • サイドバー上部には、現在開いているフォルダ名（この例では「古典集」）が表示される。
  • 開いたフォルダ内にあるファイル・フォルダ一覧が並ぶ
    • これらのファイル・フォルダの配置は、実際のフォルダ内の階層構造と一致している。

  • ファイルをクリックすると、メイン画面にそのファイルがタブで開く。
    • ワンクリックだと上部タブのファイル名が斜体の「プレビューモード」で表示される。この状態だと、別のファイルをクリックすると表示が切り替わる。
    • ダブルクリック、またはプレビューモードで開いたファイルを編集すると、ファイル名が通常のフォントになり、タブの閉じる「×」を押さない限り開いたままになる。

  • ファイルを編集すると、タブの閉じるマークが「○」に変わる。保存すると「×」に戻る。

  • 未保存のファイルがあると、その数がエクスプローラボタンにバッジで表示される

  • 一行が右側に長すぎる場合、メニューバーの「表示」→「右端での折り返し」を選択することで、折り返される。

  • メイン画面右上の「分割」ボタンを押すことで、複数のファイルを並べて表示できる

不要な表示を消しておく

初期設定では、いくつか混乱を招きやすい表示設定がなされているので、2か所ほど設定変更することをお勧めします。

  • エクスプローラでは、最初開いたタブの一覧などが表示されるようになっています。しかし、フォルダ内の構造と紛らわしいので、消しておくことをお勧めします。
    • エクスプローラ画面の右上、「…」をクリックし、フォルダー以外のチェックを外す
    • 戻し方は、再度「…」をクリックしチェックを入れるだけです

  • ファイルを開くと、スクロールバーの横に「ミニマップ」と呼ばれるファイルの縮小表示がなされます。巨大なファイルでもない限り不要なので、消しておくことをお勧めします。
    • ミニマップ上で右クリックし、「ミニマップ」のチェックを外す。
    • 戻し方は、メニューバーの「表示」→「外観」→「ミニマップ」をチェック。

ファイル形式ごとの表示

ファイルの拡張子に応じて柔軟に表示が切り替わる点が、VSCodeの大きな特徴の一つです。一部は拡張機能の導入が必要です。

  • 画像ファイル：多くの形式はタブで表示可能
  • markdown形式：右上のプレビューボタンを押すことで、成形された表示を確認できる。

  • html形式：html構文が色分けで表示される
    • 拡張機能「HTML Preview」を入れることで、プレビューボタンが表示される。

  • json形式：json構文が色分けで表示され、エラーがあると赤く表示される

  • csv形式：拡張機能「Rainbow CSV」を入れることで、列ごとに色分けで表示される。

  • pyファイル（Python言語）：拡張機能「Python」を入れることで、メイン画面右上に実行ボタン「▷」が表示される。押すと、下部のターミナルに実行結果が表示される。
    • 別途、pythonのインストールが必要です。

  • rファイル（R言語）：拡張機能「R」を入れることで、メイン画面右上に実行ボタン「▷」が表示される。押すと、下部のターミナルに実行結果が表示される。
    • 初回のみRの起動に使われるので、2回実行ボタンを押す必要があります。
    • 別途、Rのインストールが必要です。

拡張機能のおすすめ

ファイルを開くと、右下におすすめの拡張機能が表示されることがあります。基本的に入れて損はない拡張機能がおすすめされるので、インストールしておいて構いません。

ファイルの移動、作成、削除

エクスプローラからは、様々なファイル操作が可能です。

  • ファイルの作成：エクスプローラ上部のボタンから新規ファイルの作成・新規フォルダの作成。
    • クリックすると名前欄への入力に切り替わる。
    • 拡張子でファイル種別を識別しているので、必ず拡張子まで書く。
    • メニューバーの「ファイル」→「新しいファイル」でも同様。

  • ファイルの移動：ファイル名をクリック&ドラッグで移動
  • ファイルの削除、名前変更、コピーファイルを右クリックしたメニューからコピーや名前の変更、ファイルの削除が可能

便利な機能

VSCodeを使用する上で、いくつかの便利な機能について触れておきます。

ファイルの比較

2つのファイル間の差分を表示できます。

  1. 変更「前」のファイルをエクスプローラで右クリックし、「比較対象の選択」を選ぶ
  2. 変更「後」のファイルをエクスプローラで右クリックし、「選択項目と比較」を選ぶ

  1. 「変更前ファイル⇔変更後ファイル」の名称のタブが開き、差分が赤（削除）と緑（挿入）で表示される

検索、置換

VSCodeは二つの検索機能を持っています。

一つはファイル内検索です。ファイルを開いた状態で「Ctrl」+「F」で開きます。

  • 右端の「>」を押すと、置換モードになる。
  • 検索欄右端の3つのボタンはそれぞれ以下の通り
    • 「Aa」：大文字と小文字を区別する（デフォルトでは区別しません）
    • 「ab」：単語単位で検索する（スペースやハイフンなどの区切りで分けて一致する場合のみヒット）
    • 「■*」：正規表現と呼ばれる複雑な検索条件を表現する記法を有効にする
  • 一番右端の「≡」を押すと、選択した範囲内で検索

もう一つは、フォルダ内検索です。アクティビティバー二つ目の虫眼鏡が「検索」ボタンで開きます。

  • フォルダ内にある全ファイルに対して、検索できる。
    • ヒットしたリストをクリックすると、ファイルの該当部分が表示される。
  • 右端の「>」を押すと、置換モードになる。
  • 検索欄右端の3つのボタンの機能はファイル内検索と同じ。