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 世界で最も 使われているエディタ StackOverflow 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 ボタン お願いします! ムーザルちゃんねる