こんにちは。
得意料理は鮭とほうれん草のバターソテー、
どうも、クリーク・アンド・リバー社 COYOTE 3DCG STUDIO テクニカルチームの宮川です。
今回はVisual Studio Code(以下VSCodeと呼称)について便利なTipsを紹介していこうと思います。
【中級者編】ということで、想定読者はある程度VSCodeに慣れている方になります。
明日からの作業が少しでも快適になれば嬉しいです。
なおショートカットキーはすべてWindowsのものを載せています。
サンプルプロジェクト
今回Tipsをご紹介するにあたりサンプルプロジェクトとして「ComaCut」というツールを使います。
先日弊チームからBoothでリリースしたものになります。ご興味ある方はぜひご参照ください!
なお今回使用するものは、より実践的になるようにファイルを分割してあります。
もくじ
マルチカーソル
概要
同じような構造が連続している箇所に、一括で編集をしたいときってありませんか?
例えば下図のようなソースコードからlabelだけを選択してコピペしたい場合があるかもしれません。
通常は1個ずつ選択していくしかありませんが、マルチカーソルを使えば簡単に行えます。

やり方
マルチカーソルを追加する方法は色々あります。
| 追加方法 | オペレーション |
|---|---|
| カーソルを追加 | Alt + 左クリック |
| 下(上)の行にカーソルを追加 | Ctrl + Alt + ↓(↑) |
| 選択した文字列と同じ文字列にカーソルを順次追加 | Ctrl + D |
| 選択した文字列と同じ文字列にカーソルをすべて追加 | Ctrl + Shift + L |
今回は「選択した文字列を同じ文字列にカーソルを順次追加(Ctrl + D)」を使ってやってみます。
これとさらに範囲選択やHome、Endなどを上手く組み合わせることで選択できます。

ワークスペースに別のフォルダを追加
概要
例えばAというライブラリと、Aを使っているBというツールがあったとします。
AとBはそれぞれ別々のフォルダで管理されています。
どちらも並行して編集作業したいとき、あると思います。
通常、ワークスペースは1つのフォルダしか対応していないため、
2つのフォルダを1つのワークスペースとして扱うには工夫が必要になります。
やり方
1. 事前にAを開いておきます
2. File → Add Folder to Workspaceを押下します
3. 追加したいフォルダを選択します
4. これで追加したいフォルダがワークスペースに追加されました

2つのMayaASCIIファイルの差分を確認する
概要
シーンについてなにかを調査する場合、
2つのMayaASCIIファイルの差分を確認したいことがあると思います。
今回は空のシーンである「Empty.ma」とCubeを配置した「Cube.ma」の差分を確認してみます。
やり方
1. 比較したいファイルの片方を開いておきます(今回はEmpty.maを開いておきます)
2. ウィンドウ上部のコマンドパレットを選択し「>」と入力します(ショートカットキーはF1です)
3. 「compare」と入力し、サジェストされた「File: Compare Active File With…」を選択します
4. 比較したいもう片方のファイルを選択します(今回はCube.maを選択します)
5. 差分が表示されます。緑の部分が追加箇所で赤の部分が削除箇所です
MayaASCIIの他にも、普通のソースコードに対しても使えるのでぜひ試してみてください。

拡張機能や設定の共有
概要
VSCodeにはフォーマッターなどの便利な拡張機能がたくさんあります。
またVSCodeの設定自体も細く設定できます。
ただチームでコーディングする場合は、これらの設定はチーム間で共有したいですよね。
手順書に導入手順を記載するのも悪くないですが、できれば共通設定自体をVCS(GitやP4など)にアップロードすることで管理したいです。
やり方
1, extensions.jsonやsettings.jsonを作成し、共有したい拡張機能や設定を記述します
2. ワークスペースの直下に.vscodeフォルダを作成し、そこにextensions.jsonやsettings.jsonを配置します
▼extensions.jsonの例(pythonとblack-formatterという拡張機能をインストールを提案してくれます)
{
"recommendations": [
"ms-python.python",
"ms-python.black-formatter"
]
}
▼settting.jsonの例(デフォルトフォーマッターをblackに設定し、保存時に自動でフォーマットするようになります)
{
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.formatOnSave": true
}
}
さいごに
いかがでしたか?
VSCodeは痒いところに手が届く機能が豊富に用意されています。
とくに拡張機能ではなく標準機能として実装されているものも意外と多いです。
不便だなと思った際は一度標準機能でできないか調べてみるとなにか発見があるかもしれません。
それでは!

