VS Code使い方

クイックオープン

⌘ ＋ P

• ファイルを開く
• その状態で → を押すとクイックオープンウィンドウが開いたまま複数ファイルを開ける

コマンドパレット

⌘ ＋ Shift ＋ P

• 登録コマンドを実行

統合ターミナル

Ctrl ＋ Shift ＋ @

• コマンドプロンプト/ターミナルとエディタを切り替える必要がない
• ＋ボタンを押すと新しいターミナルが作成

自動保存機能

[ファイル] - [自動保存]

• 自動保存させない方がいいかも

カーソル移動

Option + ↓ 前後の要素を入れ替え
Option + → 飛ばしながら移動
⌘ + → 先頭末尾に移動
⌘ + ↓ 一番上下に移動

便利なキーボード

Shift + Option + ↓

• liなど複製すると便利

Shift + → カーソル移動分を選択

• ⌘ などと一緒に併用すると一気に選択できる

fn ＋ delete バックデリート

⌘ + alt + Shift ＋ ↓ 直下にカーソルを増やす

⌘ + D 当たっているカーソルと同じ文字列を

⌘ + ファイルリンク リンクをクリックでファイルを開く

ユーザー設定/ワークスペース設定

[Code] - [基本設定] - [設定]

キーボードショートカット

[Code] - [基本設定] - [キーボード ショートカット]
登録されているショートカットを確認できる

ウィンドウを閉じる

⌘ ＋ W

VS Codeを終了

⌘ ＋ Q

備考

• ⌘：Command
• Option = alt

拡張機能（エクステンション）

[表示] - [拡張機能]
拡張機能を選択

Emmet

Emmet記述して tab で展開

ul.listInner>li.listItem*5

<ul class="listInner">
  <li class="listItem"></li>
  <li class="listItem"></li>
  <li class="listItem"></li>
  <li class="listItem"></li>
  <li class="listItem"></li>
</ul>

参考

Visual Studio Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA