VSCodeのプロファイル機能を解説！プロジェクトごとの環境を簡単に切り替えよう

# VSCodeのプロファイル切り替え機能とは？
VSCode（Visual Studio Code）には、「プロファイル切り替え機能」が搭載されており、開発環境を用途ごとに簡単に管理・切り替えすることができます。
**プロジェクトごとに異なる拡張機能や設定を適用したい場合**や、**新しいプラグインの動作を試したい場合**に、この機能を活用すると、現環境の設定値は残しつつ、新しい開発環境を作成できるため便利です。

この記事では、VSCodeのプロファイル切り替え機能の利用方法について解説していきます。

## プロファイルの作成

VSCodeの歯車から、`profiles`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/fc698756-aef1-453e-88da-a74ab0d9e7c3.png)

`New Profile`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/d4fd712a-6875-4e64-8403-7153575a14df.png)

以下の属性を入力していきます。

 - `Name`:表示されるプロファイルの名前
 - `CopyFrom`：既存のProfile設定から設定をコピーできます
 - `Contents`：Defaultプロファイルの設定情報から以下の設定を個別にコピーできます。
     - `Settings`：外観などの設定
     - `Keyboard Shortcuts`：キーボードのショートカット設定
     - `Tasks`：ビルド時などに利用するTaskの設定
     - `Snippets`：辞書設定
     - `Extensions`：拡張機能
:::note info
VSCodeにはデフォルトで以下のProfileテンプレートが用意してあります。
 - `Python`
 - `Anguler`
 - `Doc Writer`
 - `Data Science`
 - `Java General`
 - `Jave Spring`
 - `Node.js`

これらのprofileテンプレートで、どの拡張機能がインストールされるかは、以下の公式ドキュメントを参照してください。
https://code.visualstudio.com/docs/editor/profiles#_profile-templates
:::

今回は全く新しい設定を作成したいので、以下のパラメータで設定し、`Create`をクリックします。
 - `Name`：ProfileTest
 - `CopyFrom`：None
 - `Contents`：すべてNone

:::note info
ここで`Preview`をクリックすると、新しくタブが表示され、プレビューを確認できます。
:::

完了後、ナビゲーションバーに`ProfileTest`があれば作成完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/7bbfc38e-98a6-4eac-aca6-476368c29943.png)

Profile作成後に新たに２つの設定が可能です。
 - `Use for New Windows`：新しくウィンドウを立ち上げた時にこのプロファイルを利用するかどうか（デフォルトプロファイルの設定）
 - `Folders & Workspaces`：フォルダ単位で利用プロファイルの設定を追加・変更・削除をする

## プロファイルの切り替え
プロファイルの切り替えは歯車から`Profiles`をクリックすると、作成した`Profile`一覧が表示されるので、それをクリックすると切り替えが可能です。（すごい簡単！）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/a09d05bc-2455-45ef-97df-7e663248fbd1.png)

私のデフォルトで作業していた時は、以下のようにAWSやGitなどの32の拡張機能がインストールされていましたが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/414c5abb-5f0a-4fa5-897e-bd3cd659fbc2.png)

プロファイルを切り替えると・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/2fb7eb20-8c2a-44e6-867a-f48ed922d063.png)

きれいさっぱりなくなりました！

## Profile設定のエクスポート
試しに新しく作成した`ProfileTest`というProfileに
 - AWS Toolkit (AWSエンジニアにとっては必須だよね！)
 - Cline（触ってみたい！）
の２つの拡張機能を追加しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/3eeb2cb6-f326-494b-aefd-ee8d948397c5.png)

これらのProfile設定をエクスポートしてみます。

エクスポートはProfile３点リーダから、`Export`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/efeb3060-4756-4561-8aef-42bda6a4326f.png)

Exportは以下の２つから選べます。
 - Github：Githubに設定ファイルを公開する
 - Local：ローカルに設定ファイルを保存する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/2239c540-1d99-4297-9fbe-d956c5d981fb.png)

:::note warn
Githubを選択すると、Githubのログインが求められ、gistのURLが発行されます。
これは`Secret`として公開され、URLを知っているユーザであればだれでも閲覧可能になることを注意してください。
:::

今回は`Local`を選択します。
エクスプローラでどこに保存するか聞かれるので、任意の場所に保存してください。
保存した`ProfileTest.code-profile`の中身を確認してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/a3ebc639-2628-4fa4-a34e-f4bad09844a9.png)

よく見ると、`Cline`や`AWS Toolkit`の文字が見えます。
Extensionsの情報が出力されていることが確認できました。

この`.code-profile`を配布すれば、同じVSCodeの設定で開発することが可能です。

## Profile設定のインポート
先程Exportした`ProfileTest.code-profile`を新しいプロファイルにインポートしてみます。

Profilesの画面に移動し、New Profileのドロップダウンメニューから`Import Profile`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/ff97754a-9278-4358-9b9a-ab25e8eb2453.png)

エクスプローラが開くので、先ほどエクスポートした`ProfileTest.code-profile`を開きます。

設定画面が開くので、新しく作成するプロファイルの設定を変更してください。
今回は`ProfileTest-import`という名前で新しく作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/8e65a68a-7e78-4fe9-b339-97d69357371c.png)

`Create`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/596e5f7f-0d3e-4b15-bf0e-77b6c28a56dd.png)

作成できました。

## Profile設定の削除
インポートした`ProfileTest-import`を削除します。

Profilesの画面から`Delete`をクリックで削除できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2625964/ba018922-1915-4d5e-8f6b-739c018194b9.png)


## まとめ

VSCodeのプロファイル切り替え機能を紹介しました。
非常に有用な機能だと思いました。

一方で、あくまでVSCodeでのプロファイル設定のため、Python等の開発に必要な言語・パッケージのインストールは対象外となるところはどうにか解消したいなと思いました。引き続き調査したいと思います。

以上、

「VSCodeのプロファイル機能を解説！プロジェクトごとの環境を簡単に切り替えよう」

でした。

## 参考

https://code.visualstudio.com/docs/editor/profiles