VSCode 便利テクニック共有会

Slide 1

Slide 1 text

YouTube Live (2020.08.06 Thur. 21:00~)

Slide 2

Slide 2 text

Visual Studio Code 普段の作業を 100倍(当社比) 効率化しよう！

Slide 3

Slide 3 text

話す人現役のエンジニア二人赤貝が好きな CTO とデザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で macOS アプリづくりが趣味ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォローお願いします！

Slide 4

Slide 4 text

メインで使っているエディタ

Slide 5

Slide 5 text

話す事とゴール話す事 - VSCode の基本 - 表示の良い感じな切り替え方 - 効率的な操作ゴール - VSCode を使いたくなる - 作業効率がアップしている話さない事 - 拡張機能の詳細 - ユーザスニペットなど

Slide 6

Slide 6 text

1. VSCode の基本 2. 表示の良い感じな切り替え方 3. 効率的な操作

Slide 7

Slide 7 text

1. VSCode の基本 2. 表示の良い感じな切り替え方 3. 効率的な操作

Slide 8

Slide 8 text

Visual Studio Code

Slide 9

Slide 9 text

Visual Studio Code 世界で最も使われているエディタ StackOverﬂow 2019 survey Windows macOS Linux で動く electron を使っている拡張機能が JS で簡単に作れる起動も動作も軽い

Slide 10

Slide 10 text

ショートカットの読み方 macOS での説明になりますが、Windows でも同じようにできます。Windows の方はショートカットの表記だけ、下記のように読み替えてください。 Cmd Ctrl Option Alt

Slide 11

Slide 11 text

設定について

Slide 12

Slide 12 text

設定は、沢山ある...

Slide 13

Slide 13 text

設定は全て settings.json に保存されているこのアイコンで settings.json を開ける

Slide 14

Slide 14 text

つまりコピペもできるしいざとなったら全部消せば戻せるこのファイルを修正して保存すれば OK

Slide 15

Slide 15 text

