はじめに
VScodeでWEB開発を進めるにあたって、Emmetによる自動補完やショートカットをうまく活用することで、タイプミスを減らしつつ、開発効率があがる。
備忘録がわりに、まとめたものを残す
自動補完
下記に記載方法をまとめた。
コードタイトルに記載で自動補完することで、コードが自動で生成される。
見本：＜タイピング内容＞
補完後の記載コード
#container
<divid="container"></div>.cls
<divclass="cls"></div>span.cls
<spanclass="cls"></span>#container>.cls
<divid="container"><divclass="cls"></div></div>#container>.cls*6
<divid="container"><divclass="cls"></div><divclass="cls"></div><divclass="cls"></div><divclass="cls"></div><divclass="cls"></div><divclass="cls"></div></div>#container>.cls-$*6
<divid="container"><divclass="cls-1"></div><divclass="cls-2"></div><divclass="cls-3"></div><divclass="cls-4"></div><divclass="cls-5"></div><divclass="cls-6"></div></div>#container>.cls-$$*6
<divid="container"><divclass="cls-01"></div><divclass="cls-02"></div><divclass="cls-03"></div><divclass="cls-04"></div><divclass="cls-05"></div><divclass="cls-06"></div></div>ショートカット
VSCodeで使える便利なショートカットで主なものを記載する。
こちらの方の方が詳しいが、主に使えるものを厳選した。
Visual Studio Code キーボード ショートカット
| 操作概要 | Windows | macOS |
|---|---|---|
| 直近で開いたファイルを表示 | Ctrl+Tab | ⌃Tab |
| コードの整形 | Shift+Alt+F | ⇧⌥F |
| 行を下へ移動 | Alt+↓ | ⌥↓ |
| 行を上へ移動 | Alt+↑ | ⌥↑ |
| 行を下へコピー | Shift+Alt+↓ | ⇧⌥↓ |
| 行を上へコピー | Shift+Alt+↑ | ⇧⌥↑ |
| 行の削除 | Ctrl+Shift+K | ⇧⌘K |
| 選択範囲と同じ文字列の複数指定 | Ctrl+D | ⌘D |
| 行コメントの切り替え | Ctrl+/ | ⌘/ |
| 次を検索 | F3 | ⌘G |
| サイドバーの表示/非表示 | Ctrl+B | ⌘B |
| ターミナルの表示/非表示 | Ctrl+@ | ⌃@ |