見た目から始める生産性向上

VSCode Conference Japan 2024 の登壇資料です！

https://vscodejp.github.io/conference-2024/

Transcript

1. #vscodejp ⾒た⽬からはじめる⽣産性向上 ikuma-t VSCode Conference Japan 2024
2. #vscodejp ikuma-t 2 株式会社エンペイで働くエンジニア。 普段のお仕事ではVue.jsやRailsを書いています。 昔はRubyMineを使っていましたが、フロントエンドを 書き始めてからVSCodeを使い始めて1年半くらいです。 ikuma-t ikumatdkr ikuma-t.com
3. #vscodejp 3 ⾒た⽬を通じて個⼈の⽣産性を 向上させるための指針と⽅法 お話しすること
4. #vscodejp 4 • VSCode を使い始めたが、初期設定のまま使っている⽅ • その場その場で設定をいじってはいるが、本腰を⼊れて設 定されたことのない⽅ 想定する聴者
5. #vscodejp エディタを通じた ⽣産性向上の⼿段はいろいろある 5
6. #vscodejp • 変更の影響範囲 ◦ 個⼈ or チーム。チームに対する変更の⽅が、調整‧変更コストが⾼い ◦ ex）エディタ保存時のフォーマット設定をチームで合わせたい • 改善対象 ◦ 設定 or 操作（ex: デバッガ習得、ショートカット記憶）。 ◦ 設定は⼀度整えればすぐ効果が出る。操作は覚えるまでに時間がかかる。 6 「変更の影響範囲」と「改善対象」で取り組む領域を考える 【個⼈✖ 設定】好き勝⼿できる上に効果が出やすい
7. #vscodejp ⾒た⽬から⽣産性向上をはじめよう 7 個人✖設定
8. #vscodejp ⾒た⽬から⽣産性向上をはじめよう 8 Motivation 必要な情報にストレスなくアクセスできること Goal ⾃分にとって不要な情報を削っていく How よく触るファイル‧ディレクトリにすぐアクセスできる、開いているファイルの情報が過不⾜なくエディタで⾒える...etc
9. #vscodejp 9 1. VSCodeのUIを整理する 2. エクスプローラを整理する 3. エディタを整理する ⾃分にとって不要な情報を削っていく How
10. #vscodejp 1. VSCodeのUIを整理する 10
11. #vscodejp 11
12. #vscodejp 12 Status Bar Activity Bar Panel Editor Groups Primary Side Bar Secondary Side Bar Command Center Layout Control Custom Title Bar https://code.visualstudio.com/docs/getstarted/userinterface Tab Bar
13. #vscodejp 13 Status Bar Activity Bar Panel Editor Groups Primary Side Bar Secondary Side Bar Command Center Layout Control Custom Title Bar https://code.visualstudio.com/docs/getstarted/userinterface Tab Bar 名前を覚えることは重要ではない どういう要素が変更できるのかを 理解できていればOK （変えたい時に調べられればよい）
14. #vscodejp 常に⾒えなくても良いUI要素を⾮表⽰にしよう 14 例えば Activity Bar の「検索」は 「⌘ + ⇧ + F」 で必要なときに呼び出せば良いから 常にUIに置いておく必要はなさそう
15. #vscodejp 常に⾒えなくても良いUI要素を⾮表⽰にしよう 15 【設定⽅法】 慣れていれば settings.json で。 GUIの場合は「表⽰」から設定すると 切り戻しも簡単で便利。
16. #vscodejp 「必要なときだけ」を⽀える機能 16 設定自由度 実行方法 Which Key 自由。 Which Key 内でかぶらなければ良い キー指定 or インクリメント検索 コマンドパレット 割り当てがあるものだけ利用可能 パレットからあいまい検索 ショートカット 自由。 既存のキーとの衝突は避ける必要あり どんぴしゃ実行
17. #vscodejp Which Key で key bindings を拡張する 17 ショートカットを「辿れる」コマンドパレットを表⽰する拡張機能 https://marketplace.visualstudio.com/items?itemName=VSpaceCode.whichkey
18. #vscodejp Which Key で key bindings を拡張する 18 • settings.json でキーバインドを 設定可能 • キーへの割り当てが表⽰される & 絞 り込みができるため、完全に覚えなく てもOK GIF
19. #vscodejp Which Key で key bindings を拡張する 19 `T`もしくはカーソル移動で選択すると... スペースでコマンドパレットを開き 次のメニューが表⽰される！
20. #vscodejp パネル‧ビューも扱いやすい場所に移動‧⾮表⽰にする 20 ドラッグANDドロップで要素を移動
21. #vscodejp 21 ちょっとスッキリしました
22. #vscodejp 2. エクスプローラを整理する 22
23. #vscodejp 23 プロジェクトのすべてのファイルを 常に触るわけではない。 頻繁に変更するファイルや ディレクトリに絞って表⽰したい。
24. #vscodejp 3つのファイル‧ディレクトリ整理⽅法 24 1. Workspaces - 作業する部分だけ抽出したい 2. File Exclude - ほぼ使わないから⾮表⽰にしたい 3. File Nesting Config - 論理的なまとまりで折りたたみたい
25. #vscodejp Workspaces 25 作業単位のフォルダだけをワークスペースに抽出‧集約する ワークスペースにフォルダを追加
26. #vscodejp File Exclude 26 settings.json に 設定を記述することで、ファイルを⾮表⽰にできる機能 // file exclude "files.exclude": { "**/node_modules": true, "**/dist": true, "**/.astro": true, "**/.husky": true, "**/.jampack": true, }, true で非表示
27. #vscodejp 27 File Nesting Config まとめ先: 対象のファイル群 で指定することで、 フォルダのようにまとめられる機能
28. #vscodejp File Nesting Config ~ 設定 ~ 28 enabled patterns expand description （boolean）File Nesting Config を有効にする。 （string）まとめたいグループを指定する。 ・key にはまとめる先のファイル名（ワイルドカード `*` が使用可能）を指定する。 ・value にはまとめたいファイル（複数ある場合はカンマ区切り）を指定する。 　key にワイルドカードを使っている場合は、マッチした部分を特殊変数 ${capture} 　で参照することができる。 （boolean）入れ子になっているファイルを展開して表示するか。 key
29. #vscodejp File Nesting Config ~ patterns ~ 29 "package.json": 複数まとめる場合は、カンマで区切る 集約先 まとめる対象 ".npm*, package-lock.json"
30. #vscodejp File Nesting Config ~ 特殊変数 ~ 30
31. #vscodejp File Nesting Config ~ ワイルドカードと特殊変数 ~ 31 "*.tsx": " $(capture).spec.tsx, $(capture).scss" ワイルドカードで「Card」がマッチ Card.spec.tsx、Card.scss がグループ化対象 ビルド結果やコロケーションしているファイルをまとめる際に便利
32. #vscodejp File Nesting Updater 32 • Anthony Fu ⽒が開発している拡張機能 • ⼀定間隔で settings.json にある File Nesting Config をいい感じにしてくれる https://marketplace.visualstudio.com/items?itemName=antfu.file-nesting File Nesting Config の指定が⾯倒な⽅は...
33. #vscodejp ツリーの表⽰を微調整する 33 workbench.tree.indent インデントの幅を調整 デフォルト 20 に設定 explorer.compactFolders 空のフォルダを折りたたむか デフォルト false
34. #vscodejp Apc Customize UI++ でさらに微調整 34 VSCode 標準では編集できない部分を変更することができる拡張機能 https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension
35. #vscodejp 35 Apc Customize UI++ での変更例 "apc.font.family": "Geist Mono", "apc.stylesheet": { ".title-label > h2": "display: none", }, settings.json
36. #vscodejp コラム：VSCodeのアップデートも⾒てみよう 36 • 標準で設定可能であれば、そちらに置き換 える⽅がメンテナンス性◎ ◦ 最近だと、Apc Customise UI++ でやっていた Activity Bar の下部表⽰ができるようになった • 1⽉ごとにリリースノートが出ているの で、新しい機能をざっとチェックするのが おすすめ https://code.visualstudio.com/updates
37. #vscodejp 3. エディタを整理する 37
38. #vscodejp エディタ整理でできると良いこと 38 1. ⽂字が⾒やすいこと a. フォントファミリ、フォントサイズ ...etc 2. 編集対象 / 参考にする内容を⾒失わないこと a. 不要なUIが集中を妨げないこと b. たくさんタブを開いても、対象を⾒失わないこと c. どこの処理を編集しているのかがわかりやすいこと
39. #vscodejp フォント関連の設定 39 fontFamily fontLigatures fontSize description フォントファミリを変更する （フォントが対応している前提）合字を利用するか。例） 文字サイズを変更する（ピクセル単位） key fontWeight 文字の太さを設定する。normal / bold / 1 ~ 1000 が設定可能。 lineHeight 行の高さを指定する。0 が自動計算。1 ~ 8 はフォントサイズの乗数。
40. #vscodejp 40
41. #vscodejp エディタのUI要素を整理する 41 Tab Editor Mini Map Gutter BreadCrumb Scrollbar （horizontal/vertical）
42. #vscodejp エディタのUIを整理する（ミニマップ‧ガター） 42 editor.minimap.enabled ミニマップの表⽰を切り替え false（⾮表⽰） editor.glyphMargin ガター部分の表⽰を切り替え false（⾮表⽰）
43. #vscodejp エディタのUIを整理する（スクロールバー） 43 デフォルト 縦横スクロールバー: ⾮表⽰ 縦スクロール幅: 10 "editor.scrollbar.horizontal": "hidden", "editor.scrollbar.vertical": "hidden", "editor.scrollbar.verticalScrollbarSize": 10,
44. #vscodejp ファイルパス（パンくずリスト / タブ） 44 パンくずリストに表⽰しているファイルパスはタブにも表⽰できる。 リンクとして使いたいかどうかでパンくずリストとタブのどちらを使うか選ぶ。 パンくずリストを使⽤ タブにファイルパスを表⽰
45. #vscodejp ファイルパス（タブでの表⽰⽅法） workbench.editor.labelFormat で、表⽰するファイルパスを変更する 45 short medium long ワークスペース フォルダーからの相対パス ディレクトリ 絶対パス
46. #vscodejp タブの⼀枚表⽰ / 複数表⽰を切り替える 46 workbench.showTabs で、タブの表⽰を切り替えられる（⾮表⽰もできる） single（現在のファイルだけタブ表⽰） multiple（開いているファイルを表⽰） multipleにする場合、複数のタブを効率よく表⽰するための設定ができる
47. #vscodejp タブの複数⾏表⽰を設定する 47 workbench.editor.pinnedTabsOnSeparateRow: ピン留めしたタブを別の⾏に表⽰ workbench.editor.wrapTabs: 枠内に収まらなかったタブを折り返して表⽰ そのままだと固定タブとMacのウィンドウ管理がぶつかるので、Apc Customize UI++ で CSSを微調整
48. #vscodejp 編集中の内容を⾒失わない設定 48
49. #vscodejp 編集している箇所の表⽰を調整する 49 editor.highlightModifiedTabs 編集中のタブをハイライト scm.diffDecorationsGutterWidth デフォルトでも有効。幅を変更できる
50. #vscodejp ⻑い処理の対応関係をわかりやすくする 50 editor.guides.bracketPairs 対応するブラケットに線を引く editor.stickyScroll.enabled スクロール中に現在のスコープを表⽰
51. #vscodejp おわりに 51
52. #vscodejp めんどくさい作業を改善できるようになるには https://konifar-zatsu.hatenadiary.jp/entry/2023/12/21/124953 52
53. #vscodejp めんどくさい作業を改善できるようになるには 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか ※前ページ掲載のURLより引⽤ 53
54. #vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか ※前ページ掲載のURLより引⽤ 54
55. #vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか ※前ページ掲載のURLより引⽤ 55 どんな選択肢があるか、 どう変えることができるか を紹介しました！
56. #vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか ※前ページ掲載のURLより引⽤ 56 VSCodeはそのままでも使いやすいですが、 「もっと楽にできないか」と思うきっかけ になると嬉しいです！ どんな選択肢があるか、 どう変えることができるか を紹介しました！
57. #vscodejp ⾒た⽬から⽣産性向上をはじめよう 57 Motivation 必要な情報にストレスなくアクセスできること Goal ⾃分にとって不要な情報を削っていく How 今回は発表者の嗜好と、⼀定汎⽤的に使えるということで、ミニマルなエディタを⽬指しましたが、 ⼈によっては逆にごちゃごちゃしている⽅が、いい感じにソースコードが読めたりするかもしれません。
58. #vscodejp エディタの⾒た⽬を変えるところから ⽣産性向上をはじめよう！ 58
59. #vscodejp ありがとうございました！ 59