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

by ikuma-t

Slide 1

Slide 1 text

#vscodejp ⾒た⽬からはじめる⽣産性向上 ikuma-t VSCode Conference Japan 2024

Slide 2

Slide 2 text

#vscodejp ikuma-t 2 株式会社エンペイで働くエンジニア。普段のお仕事ではVue.jsやRailsを書いています。昔はRubyMineを使っていましたが、フロントエンドを書き始めてからVSCodeを使い始めて1年半くらいです。 ikuma-t ikumatdkr ikuma-t.com

Slide 3

Slide 3 text

#vscodejp 3 ⾒た⽬を通じて個⼈の⽣産性を向上させるための指針と⽅法お話しすること

Slide 4

Slide 4 text

#vscodejp 4 ● VSCode を使い始めたが、初期設定のまま使っている⽅ ● その場その場で設定をいじってはいるが、本腰を⼊れて設定されたことのない⽅想定する聴者

Slide 5

Slide 5 text

#vscodejp エディタを通じた⽣産性向上の⼿段はいろいろある 5

Slide 6

Slide 6 text

#vscodejp ● 変更の影響範囲 ○ 個⼈ or チーム。チームに対する変更の⽅が、調整‧変更コストが⾼い ○ ex）エディタ保存時のフォーマット設定をチームで合わせたい ● 改善対象 ○ 設定 or 操作（ex: デバッガ習得、ショートカット記憶）。 ○ 設定は⼀度整えればすぐ効果が出る。操作は覚えるまでに時間がかかる。 6 「変更の影響範囲」と「改善対象」で取り組む領域を考える【個⼈✖ 設定】好き勝⼿できる上に効果が出やすい

Slide 7

Slide 7 text

#vscodejp ⾒た⽬から⽣産性向上をはじめよう 7 個人✖設定

Slide 8

Slide 8 text

#vscodejp ⾒た⽬から⽣産性向上をはじめよう 8 Motivation 必要な情報にストレスなくアクセスできること Goal ⾃分にとって不要な情報を削っていく How よく触るファイル‧ディレクトリにすぐアクセスできる、開いているファイルの情報が過不⾜なくエディタで⾒える...etc

Slide 9

Slide 9 text

#vscodejp 9 1. VSCodeのUIを整理する 2. エクスプローラを整理する 3. エディタを整理する⾃分にとって不要な情報を削っていく How

Slide 10

Slide 10 text

#vscodejp 1. VSCodeのUIを整理する 10

Slide 11

Slide 11 text

#vscodejp 11

Slide 12

Slide 12 text

#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

Slide 13

Slide 13 text

#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 （変えたい時に調べられればよい）

Slide 14

Slide 14 text

#vscodejp 常に⾒えなくても良いUI要素を⾮表⽰にしよう 14 例えば Activity Bar の「検索」は「⌘ + ⇧ + F」で必要なときに呼び出せば良いから常にUIに置いておく必要はなさそう

Slide 15

Slide 15 text

#vscodejp 常に⾒えなくても良いUI要素を⾮表⽰にしよう 15 【設定⽅法】慣れていれば settings.json で。 GUIの場合は「表⽰」から設定すると切り戻しも簡単で便利。

Slide 16

Slide 16 text

#vscodejp 「必要なときだけ」を⽀える機能 16 設定自由度実行方法 Which Key 自由。 Which Key 内でかぶらなければ良いキー指定 or インクリメント検索コマンドパレット割り当てがあるものだけ利用可能パレットからあいまい検索ショートカット自由。既存のキーとの衝突は避ける必要ありどんぴしゃ実行

Slide 17

Slide 17 text

#vscodejp Which Key で key bindings を拡張する 17 ショートカットを「辿れる」コマンドパレットを表⽰する拡張機能 https://marketplace.visualstudio.com/items?itemName=VSpaceCode.whichkey

Slide 18

Slide 18 text

#vscodejp Which Key で key bindings を拡張する 18 ● settings.json でキーバインドを設定可能 ● キーへの割り当てが表⽰される & 絞り込みができるため、完全に覚えなくてもOK GIF

Slide 19

Slide 19 text

#vscodejp Which Key で key bindings を拡張する 19 `T`もしくはカーソル移動で選択すると... スペースでコマンドパレットを開き次のメニューが表⽰される！

Slide 20

Slide 20 text

#vscodejp パネル‧ビューも扱いやすい場所に移動‧⾮表⽰にする 20 ドラッグANDドロップで要素を移動

Slide 21

Slide 21 text

#vscodejp 21 ちょっとスッキリしました

Slide 22

Slide 22 text

#vscodejp 2. エクスプローラを整理する 22

Slide 23

Slide 23 text

