VS Code のセットアップ

Microsoft が無償でデベロッパー向けに提供している Visual Studio Code (以後VS Codeと略記)をセットアップする手順を説明します。

image-20240312154726503

VS Code の導入

ダウンロード

https://code.visualstudio.com/ にアクセスするとダウンロードリンクが見えるでしょう。

image-20231009193111716

クリックするとダウンロードフォルダに VS Code がダウンロードされます。しばらくするとダウンロードフォルダの中(導入一番下、下図の赤枠でマークしたところあたり)にVS Codeのアイコンが見えているはずです。

image-20240312163959246

インストール(といっても置くだけ)

VS Code には特別なインストール作業はありません。アプリケーションを起動する一般的な方法(Finderでファイルをダブルクリックするなど)で起動できます。しかしダウンロードフォルダはどんどん新しいファイルが追加されていって探すのが面倒になるので、アプリケーションフォルダに移しておきましょう。

ダウンロードフォルダの VS Code アイコンを一度クリックして下さい(ダブルクリックではありません)。

image-20240312164118072

下図のように「ぴょん」とアイコンが飛び出てくるでしょう。この「飛び出た矢印」、つまり「Finderで開く」アイコンをクリックしてください。

image-20240312155155683

すると下図のようにダウンロードフォルダの中身が見えますから(この表示は「リスト」表示です)、この「 Visual Studio Code 」ファイルを、Finder ウィンドウ左側に見えている「アプリケーション」にドラッグ&ドロップします。つまり「 Visual Studio Code 」ファイルを「アプリケーション」フォルダに移動させます。

image-20240312155236425

これで VS Code がダウンロードフォルダからアプリケーションフォルダに移動しました。

初回の起動

アプリケーションフォルダに入れた実行可能ファイルは、Dock にある Launchpad から名前を指定して簡単に起動することができます。Dock の以下のアイコンが Launchpad です。クリックすると Launchpad が起動します。

image-20240312162745795

Launchpad を起動すると以下のような表示になります。ここに見えている VS Code のアイコンをクリックして下さい。画面の上端に見えている検索窓に「 vs 」くらいまでタイプ入力すると表示を絞ってくれて便利です。

image-20240312162820424

初回起動時に行うべき各種設定

ダウンロードして初めて VS Code を起動するとこんな画面になるでしょう。セキュリティ上での警告です。

image-20240405161223390

今回は「信頼できるサイトからダウンロードした」ことが明らかですから、安心して「開く」を選んで下さい。一度これを通過すると、二度目からはもう確認されません。

起動に成功すると以下のような画面表示になるでしょう。

image-20240312155352787

このタイミングで各種の細かい設定を最初にやっておきましょう。以下にざっと書いておきます。

日本語環境の設定

ダウンロードしたままのVS Codeは英語版です。英語の勉強も兼ねてそのまま使い続けてもよいのですが、英語のメニューなどに慣れないのであれば日本語化しておきましょう。初回の起動(上の図)では右下に日本語環境にするか、という問いが出ますから、「インストールして再起動」ボタンを押し、日本語パッケージを入れておくと良いでしょう。

すると自動的に日本語表示に変わるでしょう。

image-20240312155937639

初回の設定を逃した人は後から手作業で日本語環境にすることもできます。以下に手順を示します。留学生が母国語で扱いたい場合や、趣味で使用言語を変えたい場合も同様の手順で言語を選択すれば良いはずです。

  1. VS Codeを起動する。

  2. メニューのView/Command Palette(Viewというメニュー項目の中にあるCommand Paletteという意味)を選択する。

image-20240312161132716

  1. 候補のリストが表示されるのでConfigure Display Languageという項目を探して選択する。上の>の欄にcoと入力すれば候補が絞られてすぐに見つかるだろう。あるいはアルファベット順になっているのでCのあたりを探す。

image-20240312161119328

  1. 下図のように言語を選択する状態になるのでInstall Additional Languageを選択する。

