EurekaMoments

新米エンジニアが一人前を目指す修行の日々を記していくブログです。

Visual Studio Codeによるソフトウェア開発環境構築のメモ

背景・目的

自宅のPCでも職場のPCでも、ソフトウェア開発環境としてVisual Studio Code(以下VS Code)を導入しているのですが、どちらも同じ設定で統一したかったり、何かのタイミングでPC交換となり環境構築をし直したくなった際は、出来るだけ効率的に作業を完了させたくなります。
今回の記事は、VS Codeの環境構築の作業手順とTipsのメモです。

はじめてのVisual Studio Code (I・O BOOKS)

はじめてのVisual Studio Code (I・O BOOKS)

VS Codeのインストール

下記リンクから、OSに合わせてインストーラをダウンロードし、インストールします。 code.visualstudio.com

Gitのインストール

自分のPCのOSはWindowsかつ、ソフトのバージョン管理にはGitを使うので、Git for Windowsを下記リンクよりダウンロードしてインストールします。
gitforwindows.org

Gitの初期設定

インストールが完了したらユーザ名とメールアドレスの設定をします。
Git Bashでターミナルを起動して、以下のコマンドを打ちます。
ユーザ名の設定

$ git config --global user.name [User name]

メールアドレスの設定

$ git config --global user.email [e-mail address]

VS Code上で開く統合ターミナルをGit bashにする

VS Codeで書いたコードをその場で実行したり、Gitにコミットしたり出来るように、コマンドCtrl + @で開ける統合ターミナルをGit bashに設定します。これはGit for Windowsをインストールすると一緒にインストールされます。
VS Codeのユーザ設定ファイルであるsettings.jsonを開いて、下記の設定を追記します。

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"

自分PCでGitがインストールされた場所にパスを通して、binフォルダにあるbash.exeを実行するように設定されます。
正常に設定されると、以下のようにGit bashがターミナルとして起動するようになります。
f:id:sy4310:20181109205428p:plain

VS Codeの拡張機能を自動でインストールする

VS Codeの拡張機能をインストールする際、それぞれの機能を手作業でインストールし直すのは少々面倒です。そこで下記の記事を参考にして、自分の欲しい拡張機能を自動でインストールするようにします。

qiita.com

事前準備1. インストールしたい拡張機能のリストファイルを作る

既にVS Codeユーザである場合、元々の環境にインストールされた拡張機能をそのまま次のPCにもインストールしたいと思います。そういう場合は、まずはインストールされている拡張機能のリストファイルを下記の手順で作成しておきます。
まずはターミナルで、

$ code --list-extensions

と実行すると、今の環境にインストールされている拡張機能のリストが表示されます。
f:id:sy4310:20181109210158p:plain
そして、ここで表示されたリストを下記のコマンドでファイルにダンプします。これが拡張機能のリストファイルです。この例ではファイル名を"extensions"にしていますが、自由に決めて下さい。
f:id:sy4310:20181109210903p:plain

事前準備2. 自動インストールを実行するシェルスクリプトを書く

下記のようなシェルスクリプトを書きます。先に準備しておいたリストファイルを読み込み、その各機能のインストールを実行するためのものになります。

#!/bin/bash

cat ./extensions | while read line
do
  code --install-extension $line
done

そしてこれを実行すると、下記のようにインストールが開始されます。
f:id:sy4310:20181109212900p:plain

ユーザ設定を共有できるようにする

WindowsでVS Codeをインストールすると、ユーザ設定ファイルであるsettings.jsonというファイルが下記の場所に保存されます。

C:\Users\User name\AppData\Roaming\Code\User

これを導入の度にいちから設定しなおすのも面倒なので、このファイルをGitHubで管理して、異なるPCでも共有できるようにします。この時、settings.jsonのファイルの実体はGitのローカルリポジトリに置かれた状態になりますが、VS Codeでこのファイルを認識するには先に書いたC:\Users\User name\AppData\Roaming\Code\Userに置かれている必要があります。
そこで、Gitのリポジトリにあるsettings.jsonのシンボリックリンクを下記のコマンドで作成します。
f:id:sy4310:20181109223856p:plain
こうすることで、VS Code上でユーザ設定に変更を加えるとそれがGitのリポジトリにあるsettings.jsonにも反映され、Gitでバージョン管理が出来るようになります。

www.atmarkit.co.jp

www.atmarkit.co.jp

ここまでで紹介した自動インストールのためのシェルスクリプトやVS Codeのsettings.jsonは下記のGitHubリポジトリで公開しています。

github.com

番外: 便利だけどよく忘れるVS Codeのコマンドメモ

表示しているファイル内のシンボルの一覧を表示する

Ctrl + Shift + oでファイル内のシンボルの一覧が表示される。押した後に":"をタイプすると、シンボルがクラスやメソッド等のカテゴリごとにソートされる。

シンボル名で検索する

Ctrl + tを押した後に、シンボルの名前の一部をタイプすると、そのタイプした文字列に合致するシンボルをプロジェクト内のファイルの中から検索して、該当するシンボルの一覧が表示される。

元いた場所に戻る

grepやF12で定義場所へジャンプなんかした後、その前にいた場所に戻りたい場合はAlt + ←を押すと戻ることができる。