Skip to content

Instantly share code, notes, and snippets.

@yarakos95
Created April 9, 2021 01:37
Show Gist options
  • Save yarakos95/27f728e3fe864156d13bf571f06d5540 to your computer and use it in GitHub Desktop.
Save yarakos95/27f728e3fe864156d13bf571f06d5540 to your computer and use it in GitHub Desktop.
Workspace in VSCode and managing

Workspace in VSCode and managing

VSCode Workspace は少し面倒な概念になっているらしい.しかし,その実,非常に単純な機能になっている.

Multi-root Workspaces in Visual Studio Code Workspaces in Visual Studio Code

VSCode では複数のフォルダを同時に開くことが出来るが,これらのフォルダをプロジェクトの編集を立ち上げるたびに1つずつ開くのは面倒である.これをまとめておこうというのがWorkspace である. これらの情報は.code-workspace ファイルに書き込まれる.内容は以下の通りになる.

  • 開くフォルダのディレクトリ(複数)
  • Workspace に特有のsettings
  • Workspace に推奨されるのextensions

Workspace に特有のkeybindings を設定することは出来ないようだ.

foo.code-workspace

{
  "folders": [
    {
      "name": "folder-name1",
      "path": "..\\relative\\path\\to\\folder-name1",
    },
    {
      "name": "folder-name2",
      "path": "..\\relative\\path\\to\\folder-name2",
    },
    // and more folder path
  ],
  "settings": {
    // settings for Workspace
  },
  "extensions": [
    // extensions for Workspace
    "recomendations": [
      // recomend extensions for Workspace
    ],
  ]
}

開いているフォルダにある.vscode フォルダに含まれているsettings.json は無視される.

複数のフォルダの情報が.code-workspace という拡張子のファイルに書き込まれる.このファイルは任意のディレクトリに保存することが出来る.しかしながら,このフォルダは特定のディレクトリに保存している方が管理しやすい.

Usage Workspace

File > Add Folder to Workspace からVSCode で必要なフォルダを開く. File > Save Workspace as... からWorkspace を作成する.ここで.code-workspace を保存する場所を指定する.これは任意の場所に保存することが出来る.ここを基点に相対パスが構成される.

Extension

Workspace を管理するための拡張機能は複数ある.以下の3つを紹介しておきたい.

いずれの拡張機能もWorkspace をサイドバーから切り替えることが出来る.

Project Manager

Project Manager | alefragnani.project-manager

version 12.1.0

よくおすすめされている拡張機能.ダウンロード数も一番多い. フォルダ,Git,Subversion(SVN),Mercurial も管理することが出来る.非常に多機能.

.code-workspace ファイルをproject.json ファイルによって管理する.したがって,.code-workspace ファイルを特定のディレクトリに保存しておく必要はない. また,project.json からWorkspace 名を任意に変更することが出来る.("name" に対応する) この名前には半角スペースを利用することが出来る.

project.json では以下のように記述される.Workspace をデフォルト通りに作成してからサイドバーのフロッピーディスク:floppy_disk: のアイコンをクリックすれば作成される.

project.json

[
  {
    "name": "Workspace name",
    "rootPath": "X:\\path\\to\\workspace.code-workspace",
    "paths": [],
    "group": "",
    "enabled": true
  }
  // and more
]

settings.json で以下のように設定することが出来る.これらで指定するパスは絶対パスで指定する必要がある. ~.--.baseFolders で指定したディレクトリの下にあるフォルダ,Git,SVN,Mercurial がサイドバーに表示される.

  "projectManager.projectsLocation": "X:\\path\\to\\folder-with-project.json",
  "projectManager.vscode.baseFolders": [
    // Base directory for loading folders
  ],
  "projectManager.git.baseFolders": [
    // Base directory for loading folders with git
  ],
  "projectManager.svn.baseFolders": [
    // Base directory for loading folders with svn
  ],
  "projectManager.hg.baseFolders": [
    // Base directory for loading folders with hg
  ],
  "projectManager.any.baseFolders": [
    // Base directory for loading folders
  ],

それぞれに特定のフォルダを無視させるための"~.--.ignoreFolders" 設定が用意されている.

Workspace Explorer

Workspace Explorer | tomsaunders-code.workspace-explorer

version 1.7.0

.code-workspace ファイルをサブフォルダに入れることが出来る.また,これらのファイルやサブフォルダのアイコンを変更することが出来る.

1つのディレクトリに置かれている.code-workspace ファイルを読み込み,サイドバーから一覧で閲覧することが出来る.2つ以上のディレクトリを指定することは出来ない.

  "workspaceExplorer.workspaceStorageDirectory": "X:\\path\\to\\folder\\containing\\code-workspace",

vscode-workspace-switcher

vscode-workspace-switcher | sadesyllas.vscode-workspace-switcher

version 1.15.3

指定したディレクトリに置かれている.code-workspace ファイルを読み込み,サイドバーから一覧で閲覧することが出来る.2つ以上のディレクトリを指定することが出来る.

  "vscodeWorkspaceSwitcher.paths": [
    "X:\\path\\to\\folder-1\\containing\\code-workspace",
    "X:\\path\\to\\folder-2\\containing\\code-workspace",
    // and more folder containing .code-workspace files
  ],

アイコンを変更することが出来ない点を除いては,複数のディレクトリを指定することが出来るのでWorkspace Explorer より優れていると言えるだろう. ただし,個人的には圧倒的にアクティビティバーのアイコンがダサいのでどうにかして欲しい.

Git Project Manager

Workspace Explorer やvscode-workspace-switcher にはGit 管理されたフォルダを管理することは出来ない. 別の拡張機能を利用してみよう.

Git Project Manager | felipecaputo.git-project-manager

version 1.7.1

以下のようにGit で管理されたフォルダを含むディレクトリを指定する.これによって,このディレクトリ以下にあるGit 管理されたフォルダを列挙することが出来る.

  "gitProjectManager.baseProjectsFolders": [
    "X:\\base\\directory\\for\\loading\\folder\\with\\git",
    // and more base directory for loading folder with git
  ],

この拡張機能はSVN やMercurial も同じように管理することが出来る.

まとめ

Workspace の管理ではいくつかの拡張機能があることを紹介したが,以下のいずれかの使い方が良いだろう.

  • Project Manager
  • Workspace Explorer (+ Git Project Manager)
  • vscode-workspace-switcher (+ Git Project Manager)

Git などのバージョン管理ソフトを利用していない,あるいはそれらのディレクトリで開く必要のない場合にはGit Project Manager は不要になるだろう.

その点ではProject Manager は非常にリッチな拡張機能になる.しかし,.code-workspace ファイルを特定の場所に集める必要がないことやWorkspace の名前をファイル名と異なる名前にすることが出来る点では有用性がある.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment