闇鍋VS Code を プロファイル機能で きれいにする Yuhei FUJITA 2024-01-30@VS Code Meetup

自己紹介 名前: Yuhei FUJITA （藤 ふじ田 た 悠 ゆう平 へい） X(Twitter): @Yuhei_FUJITA GitHub: @YuheiFUJITA コミュニティ運営: Vue Fes / PWA Night / VS Code Meetup 趣味: キャンプ / フィルムカメラ

VS Code の闇鍋化

生まれたてのVS Code まだ汚れを知らない、とても美しい姿をしている

闇鍋化したVS Code きっと幾億もの開発を経験してきたんだろう、面構えが違う

闇鍋VS Code とは 無数の拡張機能がインストールされている フロントエンド用、サーバーサイド用、データベース用、etc… 実際使うのはそのうちの一部のみ 無数の設定が入り乱れている 拡張機能が増えれば自ずと設定も増える よく見るともう無効な設定まで残ってる おっっっもい 起動するだけで時間がかかる コーディングしててもなんかもっさりする

プロファイル機能で救おう

プロファイル機能とは VS Code のあれやこれやをプロファイル単位で管理できる機能 Chrome のプロファイル機能みたいなもの 任意のワークスペースで任意のプロファイルを利用可能 git 管理するものではないので他の共同開発者には影響しない ユーザー設定や拡張機能などを一括で切り替えられる フロントエンド用、サーバーサイド用などを用意しておくと便利

プロファイルで切り替えられるもの 設定 settings.json の中身 キーボードショートカット keybindings.json の中身 スニペット 設定しているスニペット UI の状態 globalState.json の中身 拡張機能 インストールしている拡張機能リスト ` ` ` ` ` `

プロファイルの新規作成 1. メニュー > プロファイル > プロファイルの作成… を選択 2. プロファイル名・コピー元・アイコン・ 構成内容を指定 3. 作成する 4. 作成したプロファイルに切り替わる

プロファイルの切り替え 1. メニュー > プロファイル > 切り替えたいプロファイル名 を選択 2. 選択したプロファイルに切り替わる

プロファイルのエクスポート 1. 事前にエクスポートしたいプロファイルに 切り替えておく 2. メニュー > プロファイル > プロファイルをエクスポート… を選択 3. 出力先を選択する 4. JSON フォーマットとして出力される gist に直接エクスポートすることも可能

プロファイルのインポート 1. メニュー > プロファイル > プロファイルをインポート… を選択 2. インポート元を選択する 3. インポートしたプロファイルに切り替わる gist のURL からインポートすることも可能

まとめ 1 つのプロファイルにすべてを詰め込むとVS Code が闇鍋化する プロファイル機能を使うことでVS Code を用途ごとの最小構成にできる 言語やフレームワークごとなどでプロファイルを用意しておくと便利

関連情報 Visual Studio Code January 2023 Profiles in Visual Studio Code