Go to Qiita Advent Calendar 2024 Top
LoginSignup
20
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@DaikiSuyama(Daiki Suyama)

MacでのVSCode入門

Last updated at Posted at 2021-08-22

はじめに

本記事では、拡張性の高いエディタであるVSCodeのMacでのインストール方法から使い方までをご紹介します。単なる使い方を列挙するだけではなく、VSCodeに特有の概念を含め網羅的かつ簡潔な説明になるように心がけました。

対象読者

  • プログラミング初心者
  • VSCodeをエディタとして検討している方
  • VSCodeの使い方を再確認したい方

環境の確認

ターミナル上でsw_versコマンドを実行すると、OSのバージョンを確認できます1。また、本記事ではIntel Macでの動作確認のみをしているので、M1 Macの方はご注意ください。ただ、インストール時以外は基本的に動作は変わらないと思われます。

% sw_vers
ProductName:    macOS
ProductVersion: 11.2.3
BuildVersion:   20D91

[0] VSCodeとは

Microsoftによって開発されているソースコードエディタです。その拡張性の高さにより、ソースコードエディタの中では（おそらく）トップシェアを誇ります。また、VSCodeのソースコードはオープンソースであり、こちらのGitHubレポジトリにて公開されています。

[1] VSCodeのインストール方法

インストール方法については、パッケージ管理システムを利用するか否かで異なります2。

本記事では、パッケージ管理システムとして有名なHomebrewからインストールする方法とVSCodeのサイトから直接インストールする方法を紹介します。

(1) Homebrewからインストールする方法

Homebrewからインストールする場合、先にHomebrewのインストールが必要です。こちらの記事の手順に従って、インストールを行なってください。

Homebrewがインストールされている場合は、以下のコマンドを実行することでVSCodeをインストールできます。アンインストールしたい場合も、installをuninstallに変えることで行うことができます。

% brew install visual-studio-code --cask

また、上記の方法でインストールすると、/usr/local/binへのPATHが通っている場合にcodeコマンドでターミナルからVSCodeを起動させることができます。本家からインストールした場合は別でPATHを通す必要があるので注意してください。

(2) 本家からインストールする方法

VSCodeのダウンロードページからMacOS用のzipファイルを直接ダウンロードして解凍し、指示に従ってインストールを行います。詳しくはVSCodeのセットアップについてのドキュメント（英語）を参考にしてください。

[2] VSCodeのUI

一見すると複雑なVSCodeのUIについて簡単にまとめます。下記の画像はVSCodeのUIについてのドキュメント（英語）から拾ってきたものです。

hero.png

(1) UIを構成する基本5要素

VSCodeのUIは上図の5つの要素から主に構成されます。

アクティビティバー

  • 選択するアイコンを切り替えることでさまざまな機能を利用できます。
  • 例：ファイル等の検索機能、Gitの管理、拡張機能の管理、など
  • ただし、アイコンはVSCodeのバージョンにより異なる場合があります。
  • また、右クリックで表示するアイコンを選択することもできます。

サイドバー

  • アクティビティバーで選択した機能により異なる機能を利用できます。
    • 例：エクスプローラー（後述）→開いているフォルダのファイルの表示や削除などの機能

エディタ

  • 縦横に複数のファイルを開いてソースコードを編集することができます。

パネル

  • 標準出力やデバッグ情報を出力することができます。
  • 統合ターミナルを利用することも可能です。

ステータスバー

  • 開いているプロジェクトとファイルの情報を表示します。

(2) UIを補助する3要素

上記の5要素に加え、下記の3要素も良く使うUIの構成要素です。

ミニマップ

  • 開いているファイルの外観を示すもので、ファイルの右横にバーとして表示されます。
  • 長いコードの概観を確認するのに便利です。

エクスプローラー

  • アクティビティバーにより選択できる機能の一つです。ファイルの表示や削除等を行うことができます。
  • サイドバーに表示されているファイル等を右クリックすることで、それぞれの機能を呼び出すことができます。

コマンドパレット

  • 標準機能および拡張機能を呼び出すためのコマンドを実行することができます。
  • Cmd + shift + Pのショートカットキーによって開くことができます。
  • ショートカットキーに対応しない機能はこちらで呼び出すことができます。

[3] VSCodeの設定

高い拡張性を実現するVSCodeの設定についてご紹介します。

(1) "User Settings"と"Workspace settings"

