【VSCode】macOS, Windows, Ubuntuで共通なエディター環境を構築(インストール編)

スポンサーリンク

VSCode(Visual Studio Code)はMicrosoftが開発しているWindows、Linux、macOS用のテキストディタである。VSCodeは2015年に公開され、ソースコードはフリーかつオープンソースで、寛容なMITライセンスの下でリリースされおり、コンパイルされたバイナリはフリーウェアとして利用できる。

下記記事で紹介したように、これまでEmacsを使っていたのだが、VSCodeも良さそうな感じで使ってみたので備忘録を残す。

【Emacs 25-27】macOS, Windows, Ubuntuで共通なエディター環境を構築(まとめ)
macOS, Windows(msys2), Ubuntu-Server/Desktopで共通操作性のエディターを目指して、「Emacs」環境を構築してきた。私も実際に使ってきて実用的になってきた。本サイトでも断片的に紹介してきたのをまと...

VSCodeは単なるエディターとしてだけでなく、色々なプラグインが公開されており、それらの拡張機能をインストールすることでさまざまなプログラミング言語などの開発環境としても有用である。

VSCode画面例

以下は、macOSでの画面例。

画像01

VSCodeのインストール

インストーラは下記URLから入手できる。

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

macOSへのインストール手順

上記のサイトにアクセスし、「Download Mac Universal」をクリック。

画像02

ダウンロードした VSCode-darwin-universal.zip ファイルをダブルクリックして解凍。解凍した「Visual Studio Code」ファイルを、アプリケーションフォルダに移動する。

起動は、アプリケーションフォルダから、この「Visual Studio Code」アイコンをダブルクリックで実行する。最初は、Webからダウンロードしたなどの警告が出る場合があるが OK で進める。

codeコマンドのインストール

シェル上でcodeコマンドでVSCodeを起動できるようにすうには、F1キーを押してコマンドパレットで「シェルコマンド:PATH 内に’code’ コマンドをインストールします(Shell Command: Install ‘code’ command in PATH)」を選択して実行する。

Windowsへのインストール手順

上記のサイトにアクセスし、「Download for Windows」をクリック。

画像03

ダウンロードした VSCodeUserSetup-x64-*.exe ファイルをダブルクリックしてインストーラを実行。基本、デフォルト設定で進めればOK。下記画面「追加タスクの選択」では好みによってチェックを追加。(デフォルトのままでも大丈夫)

  • 「PATHへの追加」のチェックは入れたままにしておく。(コマンドシェルからcodeコマンドで起動できる)

画像04

インストール完了したら、スタートから「Visual Studio Code」をクリックして起動する。

Gitのインストール

macOS や多くのLinux ディストリビューションではGit があらかじめインストールされているが、Windowsの場合は、VSCodeからGit機能を利用するには Git のインストールが必要。下記サイトから Git for Windows を入手しインストールする。

Git - Downloads

Gitの初期設定

最初Gitを使い始めるに前に、下記記事で説明の初期設定を行っておく。

Gitの初期設定 [新石器Wiki]

Ubuntu 20.04 LTS Desktopへのインストール手順

VSCodeのLinux環境へのインストールは、下記URLの説明を参照。

Running Visual Studio Code on Linux
Get Visual Studio Code up and running on Linux.

下記手順で、Ubunto 20.04 LTS Deskopt環境に apt でインストールした。

マイクロソフトのVSCodeの apt リポジトリを追加

端末を開いて以下のコマンドを実行。

$ wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
$ sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
$ sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
$ rm -f packages.microsoft.gpg

VSCodeのインストール

$ sudo apt install apt-transport-https
$ sudo apt update
$ sudo apt install code

VSCodeを起動

$ code

VSCodeの初期画面

VSCodeを最初起動したWindowsでの画面は以下のような感じ。どのOS版でも、画面及び操作はほぼ同じ感じで違和感なく使える。