image-20240312161401597

  1. 左側に拡張言語パック一覧が表示されるのでJapanese Language Pack(日本語って書いてあるからすぐに見つかるよね)を選択してInstallボタンをクリックする。他の言語にしたければお好みでどうぞ。

image-20240312161516383

  1. 右下にRestartボタンが表示されるのでクリックするとVS Codeが再起動される。日本語化されていればOK。

image-20240312161553540

Python言語支援機能を追加する

プログラミングをする上で、その言語向けの編集(エディット)支援機能は有り難いので入れておきましょう。

  1. 左側の積み木のようなアイコンを選択する。

image-20240312165853489

  1. 左上の「Marketplaceで拡張機能を検索する」という入力欄に python と入力する。“Python”と書いてある候補がいくつか出てくるが、ダウンロード数が一番多い(だから一番目に表示される?)一番上のものでよいだろう。「インストール」ボタンをクリックする。

image-20240312161706868

全角スペース可視化機能を追加する

プログラミングを始めると、うっかり全角文字を入力してしまい、それに気づかないままエラーに悩まされる、というトラブルが多発します。とりあえずよくやってしまう全角スペースを表示する機能を入れておく方法を紹介します。

  1. 左側の積み木のようなアイコンを選択する。

image-20240312161918071

  1. 左上の「Marketplaceで拡張機能を検索する」という入力欄にzenkakuと入力する。いくつか候補が出てくるが、一番上のものでよいだろう。追加したい拡張機能を選択しインストールボタンをクリックする。

image-20240312162007258

文字サイズを調整する

VS Codeの初期状態では文字のサイズが少々小さめかもしれません。目が良い人は問題ないし、将来大きなプログラムを作成するようになる頃にはこの程度の文字サイズが適切かもしれませんが、最初のうちは文字を見間違えないように大きめに設定しておくのも良いでしょう。フォントの変更も可能ですが、プログラミングに適したフォントが選ばれているはずですから、最初のうちはそのまま使うのがよいでしょう。

  1. ウィンドウ左下の歯車のようなアイコンをクリックし、出てくるメニュー項目から「設定」を選択する。
  2. 各種設定項目が出てくるので、Font Sizeの欄の値を変更する(14か16くらいが最初はお薦め)。

image-20240312162200445

アプリケーションの終了

VS Code の終了はメニューから操作します。VS Code メニューの一番左「Code」の一番下にある「Visual Studio Code を終了」を選択してください。メニューに表示されているように、キーボードショートカットは ⌘Q です。つまり Command キーを押しながらアルファベットの Q キーを押すことでもこのメニューを選択できます。

image-20240312162303879

なお、エディタウィンドウの「赤(閉じる)」ボタンを押しても「ウィンドウが閉じる」だけでアプリケーションは終了しませんので念の為。(すべての)ウィンドウが閉じられると自動的にアプリケーションそのものが終了するものもありますが、VS Code はそうなっていません。

image-20240312162414196

次回起動のために

再び Launchpad から、あるいはアプリケーションフォルダを開いて VS Code をダブルクリックすれば起動できます。起動すると、こんな画面表示になるでしょう。

image-20240312162509517

VS Code は今後頻繁に起動するはずですから、そのための環境を整えましょう。

VS Code を起動すると、下図の位置にVS Code のアイコンが現れたはずです。これは「現在実行中のアプリケーション」を示しています。アイコンの下に「・(黒い点)」がついているのが「現在実行中」のマークでもあります。

image-20240312162637779

よく実行するアプリケーションは Dock に置いておくのが便利です。ドック内でドラッグ&ドロップして下図のように「すぐ左」の縦棒を超えたところまで移動させます。(Dock のどの位置に置くかは趣味の問題です)

image-20240312162656733

するとアプリケーションの実行を終わってからも、黒い点が消えるだけでアイコンはずっとこの位置に残ります。そして次回の起動はこの Dock にある VS Code のアイコンをクリック(ダブルクリックではない)をするだけで良いです。