#vscodejp 23 プロジェクトのすべてのファイルを常に触るわけではない。頻繁に変更するファイルやディレクトリに絞って表⽰したい。

Slide 24

Slide 24 text

#vscodejp 3つのファイル‧ディレクトリ整理⽅法 24 1. Workspaces - 作業する部分だけ抽出したい 2. File Exclude - ほぼ使わないから⾮表⽰にしたい 3. File Nesting Conﬁg - 論理的なまとまりで折りたたみたい

Slide 25

Slide 25 text

#vscodejp Workspaces 25 作業単位のフォルダだけをワークスペースに抽出‧集約するワークスペースにフォルダを追加

Slide 26

Slide 26 text

#vscodejp File Exclude 26 settings.json に設定を記述することで、ファイルを⾮表⽰にできる機能 // file exclude "files.exclude": { "**/node_modules": true, "**/dist": true, "**/.astro": true, "**/.husky": true, "**/.jampack": true, }, true で非表示

Slide 27

Slide 27 text

#vscodejp 27 File Nesting Conﬁg まとめ先: 対象のファイル群で指定することで、フォルダのようにまとめられる機能

Slide 28

Slide 28 text

#vscodejp File Nesting Conﬁg ~ 設定 ~ 28 enabled patterns expand description （boolean）File Nesting Config を有効にする。（string）まとめたいグループを指定する。・key にはまとめる先のファイル名（ワイルドカード `*` が使用可能）を指定する。・value にはまとめたいファイル（複数ある場合はカンマ区切り）を指定する。　key にワイルドカードを使っている場合は、マッチした部分を特殊変数 ${capture} 　で参照することができる。（boolean）入れ子になっているファイルを展開して表示するか。 key

Slide 29

Slide 29 text

#vscodejp File Nesting Conﬁg ~ patterns ~ 29 "package.json": 複数まとめる場合は、カンマで区切る集約先まとめる対象 ".npm*, package-lock.json"

Slide 30

Slide 30 text

#vscodejp File Nesting Conﬁg ~ 特殊変数 ~ 30

Slide 31

Slide 31 text

#vscodejp File Nesting Conﬁg ~ ワイルドカードと特殊変数 ~ 31 "*.tsx": " $(capture).spec.tsx, $(capture).scss" ワイルドカードで「Card」がマッチ Card.spec.tsx、Card.scss がグループ化対象ビルド結果やコロケーションしているファイルをまとめる際に便利

Slide 32

Slide 32 text

#vscodejp File Nesting Updater 32 ● Anthony Fu ⽒が開発している拡張機能 ● ⼀定間隔で settings.json にある File Nesting Config をいい感じにしてくれる https://marketplace.visualstudio.com/items?itemName=antfu.file-nesting File Nesting Config の指定が⾯倒な⽅は...

Slide 33

Slide 33 text

#vscodejp ツリーの表⽰を微調整する 33 workbench.tree.indent インデントの幅を調整デフォルト 20 に設定 explorer.compactFolders 空のフォルダを折りたたむかデフォルト false

Slide 34

Slide 34 text

#vscodejp Apc Customize UI++ でさらに微調整 34 VSCode 標準では編集できない部分を変更することができる拡張機能 https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension

Slide 35

Slide 35 text

#vscodejp 35 Apc Customize UI++ での変更例 "apc.font.family": "Geist Mono", "apc.stylesheet": { ".title-label > h2": "display: none", }, settings.json

Slide 36

Slide 36 text

#vscodejp コラム：VSCodeのアップデートも⾒てみよう 36 ● 標準で設定可能であれば、そちらに置き換える⽅がメンテナンス性◎ ○ 最近だと、Apc Customise UI++ でやっていた Activity Bar の下部表⽰ができるようになった ● 1⽉ごとにリリースノートが出ているので、新しい機能をざっとチェックするのがおすすめ https://code.visualstudio.com/updates

Slide 37

Slide 37 text

#vscodejp 3. エディタを整理する 37

Slide 38

Slide 38 text

#vscodejp エディタ整理でできると良いこと 38 1. ⽂字が⾒やすいこと a. フォントファミリ、フォントサイズ ...etc 2. 編集対象 / 参考にする内容を⾒失わないこと a. 不要なUIが集中を妨げないこと b. たくさんタブを開いても、対象を⾒失わないこと c. どこの処理を編集しているのかがわかりやすいこと

Slide 39

Slide 39 text

#vscodejp フォント関連の設定 39 fontFamily fontLigatures fontSize description フォントファミリを変更する（フォントが対応している前提）合字を利用するか。例）文字サイズを変更する（ピクセル単位） key fontWeight 文字の太さを設定する。normal / bold / 1 ~ 1000 が設定可能。 lineHeight 行の高さを指定する。0 が自動計算。1 ~ 8 はフォントサイズの乗数。