画像05

拡張機能のインストール

VSCodeでは、様々な拡張機能が準備されている。まずは、日本語化する拡張機能をインストールする。サイドメニューの■マークが並んだアイコンをクリック。

画面06

検索フォームに「Japanese Language Pack」と入力する。(全部入力しなくてもマッチする一覧がでる)
下に検索結果が表示されるので、「Japanese Language Pack」拡張機能の「Install」ボタンをクリックするとインストールされる。VSCodeを再起動すると、以下画面のように日本語となっている。

画像07

お勧めの拡張機能

同様の手順で、他の拡張機能もインストールできる。

拡張機能 説明 備考
C/C++ C/C++言語用のコード補完,支援
PrintCode 印刷機能の追加
Git Graph Gitのコミット履歴などをグラフィカルに表示,操作
Remote Development リモートサーバ上のコードを直接操作 Remote WSL, Remote SSH, Remote Containers
Awesome Emacs Keymap Emacsライクなキーバインド

VSCodeの設定

フォントサイズなど、VSCodeの設定は settings.json ファイルに記述する。VSCodeの設定には、すべてのワークスペースにデフォルトで適用されるユーザ設定と、ワークスペース固有の設定の2種類がある。これらの設定方法については、姉妹サイトの下記記事で紹介。

VSCodeを設定変更 [新石器Wiki]

キーバインドのカスタマイズ

VSCodeでは、好みのキーバインドを利用できる。前記説明の拡張機能などから設定変更できる。私は、Emacsエディターのキー操作に慣れているので、キー操作を「Awesome Emacs Keymap」拡張機能でカスタマイズして使っている。これらの設定については、姉妹サイトの下記記事で紹介。

VSCodeエディターをEmacsキー配列で使う [新石器Wiki]

設定の同期

VSCodeを複数パソコンで利用している時に、ネットワーク経由でVSCodeの設定を同期する事ができる。尚、同期機能を利用するにはMicrosoft又はGitHubのアカウントが必要。

サイドメニューのアカウントから設定する。

画像11

同期する項目を確認し「設定の同期をオンにする…」を押す。

画像12

「サインインしてオンにする」を押す。

画像13

Microsoft 又は GitHubを 選択してサインインする。

画像14

上記画面が出る場合があるが「マージ」で進める。

所感

macOS/Windows/Linuxで、同じ操作感で使えるのは素晴らしい。
又、GitのGUIクライアントとしても優秀である。特に、Linux環境では無料で使えるSourceTreeのようなのも探していたが、この VSCode に Git Graph 拡張機能と使う事で、GitのGUIクライアントしてもかなり便利に使える。
エディターとしての操作感は流石にEmacsはキビキビ速いが、VSCodeも実用的には十分な動作速度である。モダンなユーザインタフェースと、手軽に拡張機能がインストールできて、様々なプログラミング言語の開発ツールとしても期待できる。
最近のマイクロソフトは、WSLなどLinuxや他のエコシステム環境と融合するこのような動きはとても歓迎できる。今後、VSCodeを活用していきたいと思う。

関連記事

【Ubuntu 20.04 LTS Desktop】新規にインストールする
Ubuntu 20.04 LTS が、2020年4月24日にリリースされた。又、日本語Remix版は、2020年5月9日にリリースされた。そこで、新規に「Ubuntu 20.04 LTS Desktop」をインストールしたので備忘録を残...

参考

  1. Visual Studio Code – Wikipedia
  2. MacOSでVisual Studio Codeをインストールする手順
  3. VSCodeのEmacsキーバインド拡張まとめ
  4. 「拡張モジュールのデバックにお勧めの開発環境 VS Code」 CQ出版社 Interface誌 2021年6月号 Page146〜147
  5. VS Codeのsettings.jsonの開き方
  6. VSCode-コマンドプロンプトからファイルを開く

コメント

タイトルとURLをコピーしました