VS CodeのProfiles機能を紹介します

【好きなエディタについて語ろう！エディタトークLT会 Liven up NAGOYA#8】 VS CodeのProfiles機能 を紹介します Github: junseinagao / Twitter: @junpai_code

自己紹介 長尾准誠 (ながおじゅんせい) Kodanshatech 合同会社 Webエンジニア 1997年2月生まれ (27歳) ・Next.jsを使ったモダンフロントエンドの開発が得意です。 ・大学卒業後、フリーランスを2年間やったのちに会社員になりました。 ・大学は法学部でした。 ・趣味はTesla🚗買ったり、スノボ🏂行ったり、名城公園でスケボ🛹などしてます。 JUNSEINAGAO/@JUNPAI_CODE

ある日、Profiles機能が追加されていることに気づいた (実は2023年1月にはリリースされてる) Command Palette... Ctrl+Shift+P Profiles (Default) > Turn on Settings Sync... Settings Ctrl+, Extensions Ctrl+Shift+X Keyboard Shortcuts Ctrl+K Ctrl+S User Snippets Themes > Check for Updates... ✓ Default Show Contents... Create Profile... Delete Profile... Export Profile... Import Profile... https://code.visualstudio.com/docs/editor/profiles JUNSEINAGAO/@JUNPAI_CODE

Profiles 機能とは？ VS Codeには、カスタマイズできる設定群がいくつかある ・設定【settings.json】 ・拡張機能【jsonでは管理できない】 ・キーボードショートカット【keybindings.json】 ・ユーザースニペット【md.json 等】 ・ユーザータスク【tasks.json】 ・UI state【jsonでは管理できない】 JUNSEINAGAO/@JUNPAI_CODE

Profiles 機能とは？ これらをProfileとしてまとめておいて、切り替えられる機能 ・設定【settings.json】 ・拡張機能 👈Profilesで管理できて嬉しい ・キーボードショートカット【keybindings.json】 ・ユーザースニペット【md.json 等】 ・ユーザータスク【tasks.json】 ・UI state JUNSEINAGAO/@JUNPAI_CODE

拡張機能が切り替えられるのがとても嬉しい ・VS Codeの拡張機能は色んな言語・エコシステムの拡張機能の闇鍋 になりがち ・単純にたくさん入れてると重く感じる ・拡張機能がワークスペースのローカルにあるバイナリに依存してる と拡張機能を使ってないワークスペースでエラー吐きがち JUNSEINAGAO/@JUNPAI_CODE

・例えば、biomejsという新しいJS/TS Linterがある ・biomejsが採用されているはレポジトリは新しい1つのみ、それ以外 はPrettier・EsLint構成とかありがち ・そんな状況でPrettier拡張機能とbiome拡張機能を両方入れてると 正直、めんどくさい ・👇 参照を失ってワークスペースを開くたびに暴れる Biome くん Could not find Biome in your dependencies. Either add the @biomejs/biome package to your dependencies, or download the Biome binary. ソース: Biome Ok Download Biome JUNSEINAGAO/@JUNPAI_CODE

Profilesを使えばプロジェクトに合わせた 最適な拡張機能をワークスペースに紐付けて 使える JUNSEINAGAO/@JUNPAI_CODE

VS Code Profiles マイグレーションガイド

1 規定のProfileから全部移したProfileを作る コマンド パレット... ⇧⌘P プロファイル (既定) > web-slim 設定 ⌘, WebExpert 拡張機能 ⇧⌘X ✓ 既定 キーボード ショートカット [⌘K ⌘S] ユーザー スニペット プロファイル コンテンツの表示 ユーザー タスク プロファイルの作成... テーマ > プロファイルの削除... ✓ 設定の同期がオン プロファイルをエクスポート... 更新の確認... プロファイルのインポート... JUNSEINAGAO/@JUNPAI_CODE

1 規定のProfileから全部移したProfileを作る 新しいプロファイルの作成... sandbox 作成 コピー元: 既定 アイコン: ⚙️ プロファイルで構成する内容を選択します: ☑ 設定 ☑ キーボード ショートカット ☑ ユーザー スニペット ☑ ユーザー タスク ☑ 拡張機能 JUNSEINAGAO/@JUNPAI_CODE

2 既定のプロファイルの設定をクリーンにする { settings.json } JUNSEINAGAO/@JUNPAI_CODE

2 既定のプロファイルの拡張機能をクリーンにする @installed Apollo GraphQL Rich editor support for GraphQL client and server develop... Apollo GraphQL Astro Language support for Astro Astro Auto Import - ES6, TS, JSX, TSX Automatically finds, parses and provides code actions an... Sergey Korenuk Auto Rename Tag Auto rename paired HTML/XML tag Jun Han Azure Repos Remotely browse and edit any Azure Repos Microsoft Better Comments Improve your code commenting by annotating with alert, i... Aaron Bond JUNSEINAGAO/@JUNPAI_CODE

3 既定のプロファイルをベースに作り直す ・というのも、Profileは一部の設定を既定のプロファイルを参照 してくれるようにできる ・キーボードショートカットやスニペットは共通で使いたい Create New Profile Primary Work Create Copy from: None Choose what to configure in your Profile: ☑ Settings ☐ Keyboard Shortcuts Using Default Profile ☑ User Snippets ☑ User Tasks ☑ Extensions JUNSEINAGAO/@JUNPAI_CODE

4 デフォルトのProfileを設定する ・大事。profileの切り替えを気づかずに開発してることがある。 ・ワークスペースで一度切り替えたらワークスペースに紐付くの で、codeコマンドでディレクトリを開いたときに自動的に切り 替わる { settings.json } { "window.newWindowProfile": "既定" } JUNSEINAGAO/@JUNPAI_CODE

5 設定、拡張機能だけOverrideしたProfileを作る 新しいプロファイルの作成... web-biome 作成 コピー元: 既定 アイコン: ⚙️ プロファイルで構成する内容を選択します: ☑ 設定 ☐ キーボード ショートカット 既定のプロファイルの使用 ☐ ユーザー スニペット 既定のプロファイルの使用 ☐ ユーザー タスク 既定のプロファイルの使用 ☑ 拡張機能 JUNSEINAGAO/@JUNPAI_CODE

終わり nagaojunsei/@junpai_code

ご清聴 ありがとうございました nagaojunsei/@junpai_code