設定には"User Settings"と"Workspace settings"の2種類があります。前者は、グローバルに指定される設定であり、任意のVSCodeのインスタンスへと適用されます。後者は、指定されたワークスペースにのみ適用される設定となります。また、"Workspace settings"は"User settings"を上書きします。

ワークスペースについては、複数のフォルダやファイルを含むルートフォルダとして理解すると良いです3。これにより、プロジェクトごとで別の設定を行うことができます。ワークスペースについて詳しくはVSCodeのワークスペースについてのドキュメント（英語）を参照してください。

(2) 設定方法1：編集画面から設定

JSON記法を理解していない場合はこちらの方法を用います。まず、設定画面を開くショートカット（command + ,）により設定画面を開きます。この元で、"User Settings"と"Workspace settings"のいずれかのタブを選択してから、その画面の上部の設定の検索からそれぞれの設定を行います。

(3) 設定方法2:settings.jsonを直接編集して設定

JSON記法を理解している場合4はこちらの方法を用います。先程と同様に設定画面を開いた後、"User Settings"と"Workspace settings"のいずれかのタブを選択します。そして、エディタ右上にある"Open Settings"の表示のある部分をクリックします。これにより開くsettings.jsonというファイルを編集することで、設定を行うことができます。設定方法1の場合はGUIにてsettings.jsonを編集し、設定方法2の場合はCUIにてsettings.jsonを編集していることになります。

(4) settings.jsonの場所

"User Settings"の場合、$HOME/Library/Application Support/Code/Userにsettings.jsonがあります。また、"Workspace settings"の場合、ルートフォルダ配下の.vscodeフォルダに各種設定ファイルを格納するため、こちらにsettings.jsonもあります。

(5) おすすめの設定

ここでは、自分がおすすめしたい最小限の設定を紹介し、この時のsettings.jsonを参考例として紹介します。また、自分のsettings.jsonについてはこちらのGitHubレポジトリにて紹介しているので、参考にしてください。

  • workbench.colorTheme
    • 全体のカラーテーマを設定することができます。
    • デフォルト値は"Default Dark+"です。
    • "Solarized Dark"という値を自分は指定しています。
  • editor.tabCompletion
    • タブによる補完からの挿入を設定することができます。
    • デフォルト値は"off"であり、"on"にすることでタブによって補完から挿入することができます。
  • editor.wordWrap
    • 一文をどこで折り返すかを設定することができます。
    • デフォルト値は"off"のため、折り返しません。
    • "on"にすることで、エディタの端で折り返すことができます。
  • explorer.confirmDragAndDrop、explorer.confirmDelete
    • エクスプローラー上でのファイルの移動及び削除の際に確認するダイアログを表示するかを設定することができます。
    • デフォルト値はいずれもtrueであるため、ダイアログが毎回表示されます。
    • 自分は面倒なので、いずれもfalseにしています。
参考例
{
    //---workbench settings---
    //全体のテーマをSolarized Darkに
    "workbench.colorTheme": "Solarized Dark",

    //---editor settings---
    //タブによる補完からの挿入を有効に
    "editor.tabCompletion": "on",
    //画面の端で折り返し
    "editor.wordWrap": "on",

    //---exploer settings---
    //エクスプローラでダイアログなしでファイルを移動可能に
    "explorer.confirmDragAndDrop": false,
    //エクスプローラでダイアログなしで削除可能に
    "explorer.confirmDelete": false
}

[4] VSCodeのショートカットキー

コーディング等のスピードをあげるのに役立つショートカットキーを紹介します。

(1) Macのデフォルトのショートカットキー

MacのデフォルトのショートカットキーをVSCodeでも使うことができます。デフォルトではどのショートカットキーも使うことができるはずです。

Macで確実に覚えておきたいショートカットキー9選にて特に必要なショートカットキーを紹介しているので、参考にしてください。

(2) VSCodeのデフォルトのショートカットキー

VSCodeのデフォルトのショートカットキーのうち特に重要なものをこちらにて紹介します。

また、VSCodeがMacOSでのデフォルトのショートカットキーの一覧を公開していますが、これら以外にも自身が加えた拡張機能（後述）によって定義されたショートカットキーが含まれる場合があります。

Cmd + / : 現在行のコメント化/コメント化の解除
Cmd + , : 設定を開く
Cmd + R : リロードする
Cmd + Shift + P : コマンドパレットを開く
Cmd + Shift + X : 拡張機能を表示する
Ctrl + Shift + @ : ターミナルを開く
Ctrl + A : 行の左端に移動する
Ctrl + E : 行の右端に移動する
Shift + Option + A : 選択範囲のブロックコメント化/コメント化の解除

