vscodeで開発をするに当たって、私的に便利だと思う、ショートカットやemmet記法、
その他tipsをまとめました。
ショートカット (os:mac)
| キーボード | 機能 |
|---|---|
| command + b | サイドバーを開閉 |
| command + // | コメント |
| option + command + s | 全てのファイルを保存 |
| command + , | 設定画面を開く |
| shift + command + p | コマンドパレットを開く |
| option + ↑ or ↓ | カーソルを置いた行を移動 |
| shift + option + ↑ or ↓ | カーソルを置いた行を複製 |
| command + o | フォルダを開く |
| command + p | ファイルを開く |
| command + d | ファイル内の同じ記述を選択 |
| command + f | 検索（ファイル内） |
| option + command + f | 置換 |
| shift + command + f | 全体検索（） |
emmet記法
下記の文字を入力し、enterを押すと続くコードが自動入力される
例）aと入力した後、enterを押すとaタグが自動入力される。
*コピペではなく「実際に入力+enter押下」しないと発火しません。
sample.html
//a
<a href=""></a>
//!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
//link:css
<link rel="stylesheet" href="style.css">
//script:src
<script src=""></script>
// ul>li*3(任意の数)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
//l
<label for=""></label>
//sel
<select name="" id=""></select>
//.sample
<div class="sample"></div>
//img
<img src="" alt="">
//lorem
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis quam ea distinctio facere eveniet possimus expedita, odio exercitationem autem neque est temporibus sed ad id pariatur, ullam reprehenderit maxime quibusdam.
他にもいっぱいありますが、個人的によく使う物だけ抜粋。
チートシートはこちら。
(https://docs.emmet.io/cheat-sheet/)
その他tips
・テキストを選択せず、カーソルだけおき、commnd + c押すと行毎コピーできる
（同じ方法でcommnd + xで切り取りもできる）
・設定画面でAuto saveを有効にする
・option + カーソルでマルチカーソルにできる
・command + enterで行の途中にカーソルがあっても下に行を挿入できる
・設定画面のRender whitespaceをallにする
（半角スペースが薄いドットで表示される。無駄な半角スペースが目視で発見できます）
（全角スペースを目視で発見したい場合は、拡張機能の[zenkaku]を入れるといいです）