ムーザル、おすすめの最小設定 { "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true, "editor.minimap.enabled": false, "workbench.editor.enablePreview": false, "files.autoSave": "afterDelay" } // 末尾の空白を自動削除 // 最終行に空行を追加 // ミニマップを非表示 // プレビュー表示を無効 // 自動保存を有効気軽に戻せるので、他の設定も試してみて自分好みの設定にしてください

Slide 16

Slide 16 text

コマンドパレット

Slide 17

Slide 17 text

何かしたかったら Cmd + Shift + p Cmd + Shift + p :でコマンドパレットを開く VSCode の各種アクションが全てこのコマンドパレットから検索・実行可能。マウスでメニューを探さなくてもキーボードだけでできる。

Slide 18

Slide 18 text

ショートカット設定

Slide 19

Slide 19 text

Cmd + Shift + p :でコマンドパレットを開き Keyboard Shortcuts 検索毎回コマンド実行は大変なのでショートカット設定

Slide 20

Slide 20 text

毎回コマンド実行は大変なのでショートカット設定ショートカットを自由に設定可能

Slide 21

Slide 21 text

ショートカット設定も keybindings.json に保存されているこのアイコンで keybindings.json を開ける

Slide 22

Slide 22 text

ショートカット設定も keybindings.json に保存されているこのアイコンで keybindings.json を開ける VSCode の操作はコマンドで大抵できるコマンドはショートカットを設定できる ↓ 効率化のポイント

Slide 23

Slide 23 text

ターミナルからコマンドで VSCode を起動小ネタ

Slide 24

Slide 24 text

ターミナルからコマンドで VSCode を起動 Cmd + Shift + p でコマンドパレットを開き install code を検索 code コマンドで指定したディレクトリを VSCode で開くことができる

Slide 25

Slide 25 text

1. VSCode の基本 2. 表示の良い感じな切り替え方 3. 効率的な操作

Slide 26

Slide 26 text

画面分割のススメ

Slide 27

Slide 27 text

分割をすると同時にいろいろ見れて便利このアイコンでエディタを分割できる

Slide 28

Slide 28 text

縦にも分割ができる Option + クリック

Slide 29

Slide 29 text

キーボードだけで画面分割コマンドパレットで Split Editor Right で右分割 Left , Up , Down がある

Slide 30

Slide 30 text

Split Editor だと Copy される Copy される...

Slide 31

Slide 31 text

ドラッグ&ドロップだとただの移動になる

Slide 32

Slide 32 text

キーボードだけで画面分割コマンドパレットで Move Editor into Right Group で右分割

Slide 33

Slide 33 text

もちろん、ショートカットを設定することもできる

Slide 34

Slide 34 text

Zen モード小ネタ

Slide 35

Slide 35 text

Cmd + k , z :で Zen Mode へ Cmd + k を押した後、離してから… z を押す

Slide 36

Slide 36 text

1. VSCode の基本 2. 表示の良い感じな切り替え方 3. 効率的な操作

Slide 37

Slide 37 text

ファイルの開き方、どうやりますか？

Slide 38

Slide 38 text

とりあえず Cmd + p でファイルを開く Cmd + p :で開きたいファイルを簡単に探せる

Slide 39

Slide 39 text

エクスプローラとエディタの移動 Cmd + b エクスプローラを隠したり表示したり Cmd + Shift + e :でエクスプローラとエディタをフォーカス移動する

Slide 40

Slide 40 text

エクスプローラ上でファイルの絞り込みができるフォーカスが当たっている状態で、キー入力をすると、ヒットしたファイルがハイライトされる

Slide 41

Slide 41 text

ファイルを開きすぎても大丈夫タブでファイルをいっぱい開いてもここで探すことができる。 Cmd + k , e :で開いているエディターにフォーカスが当たる

Slide 42

Slide 42 text

ファイルの作り方、どうやりますか？

Slide 43

Slide 43 text

ファイル作成はショートカット設定がオススメデフォルトの Cmd + n だと無名のファイルタブが起動するこれは指定場所にファイルを作成できるがショートカットは設定されていないので、設定をすると便利 ( explorer.newFile )

Slide 44

Slide 44 text

スラッシュでディレクトリも一緒に作れる

Slide 45

Slide 45 text

カーソル操作、どうやりますか？

Slide 46

Slide 46 text

絶対に覚えた方がいいカーソル操作 ctrl + f : 一文字進む ctrl + b : 一文字戻る ctrl + e : 行末へ移動 ctrl + a : 行頭へ移動 ctrl + n : 下の行へ移動 ctrl + p : 上の行へ移動 ↑Windows の方はショートカット設定が必要 https://qiita.com/zaburo/items/5af5be6e019642650338 option + → : 右の単語へ移動 option + ← : 左の単語へ移動 ctrl + g : 指定行にカーソル移動

Slide 47

Slide 47 text

マルチカーソル cmd + option + ↑ ↓ : カーソルを上下に追加

Slide 48

Slide 48 text

テキスト編集、どうやりますか？

Slide 49

Slide 49 text

同じ単語は一括編集できる cmd + d : カーソル位置の単語を選択そのまま連続で cmd + d を実行すると、同じ単語が複数選択される。この状態へ編集すると一括で変更が可能。

Slide 50

Slide 50 text

単語をクオートなどで1発で囲める cmd + d : カーソル位置の単語を選択単語を選択後、そのままクオートなどを入力すると、囲ってくれる。ブラケットなども対応。

Slide 51

Slide 51 text

行の移動 option + ↑ ↓ : カーソル位置の行を上下に移動

Slide 52

Slide 52 text

マルチカーソルクイズこの間に "stock": 10, を入力したい

Slide 53

Slide 53 text

マルチカーソルクイズ cmd + option + ↓ : カーソルを下に追加して全ての果物行に合わせる option + → : 単語単位でカーソルを横に移動

Slide 54

Slide 54 text

マルチカーソルクイズこの連番テキストを使って、先頭に "id": 1, を入力したい

Slide 55

Slide 55 text

マルチカーソルクイズ 1-5 の数字行を選択してコピー option + → : 単語単位でカーソルを横に移動 cmd + option + ↓ カーソルを下に追加して全ての果物行に合わせるペースト

Slide 56

Slide 56 text

マルチカーソルクイズフルーツの名前を全部コピーして抜き出したい

Slide 57

Slide 57 text

マルチカーソルクイズ option + → 単語単位でカーソルを横に移動 option + shift + → 単語単位で選択してコピー cmd + option + ↓ マルチカーソルにして全ての果物行に合わせる

Slide 58

Slide 58 text

ありがとうございました！次回は... CSS レスポンシブをやります！木曜21時から30分質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru - ツイッター情報 @mu_vpoe チャンネル登録 Good ボタンお願いします！ムーザルちゃんねる