(3) ショートカットキーの編集

VSCodeにおいてはショートカットキーの編集により、変更や削除や追加を行うことが可能です。編集画面を開くにはコマンドパレットを開いた後に、Preferences: Open Keyboard Shortcutsを検索して実行します。また、編集画面の右側に表示される鉛筆の部分を押すことでキーボードショートカットの上書きをすることが可能です。ただ、ここまでで紹介したショートカットキーを利用するのみで初めは困らないと思うので、ここでは説明を割愛します。詳しくはこちらを参照してください。

[5] VSCodeの拡張機能

先程の各種設定に加えて拡張機能の存在により、VSCodeの拡張性の高さは実現されています。

(1) 拡張機能のインストールと設定

まず、ショートカット（Cmd + shift + X）により拡張機能の一覧を表示できます5。そして、上部にある検索欄からインストールしたい拡張機能を検索し、インストールを行います。また、インストールした拡張機能のそれぞれについて、上記と同様に設定を行うことができます。

(2) おすすめの拡張機能

  • Japanese Language Pack for Visual Studio Code
    • VSCodeを日本語化するための拡張機能です。
    • インストール後に、コマンドパレットでConfigure Display Languageコマンドを実行し、jaを選択することで日本語化することができます。
    • Material Icon Theme
      • マテリアルデザインの基で設計されたアイコンです。
      • インストール後に、settings.jsonのworkbench.iconThemeにて"material-icon-theme"と指定することで適用することができます。

[6] VSCodeのインテリセンス

インテリセンスとは、自動補完や自動修正や変数情報の提示などにより入力支援や操作性向上を行う機能の総称です。特に、オブジェクト指向言語の場合、そのインスタンスからメソッドやプロパティの候補を表示することも可能です6。

VSCodeにおいてデフォルトのインテリセンスはあるものの、拡張機能をインストールすることでより豊富な機能を持つ賢いインテリセンスを使うことができます。実際のインテリセンスの働き方はVSCodeのインテリセンスについてのドキュメント（英語）を参考にしてください。また、前述の設定を用いてインテリセンスを自分流にカスタマイズすることも可能です。

[7] 本記事を読み終えた後に

本記事でVSCodeの基本的な使い方を把握した元で、どのようにVSCodeを利用していくべきかを最後に述べます。

(1) VSCodeの理解を深める

本記事で扱ったのはVSCodeのほんの一部の機能のみです。したがって、VSCodeをより快適に使うには自分で学んでいく必要があります。具体的には、VSCodeのドキュメントを読むことをお勧めします。その他にVSCodeのブログやVSCodeのGitHubレポジトリのissueなどを読むのも良いかもしれません。

(2) エラー時の対処法

理解を深めるよりも重要なのが、VSCodeでエラーが出た時の対処法です。特に、新しい拡張機能を導入するときや新しい環境を使うときにエラーが出やすいです。この時の対処法について下記に載せておきます。

  1. VSCodeのドキュメント
  2. VSCodeのGitHubレポジトリ
    • https://github.com/microsoft/vscode
    • レポジトリのissueに直近の問題点が投稿されている場合が多いです。
    • ドキュメントに反映されていないものがほとんどなので参考になります。
  3. 各種拡張機能のGitHubレポジトリ
    • 例：https://github.com/James-Yu/LaTeX-Workshop
    • 拡張機能由来の問題は拡張機能のレポジトリを参照すると良いです。
    • 上記の例はLaTeX Workshopという拡張機能のレポジトリです。

また、上記の手段で解決できない場合は、stack overflowなどの質問サイトやGoogle検索で探してください。

あとがき

より多くの方のVSCodeの環境構築の助けとなれば幸いです。また、誤記等あればコメントで教えてください。

  1. 下記は自分の環境での出力です。また、以降では% コマンド名でコマンドの実行を示す場合があります。 ↩

  2. 今後も継続的にプログラミングをする場合はパッケージ管理システムを利用することをお勧めします。 ↩

  3. 説明の都合上、本記事ではこの解釈にてワークスペース関連の説明等を行います。 ↩

  4. こちらの記事にてVSCodeでのJSON記法を紹介しています。 ↩

  5. サイドバーから選択することも可能です。 ↩

  6. プログラミング初心者の方はこの一文を無視していただいて結構です。 ↩

20
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
20
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?