Slide 40

Slide 40 text

#vscodejp 40

Slide 41

Slide 41 text

#vscodejp エディタのUI要素を整理する 41 Tab Editor Mini Map Gutter BreadCrumb Scrollbar （horizontal/vertical）

Slide 42

Slide 42 text

#vscodejp エディタのUIを整理する（ミニマップ‧ガター） 42 editor.minimap.enabled ミニマップの表⽰を切り替え false（⾮表⽰） editor.glyphMargin ガター部分の表⽰を切り替え false（⾮表⽰）

Slide 43

Slide 43 text

#vscodejp エディタのUIを整理する（スクロールバー） 43 デフォルト縦横スクロールバー: ⾮表⽰縦スクロール幅: 10 "editor.scrollbar.horizontal": "hidden", "editor.scrollbar.vertical": "hidden", "editor.scrollbar.verticalScrollbarSize": 10,

Slide 44

Slide 44 text

#vscodejp ファイルパス（パンくずリスト / タブ） 44 パンくずリストに表⽰しているファイルパスはタブにも表⽰できる。リンクとして使いたいかどうかでパンくずリストとタブのどちらを使うか選ぶ。パンくずリストを使⽤タブにファイルパスを表⽰

Slide 45

Slide 45 text

#vscodejp ファイルパス（タブでの表⽰⽅法） workbench.editor.labelFormat で、表⽰するファイルパスを変更する 45 short medium long ワークスペースフォルダーからの相対パスディレクトリ絶対パス

Slide 46

Slide 46 text

#vscodejp タブの⼀枚表⽰ / 複数表⽰を切り替える 46 workbench.showTabs で、タブの表⽰を切り替えられる（⾮表⽰もできる） single（現在のファイルだけタブ表⽰） multiple（開いているファイルを表⽰） multipleにする場合、複数のタブを効率よく表⽰するための設定ができる

Slide 47

Slide 47 text

#vscodejp タブの複数⾏表⽰を設定する 47 workbench.editor.pinnedTabsOnSeparateRow: ピン留めしたタブを別の⾏に表⽰ workbench.editor.wrapTabs: 枠内に収まらなかったタブを折り返して表⽰そのままだと固定タブとMacのウィンドウ管理がぶつかるので、Apc Customize UI++ で CSSを微調整

Slide 48

Slide 48 text

#vscodejp 編集中の内容を⾒失わない設定 48

Slide 49

Slide 49 text

#vscodejp 編集している箇所の表⽰を調整する 49 editor.highlightModiﬁedTabs 編集中のタブをハイライト scm.diﬀDecorationsGutterWidth デフォルトでも有効。幅を変更できる

Slide 50

Slide 50 text

#vscodejp ⻑い処理の対応関係をわかりやすくする 50 editor.guides.bracketPairs 対応するブラケットに線を引く editor.stickyScroll.enabled スクロール中に現在のスコープを表⽰

Slide 51

Slide 51 text

#vscodejp おわりに 51

Slide 52

Slide 52 text

#vscodejp めんどくさい作業を改善できるようになるには https://konifar-zatsu.hatenadiary.jp/entry/2023/12/21/124953 52

Slide 53

Slide 53 text

#vscodejp めんどくさい作業を改善できるようになるには 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか ※前ページ掲載のURLより引⽤ 53

Slide 54

Slide 54 text

#vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか ※前ページ掲載のURLより引⽤ 54

Slide 55

Slide 55 text

#vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか ※前ページ掲載のURLより引⽤ 55 どんな選択肢があるか、どう変えることができるかを紹介しました！

Slide 56

Slide 56 text

#vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか ※前ページ掲載のURLより引⽤ 56 VSCodeはそのままでも使いやすいですが、「もっと楽にできないか」と思うきっかけになると嬉しいです！どんな選択肢があるか、どう変えることができるかを紹介しました！

Slide 57

Slide 57 text

#vscodejp ⾒た⽬から⽣産性向上をはじめよう 57 Motivation 必要な情報にストレスなくアクセスできること Goal ⾃分にとって不要な情報を削っていく How 今回は発表者の嗜好と、⼀定汎⽤的に使えるということで、ミニマルなエディタを⽬指しましたが、⼈によっては逆にごちゃごちゃしている⽅が、いい感じにソースコードが読めたりするかもしれません。

Slide 58

Slide 58 text

#vscodejp エディタの⾒た⽬を変えるところから⽣産性向上をはじめよう！ 58

Slide 59

Slide 59 text

#vscodejp ありがとうございました！ 59