[初心者]こそ知らなきゃ損する自動補完（VisualStudio Code）

VisualStadio Codeの「エメットの自動補完機能」を使うんだぜ〜い :writing_hand:
（特に何も設定いらないから、
　VisualStadio Code使ってるよって方は、一回試してみてね :santa: ）

ちなみに私はMacをUseしてるよ :keyboard:

⓵ HTMLテンプレートをさっと作るぞ　
　　Shift + ! + tab　

[実行結果]
<!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>

⓶ idのついたdivタグをさっと作るぞ　
　　シャープ(#) + container + tab

[実行結果]
<div id="container"></div>

⓷ classのついたdivタグをさっと作るぞ　
　　ドット(.) + container + tab

[実行結果]
<div id="container"></div>

⓸ span要素にクラスをさっと付けたいな　
　　span + ドット(.) + container

[実行結果]
<span class="container"></span>

⓹ idのついたdivタグの中にclassのついたdivタグをさっと作るぞ　
　　シャープ(#) + container + 大なり(>) + ドット(.) + mono + tab

[実行結果]
<div id="container">
    <div class="mono"></div>
</div>

⓺ idのついたdivタグの中にclassのついたdivタグを6個一気に作るぞ　
　　シャープ(#) + container + 大なり(>) + ドット(.) + mono + *6 + tab

[実行結果]
<div id="container">
    <div class="mono"></div>
    <div class="mono"></div>
    <div class="mono"></div>
    <div class="mono"></div>
    <div class="mono"></div>
    <div class="mono"></div>
</div>

⓻ idのついたdivタグの中に「枝番付き」classのついたdivタグを6個一気に作るぞ　
　　シャープ(#) + container + 大なり(>) + ドット(.) + mono- + $ + *6 + tab

[実行結果]
<div id="container">
    <div class="mono-1"></div>
    <div class="mono-2"></div>
    <div class="mono-3"></div>
    <div class="mono-4"></div>
    <div class="mono-5"></div>
    <div class="mono-6"></div>
</div>

⓼ idのついたdivタグの中に「0あり枝番付き」classのついたdivタグを6個一気に作るぞ　
　　シャープ(#) + container + 大なり(>) + ドット(.) + mono- + $$ + *6 + tab

[実行結果]
<div id="container">
    <div class="mono-01"></div>
    <div class="mono-02"></div>
    <div class="mono-03"></div>
    <div class="mono-04"></div>
    <div class="mono-05"></div>
    <div class="mono-06"></div>
</div>

VisualStudio Code　よく使うねんショートカット

option + ↓　一番上のspanを下に移動したいねん

<span id="first" class="cls">こんにちは！ 日本！</span>
<span>こんにちは！ 日本！</span>
<span>こんにちは！ 日本！</span>
<span>こんにちは！ 日本！</span>

shift + option + ↓　選択した行をすぐ下にコピーしたいねん

<span id="first" class="cls">こんにちは！ 日本！</span>
<span id="first" class="cls">こんにちは！ 日本！</span>

shift + command + K　選択した行を一瞬で消したいねん

<span id="first" class="cls">こんにちは！ 日本！</span>
<span id="first" class="cls">こんにちは！ 日本！</span>

同じ要素は一気に編集できへんかな？？と思ったらこれだ！

monoにカーソル合わせた後、
command押して、Dを4回押すと4つのmono全てにカーソルがあたるよ

→押してみ

4つのmono全てが選択された状態で、右にスペースできたやろ :sun_with_face:
これで一気に編集できるってわけや

<span class="mono ">ヤッホー</span>　
<span class="mono ">ヤッホー</span>　
<span class="mono ">ヤッホー</span>　
<span class="mono ">ヤッホー</span>

command + /　一瞬で選択した行がコメントアウトするで

<!-- <span class="mono">ヤッホー</span>　 -->

shift + option + F　一瞬でコードを綺麗にするよ :star:

[手術前]
<div class="parent"><span id="first" class="cls">こんにちは！ 日本！</span>
  <span class="mono">ヤッホー</span>

[手術後]　shift + option + F
<div class="parent">
  <span id="first" class="cls">こんにちは！ 日本！</span>
  <span class="mono">ヤッホー</span>

[初心者]こそ知らなきゃ損する自動補完（VisualStudio Code）