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
10
4.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
Panda CSS と Ark UI ではじめる個人開発
ikumatadokoro
0
170
ぼくが 美容師さんに伝えたかった バンドの話
ikumatadokoro
0
85
Railsアプリをコスパよく読むための環境整備
ikumatadokoro
2
550
HTTPを手で書いて学ぶ ファイルアップロードの仕組み
ikumatadokoro
66
24k
たどころくん1号を支える技術
ikumatadokoro
0
170
なんだか うまくいっている を 自分たちの いつもどおり に 定着させるためのチーム戦略
ikumatadokoro
4
560
プロダクト開発を支えるペースメーカー
ikumatadokoro
1
220
新登場!PopoverAPIでSide Modal(anai)を作ろう!
ikumatadokoro
0
370
Hasuraってナンダ!?
ikumatadokoro
1
400
Other Decks in Programming
See All in Programming
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
유연한 Composable 설계
l2hyunwoo
0
380
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
517
39k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Producing Creativity
orderedlist
PRO
340
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
What's new in Ruby 2.0
geeforr
338
31k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
The Invisible Customer
myddelton
117
13k
Designing the Hi-DPI Web
ddemaree
276
34k
Building Adaptive Systems
keathley
34
2k
GitHub's CSS Performance
jonrohan
1026
450k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
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