vscodeの利用に必須な”ワークスペース”の概念

背景

node.jpを触ってみようと思いました。そして折角なのでvscodeで開発しようと思いましたが、vscodeの事をあまり分かってなかったのでこの機会に勉強しました。なお私はバッチファイルなどしか書けないエンジニアで、モダン開発の知識は皆無です。このエントリは自分用のメモで特にみなさんに新しい知識を提供できるものではありません。

vscodeとは

MS製のソースコードエディタ。人気

Visual Studio Code – Code Editing. Redefined

従来型のテキストエディタとの違い

さて、私は旧来からのサクラエディタ使いである。

サクラエディタ

結論から言うと、秀丸やterapad、notepad++など、従来のテキストエディタを使い慣れていた人が最近のソースコードエディタを使う場合、考え方を変える必要がある。テキストエディタの延長線上にあり、テキストエディタよりもいろいろ出来るツール、と考えると上手く使えない。

環境設定の考え方：ワークスペースの概念

従来のテキストエディタの場合、例えばシンタックスハイライトや文字の折り返し設定などは、ファイルの拡張子単位で環境設定を行っていた。

しかしソースコードエディタではディレクトリ単位での環境設定となる。

具体的には違う拡張子のファイルでも同じワークスペースの設定であれば、同じ設定で動作させることが出来る。何がメリットか?例えばpython用のワークスペースとjavascript用のワークスペースでは設定を変えた方がよいときもあるし、ブログ用にテキストをがしがし書くワークスペースでは日本語の読みやすいフォントで表示したい、といったことを実現できる。

ワークスペースの概念とはつまりはプロジェクトの考え方である。1つのソフトウェアを開発するにあたって必要な定義ファイルやモジュールなどを1まとめにプロジェクトとして定義し、gitで変更管理などを行う。開発の世界では普通の考え方のようだが、シェルスクリプトしか書いていないインフラエンジニア上がりに取っては不慣れな概念であった。

つまりvscodeの環境設定の神髄は1にワークスペース、2にワークスペース、3、4、5もワークスペースである。

なお、ワークスペースには複数のフォルダを束ねることが出来る。それについては以下で説明していく。

vscodeの設定構造

以下のような構造となる。

vscodeは4つの設定定義レベルが存在する。

  1. vscode全体の設定(プログラム規定値)
  2. vscode全体の設定
  3. ワークスペース単位の設定
  4. フォルダ単位の設定

「vscode全体の設定(プログラム規定値)」と「vscode全体の設定」を便宜上違うものとして扱っているのは、vscode全体の設定(プログラム規定値)はプログラム内部に組み込まれており、カスタマイズしたvscode全体の設定だけが設定ファイルとして表現されるためであり、どちらも設定のスコープはvscode全体にかかる。

ご想像の通り、設定の優先度は「vscode全体」が一番弱く、「フォルダ単位」が一番強い。例えば、vscode全体で白ベースの色設定を行っていたとしても、ワークスペース単位で黒ベースの色設定を行っている場合、それが優先される。

それぞれの設定ファイルの場所は以下。

名称 パス ファイル名
vscode全体のユーザー設定(規定値) なし なし
vscode全体のユーザー設定 C:\Users\keisuke\AppData\Roaming\Code\User settings.json
ワークスペースのユーザー設定 任意の場所 [ファイル名].code-workspace内のsettings.json
フォルダ単位のユーザー設定 フォルダ.vscode settings.json

vscode全体のユーザー設定

ファイル -> ユーザー設定 -> 設定より、vscode全体のユーザー設定が可能である。具体的にはフォントサイズやエディタの配色テーマを設定できる。

仕組みとしては、規定値がプログラムに組み込まれており、設定を変更した内容がsettings.jsonに追記される。

C:\Users[プロファイル名]]\AppData\Roaming\Code\User\settings.json

“ワークスペース"の概念

ワークスペースにはフォルダを指定可能であり、複数のフォルダを指定する事も出来る。規定ではワークスペースは作成されないので、明示的に作成する必要がある。作成してもしなくてもいい、と考えるのは間違いで、vscodeを効率的に使うためには作成必須である(ここがテキストエディタ文化になれたユーザーがハマりやすい部分)。ワークスペースとするフォルダを指定したら、ワークスペースを保存する。すると、[ファイル名].code-workspace というワークスペース定義ファイルが生成される。内容は以下の通りある。

ここでは、ワークスペースファイルから見て自分自身のフォルダと、C:\script～という2つフォルダが1つのワークスペースに定義されている。

ワークスペース用のユーザー定義

ワークスペースを定義する事で、vscode全体のユーザー設定を上書きするワークスペース用のユーザー設定を定義できるようになる。例えば、vscode全体の配色テーマは白だが、ワークスペース用のユーザー設定で黒と定義した場合、そのワークスペースで作業する際は配色テーマが黒になる。

ワークスペース用のユーザー設定を実施した場合、ワークスペース用のユーザー定義ファイルである[ファイル名].code-workspace内のsettings.json内に設定が記載される。

※ 上記の赤枠部分

フォルダ用のユーザー定義

同じ考え方で、vscode全体のユーザー設定、ワークスペース用のユーザー設定を上書きする、フォルダ用のユーザー設定が可能である。ただしフォルダ用のユーザー設定はvscode全体やワークスペースと比べて限定的であり、配色テーマの変更などは出来ない。

フォルダ用のユーザー定義は、各フォルダの.vscode\settings.jsonに保存される。

ここまでのまとめ

さて、これでワークスペースの概念と、vscodeの設定構造が分かったが、具体的にこれらをどう使えばいいか。私の考えでは…

  • vscode全体設定は基本的に規定値
  • powershell用、javascript用、テキスト用など、用途に分けてワークスペース設定を行う
  • フォルダ単位の設定は利用しない

である。結局大事なのはpowershell用、javascript用、ブログ用テキスト用など、用途に分けてワークスペース設定を行う事である。例えば、javascript用ならWebにUPするので、文字コードはUTF-8、改行はLFの方が都合がよいが、powershellでActiveDirectoryから値を取り出して保存してExcelで開きたいなら、文字コードはSJIS、改行はCR＋LFがよい。

フォルダ単位の設定を利用しない理由は、正直用途がよく分からないからだ。この後、勉強を進めていくことで利用シーンに気づくかもしれないが、今は利用しないでおく。

Posted by tera