Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
見た目から始める生産性向上
Search
ikuma-t
April 19, 2024
Programming
11
5.7k
見た目から始める生産性向上
VSCode Conference Japan 2024 の登壇資料です!
https://vscodejp.github.io/conference-2024/
ikuma-t
April 19, 2024
Tweet
Share
More Decks by ikuma-t
See All by ikuma-t
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
760
いまさらのStorybook
ikumatadokoro
0
610
これで最後にしたい! Astroと立ち向かう 6度目の個人ブログ再開発
ikumatadokoro
5
1.4k
Panda CSS と Ark UI ではじめる個人開発
ikumatadokoro
4
2.1k
ぼくが 美容師さんに伝えたかった バンドの話
ikumatadokoro
0
250
Railsアプリをコスパよく読むための環境整備
ikumatadokoro
2
1.1k
HTTPを手で書いて学ぶ ファイルアップロードの仕組み
ikumatadokoro
80
30k
たどころくん1号を支える技術
ikumatadokoro
1
290
なんだか うまくいっている を 自分たちの いつもどおり に 定着させるためのチーム戦略
ikumatadokoro
4
770
Other Decks in Programming
See All in Programming
C++20 射影変換
faithandbrave
0
540
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
GoのGenericsによるslice操作との付き合い方
syumai
3
690
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
エンジニア向け採用ピッチ資料
inusan
0
160
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
Team operations that are not burdened by SRE
kazatohiei
1
210
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
5つのアンチパターンから学ぶLT設計
narihara
1
120
童醫院敏捷轉型的實踐經驗
cclai999
0
190
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Navigating Team Friction
lara
187
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Transcript
#vscodejp ⾒た⽬からはじめる⽣産性向上 ikuma-t VSCode Conference Japan 2024
#vscodejp ikuma-t 2 株式会社エンペイで働くエンジニア。 普段のお仕事ではVue.jsやRailsを書いています。 昔はRubyMineを使っていましたが、フロントエンドを 書き始めてからVSCodeを使い始めて1年半くらいです。 ikuma-t ikumatdkr ikuma-t.com
#vscodejp 3 ⾒た⽬を通じて個⼈の⽣産性を 向上させるための指針と⽅法 お話しすること
#vscodejp 4 • VSCode を使い始めたが、初期設定のまま使っている⽅ • その場その場で設定をいじってはいるが、本腰を⼊れて設 定されたことのない⽅ 想定する聴者
#vscodejp エディタを通じた ⽣産性向上の⼿段はいろいろある 5
#vscodejp • 変更の影響範囲 ◦ 個⼈ or チーム。チームに対する変更の⽅が、調整‧変更コストが⾼い ◦ ex)エディタ保存時のフォーマット設定をチームで合わせたい •
改善対象 ◦ 設定 or 操作(ex: デバッガ習得、ショートカット記憶)。 ◦ 設定は⼀度整えればすぐ効果が出る。操作は覚えるまでに時間がかかる。 6 「変更の影響範囲」と「改善対象」で取り組む領域を考える 【個⼈✖ 設定】好き勝⼿できる上に効果が出やすい
#vscodejp ⾒た⽬から⽣産性向上をはじめよう 7 個人✖設定
#vscodejp ⾒た⽬から⽣産性向上をはじめよう 8 Motivation 必要な情報にストレスなくアクセスできること Goal ⾃分にとって不要な情報を削っていく How よく触るファイル‧ディレクトリにすぐアクセスできる、開いているファイルの情報が過不⾜なくエディタで⾒える...etc
#vscodejp 9 1. VSCodeのUIを整理する 2. エクスプローラを整理する 3. エディタを整理する ⾃分にとって不要な情報を削っていく How
#vscodejp 1. VSCodeのUIを整理する 10
#vscodejp 11
#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
#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 (変えたい時に調べられればよい)
#vscodejp 常に⾒えなくても良いUI要素を⾮表⽰にしよう 14 例えば Activity Bar の「検索」は 「⌘ + ⇧
+ F」 で必要なときに呼び出せば良いから 常にUIに置いておく必要はなさそう
#vscodejp 常に⾒えなくても良いUI要素を⾮表⽰にしよう 15 【設定⽅法】 慣れていれば settings.json で。 GUIの場合は「表⽰」から設定すると 切り戻しも簡単で便利。
#vscodejp 「必要なときだけ」を⽀える機能 16 設定自由度 実行方法 Which Key 自由。 Which Key
内でかぶらなければ良い キー指定 or インクリメント検索 コマンドパレット 割り当てがあるものだけ利用可能 パレットからあいまい検索 ショートカット 自由。 既存のキーとの衝突は避ける必要あり どんぴしゃ実行
#vscodejp Which Key で key bindings を拡張する 17 ショートカットを「辿れる」コマンドパレットを表⽰する拡張機能 https://marketplace.visualstudio.com/items?itemName=VSpaceCode.whichkey
#vscodejp Which Key で key bindings を拡張する 18 • settings.json
でキーバインドを 設定可能 • キーへの割り当てが表⽰される & 絞 り込みができるため、完全に覚えなく てもOK GIF
#vscodejp Which Key で key bindings を拡張する 19 `T`もしくはカーソル移動で選択すると... スペースでコマンドパレットを開き
次のメニューが表⽰される!
#vscodejp パネル‧ビューも扱いやすい場所に移動‧⾮表⽰にする 20 ドラッグANDドロップで要素を移動
#vscodejp 21 ちょっとスッキリしました
#vscodejp 2. エクスプローラを整理する 22
#vscodejp 23 プロジェクトのすべてのファイルを 常に触るわけではない。 頻繁に変更するファイルや ディレクトリに絞って表⽰したい。
#vscodejp 3つのファイル‧ディレクトリ整理⽅法 24 1. Workspaces - 作業する部分だけ抽出したい 2. File Exclude
- ほぼ使わないから⾮表⽰にしたい 3. File Nesting Config - 論理的なまとまりで折りたたみたい
#vscodejp Workspaces 25 作業単位のフォルダだけをワークスペースに抽出‧集約する ワークスペースにフォルダを追加
#vscodejp File Exclude 26 settings.json に 設定を記述することで、ファイルを⾮表⽰にできる機能 // file exclude
"files.exclude": { "**/node_modules": true, "**/dist": true, "**/.astro": true, "**/.husky": true, "**/.jampack": true, }, true で非表示
#vscodejp 27 File Nesting Config まとめ先: 対象のファイル群 で指定することで、 フォルダのようにまとめられる機能
#vscodejp File Nesting Config ~ 設定 ~ 28 enabled patterns
expand description (boolean)File Nesting Config を有効にする。 (string)まとめたいグループを指定する。 ・key にはまとめる先のファイル名(ワイルドカード `*` が使用可能)を指定する。 ・value にはまとめたいファイル(複数ある場合はカンマ区切り)を指定する。 key にワイルドカードを使っている場合は、マッチした部分を特殊変数 ${capture} で参照することができる。 (boolean)入れ子になっているファイルを展開して表示するか。 key
#vscodejp File Nesting Config ~ patterns ~ 29 "package.json": 複数まとめる場合は、カンマで区切る
集約先 まとめる対象 ".npm*, package-lock.json"
#vscodejp File Nesting Config ~ 特殊変数 ~ 30
#vscodejp File Nesting Config ~ ワイルドカードと特殊変数 ~ 31 "*.tsx": "
$(capture).spec.tsx, $(capture).scss" ワイルドカードで「Card」がマッチ Card.spec.tsx、Card.scss がグループ化対象 ビルド結果やコロケーションしているファイルをまとめる際に便利
#vscodejp File Nesting Updater 32 • Anthony Fu ⽒が開発している拡張機能 •
⼀定間隔で settings.json にある File Nesting Config をいい感じにしてくれる https://marketplace.visualstudio.com/items?itemName=antfu.file-nesting File Nesting Config の指定が⾯倒な⽅は...
#vscodejp ツリーの表⽰を微調整する 33 workbench.tree.indent インデントの幅を調整 デフォルト 20 に設定 explorer.compactFolders 空のフォルダを折りたたむか
デフォルト false
#vscodejp Apc Customize UI++ でさらに微調整 34 VSCode 標準では編集できない部分を変更することができる拡張機能 https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension
#vscodejp 35 Apc Customize UI++ での変更例 "apc.font.family": "Geist Mono", "apc.stylesheet":
{ ".title-label > h2": "display: none", }, settings.json
#vscodejp コラム:VSCodeのアップデートも⾒てみよう 36 • 標準で設定可能であれば、そちらに置き換 える⽅がメンテナンス性◎ ◦ 最近だと、Apc Customise UI++
でやっていた Activity Bar の下部表⽰ができるようになった • 1⽉ごとにリリースノートが出ているの で、新しい機能をざっとチェックするのが おすすめ https://code.visualstudio.com/updates
#vscodejp 3. エディタを整理する 37
#vscodejp エディタ整理でできると良いこと 38 1. ⽂字が⾒やすいこと a. フォントファミリ、フォントサイズ ...etc 2. 編集対象
/ 参考にする内容を⾒失わないこと a. 不要なUIが集中を妨げないこと b. たくさんタブを開いても、対象を⾒失わないこと c. どこの処理を編集しているのかがわかりやすいこと
#vscodejp フォント関連の設定 39 fontFamily fontLigatures fontSize description フォントファミリを変更する (フォントが対応している前提)合字を利用するか。例) 文字サイズを変更する(ピクセル単位)
key fontWeight 文字の太さを設定する。normal / bold / 1 ~ 1000 が設定可能。 lineHeight 行の高さを指定する。0 が自動計算。1 ~ 8 はフォントサイズの乗数。
#vscodejp 40
#vscodejp エディタのUI要素を整理する 41 Tab Editor Mini Map Gutter BreadCrumb Scrollbar
(horizontal/vertical)
#vscodejp エディタのUIを整理する(ミニマップ‧ガター) 42 editor.minimap.enabled ミニマップの表⽰を切り替え false(⾮表⽰) editor.glyphMargin ガター部分の表⽰を切り替え false(⾮表⽰)
#vscodejp エディタのUIを整理する(スクロールバー) 43 デフォルト 縦横スクロールバー: ⾮表⽰ 縦スクロール幅: 10 "editor.scrollbar.horizontal": "hidden",
"editor.scrollbar.vertical": "hidden", "editor.scrollbar.verticalScrollbarSize": 10,
#vscodejp ファイルパス(パンくずリスト / タブ) 44 パンくずリストに表⽰しているファイルパスはタブにも表⽰できる。 リンクとして使いたいかどうかでパンくずリストとタブのどちらを使うか選ぶ。 パンくずリストを使⽤ タブにファイルパスを表⽰
#vscodejp ファイルパス(タブでの表⽰⽅法) workbench.editor.labelFormat で、表⽰するファイルパスを変更する 45 short medium long ワークスペース フォルダーからの相対パス
ディレクトリ 絶対パス
#vscodejp タブの⼀枚表⽰ / 複数表⽰を切り替える 46 workbench.showTabs で、タブの表⽰を切り替えられる(⾮表⽰もできる) single(現在のファイルだけタブ表⽰) multiple(開いているファイルを表⽰) multipleにする場合、複数のタブを効率よく表⽰するための設定ができる
#vscodejp タブの複数⾏表⽰を設定する 47 workbench.editor.pinnedTabsOnSeparateRow: ピン留めしたタブを別の⾏に表⽰ workbench.editor.wrapTabs: 枠内に収まらなかったタブを折り返して表⽰ そのままだと固定タブとMacのウィンドウ管理がぶつかるので、Apc Customize UI++
で CSSを微調整
#vscodejp 編集中の内容を⾒失わない設定 48
#vscodejp 編集している箇所の表⽰を調整する 49 editor.highlightModifiedTabs 編集中のタブをハイライト scm.diffDecorationsGutterWidth デフォルトでも有効。幅を変更できる
#vscodejp ⻑い処理の対応関係をわかりやすくする 50 editor.guides.bracketPairs 対応するブラケットに線を引く editor.stickyScroll.enabled スクロール中に現在のスコープを表⽰
#vscodejp おわりに 51
#vscodejp めんどくさい作業を改善できるようになるには https://konifar-zatsu.hatenadiary.jp/entry/2023/12/21/124953 52
#vscodejp めんどくさい作業を改善できるようになるには 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか
※前ページ掲載のURLより引⽤ 53
#vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか
※前ページ掲載のURLより引⽤ 54
#vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか
※前ページ掲載のURLより引⽤ 55 どんな選択肢があるか、 どう変えることができるか を紹介しました!
#vscodejp 今回の発表では... 1. めんどくさいと⾃覚できるか 2. めんどくさくない状態を知っているか 3. めんどくさくない状態を経験しているか 4. めんどくさくない状態まで変えていく能⼒があるか
※前ページ掲載のURLより引⽤ 56 VSCodeはそのままでも使いやすいですが、 「もっと楽にできないか」と思うきっかけ になると嬉しいです! どんな選択肢があるか、 どう変えることができるか を紹介しました!
#vscodejp ⾒た⽬から⽣産性向上をはじめよう 57 Motivation 必要な情報にストレスなくアクセスできること Goal ⾃分にとって不要な情報を削っていく How 今回は発表者の嗜好と、⼀定汎⽤的に使えるということで、ミニマルなエディタを⽬指しましたが、 ⼈によっては逆にごちゃごちゃしている⽅が、いい感じにソースコードが読めたりするかもしれません。
#vscodejp エディタの⾒た⽬を変えるところから ⽣産性向上をはじめよう! 58
#vscodejp ありがとうございました! 59