VSCode 便利テクニック共有会

配信動画はこちら
https://youtu.be/z8ppylVwjHE

もし良かったらムーザルちゃんねるのチャンネル登録お願いします！
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

Transcript

1. YouTube Live (2020.08.06 Thur. 21:00~)
2. Visual Studio Code 普段の作業を 100倍(当社比) 効率化しよう！
3. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で macOS アプリづくりが 趣味 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします！
4. メインで使っているエディタ
5. 話す事とゴール 話す事 - VSCode の基本 - 表示の良い感じな切り替え方 - 効率的な操作 ゴール - VSCode を使いたくなる - 作業効率がアップしている 話さない事 - 拡張機能の詳細 - ユーザスニペットなど
6. 1. VSCode の基本 2. 表示の良い感じな切り替え方 3. 効率的な操作
7. 1. VSCode の基本 2. 表示の良い感じな切り替え方 3. 効率的な操作
8. Visual Studio Code
9. Visual Studio Code 世界で最も 使われているエディタ StackOverflow 2019 survey Windows macOS Linux で動く electron を使っている 拡張機能が JS で 簡単に作れる 起動も動作も軽い
10. ショートカットの読み方 macOS での説明になりますが、Windows でも同じよ うにできます。Windows の方はショートカットの表記 だけ、下記のように読み替えてください。 Cmd Ctrl Option Alt
11. 設定について
12. 設定は、沢山ある...
13. 設定は全て settings.json に保存されている このアイコンで settings.json を開ける
14. つまりコピペもできるし いざとなったら全部消せば戻せる このファイルを修正して保存すれば OK
15. ムーザル、おすすめの最小設定 { "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true, "editor.minimap.enabled": false, "workbench.editor.enablePreview": false, "files.autoSave": "afterDelay" } // 末尾の空白を自動削除 // 最終行に空行を追加 // ミニマップ を非表示 // プレビュー表示を無効 // 自動保存を有効 気軽に戻せるので、他の設定も試してみて 自分好みの設定にしてください
16. コマンドパレット
17. 何かしたかったら Cmd + Shift + p Cmd + Shift + p :でコマンドパレットを開く VSCode の各種アクションが全てこのコマンドパレットから検索・ 実行可能。マウスでメニューを探さなくてもキーボードだけででき る。
18. ショートカット設定
19. Cmd + Shift + p :でコマンドパレットを開き Keyboard Shortcuts 検索 毎回コマンド実行は大変なので ショートカット設定
20. 毎回コマンド実行は 大変なのでショートカット設定 ショートカットを自由に設定可能
21. ショートカット設定も keybindings.json に保存されている このアイコンで keybindings.json を開ける
22. ショートカット設定も keybindings.json に保存されている このアイコンで keybindings.json を開ける VSCode の操作はコマンドで大抵できる コマンドはショートカットを設定できる ↓ 効率化のポイント
23. ターミナルからコマンドで VSCode を起動 小ネタ
24. ターミナルからコマンドで VSCode を起動 Cmd + Shift + p でコマンドパレットを開き install code を検索 code コマンドで指定したディレクトリを VSCode で開くことができる
25. 1. VSCode の基本 2. 表示の良い感じな切り替え方 3. 効率的な操作
26. 画面分割のススメ
27. 分割をすると同時にいろいろ見れて便利 このアイコンでエディタを分割できる
28. 縦にも分割ができる Option + クリック
29. キーボードだけで画面分割 コマンドパレットで Split Editor Right で右分割 Left , Up , Down がある
30. Split Editor だと Copy される Copy される...
31. ドラッグ&ドロップだとただの移動になる
32. キーボードだけで画面分割 コマンドパレットで Move Editor into Right Group で右分割
33. もちろん、ショートカットを設定することもできる
34. Zen モード 小ネタ
35. Cmd + k , z :で Zen Mode へ Cmd + k を押した後、離してから… z を押す
36. 1. VSCode の基本 2. 表示の良い感じな切り替え方 3. 効率的な操作
37. ファイルの開き方、どうやりますか？
38. とりあえず Cmd + p でファイルを開く Cmd + p :で 開きたいファイルを簡単に探せる
39. エクスプローラとエディタの移動 Cmd + b エク スプローラを隠 したり表示した り Cmd + Shift + e :で エクスプローラとエディタをフォーカス移動する
40. エクスプローラ上でファイルの絞り込みができる フォーカスが当たっている状態で、キー入 力をすると、ヒットしたファイルがハイラ イトされる
41. ファイルを開きすぎても大丈夫 タブでファイルをいっぱい開いても ここで探すことができる。 Cmd + k , e :で 開いているエディターにフォーカスが当たる
42. ファイルの作り方、どうやりますか？
43. ファイル作成はショートカット設定がオススメ デフォルトの Cmd + n だと 無名のファイルタブが起動する これは指定場所にファイルを作成できるが ショートカットは設定されていないので、 設定をすると便利 ( explorer.newFile )
44. スラッシュでディレクトリも一緒に作れる
45. カーソル操作、どうやりますか？
46. 絶対に覚えた方がいいカーソル操作 ctrl + f : 一文字 進む ctrl + b : 一文字 戻る ctrl + e : 行末へ移動 ctrl + a : 行頭へ移動 ctrl + n : 下の行へ移動 ctrl + p : 上の行へ移動 ↑Windows の方はショートカット設定が必要 https://qiita.com/zaburo/items/5af5be6e019642650338 option + → : 右の単語へ移動 option + ← : 左の単語へ移動 ctrl + g : 指定行にカーソル移動
47. マルチカーソル cmd + option + ↑ ↓ : カーソルを上下に追加
48. テキスト編集、どうやりますか？
49. 同じ単語は一括編集できる cmd + d : カーソル位置の単語を選択 そのまま連続で cmd + d を実行すると、同じ単 語が複数選択される。この状態へ編集すると一括 で変更が可能。
50. 単語をクオートなどで1発で囲める cmd + d : カーソル位置の単語を選択 単語を選択後、そのままクオートなどを入力する と、囲ってくれる。ブラケットなども対応。
51. 行の移動 option + ↑ ↓ : カーソル位置の行を上下に移動
52. マルチカーソルクイズ この間に "stock": 10, を入力したい
53. マルチカーソルクイズ cmd + option + ↓ : カーソルを下に追加して全ての果物行に合わせる option + → : 単語単位でカーソルを横に移動
54. マルチカーソルクイズ この連番テキストを使って、 先頭に "id": 1, を入力したい
55. マルチカーソルクイズ 1-5 の数字行を選択してコピー option + → : 単語単位でカーソルを横に移動 cmd + option + ↓ カーソルを下に追加して全ての果物行に合わせる ペースト
56. マルチカーソルクイズ フルーツの名前を全部コピーして抜き出したい
57. マルチカーソルクイズ option + → 単語単位でカーソルを横に移動 option + shift + → 単語単位で選択してコピー cmd + option + ↓ マルチカーソルにして全ての果物行に合わせる
58. ありがとうございました！ 次回は... CSS レスポンシブをやります！木曜21時から30分 質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru - ツイッター情報 @mu_vpoe チャンネル登録 Good ボタン お願いします！ ムーザルちゃんねる