VSCodeの超基本的なショートカット


おそらくVSCodeを使用している人なら誰でも知っていることかもしれないのですが、、、私は知らなかった。

HTMLを書く時のショートカットですが、ショートカットを使用することでコーディングの時間をかなり削減できるんですね。。。

恥ずかしながら知らなかった。。。

<!-- 「!」 を変換すると下記の文書型宣言ができる -->

<!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」 と#から始めて書くとid名を指定したdivタグができます -->
<div id="id"></div>
<!-- 「.cls」 と.から始めて書くとclass名を指定したdivタグができます -->
<div class="cls"></div>
<!-- 「.parent>.child」 例えば左記だと親要素と子要素、セットで書くことができます -->
<div class="parent">
  <div class="cls"></div>
</div>

<!-- もちろんidとclass掛け合わせてもできます 「#parent>.child」  -->
<div id="parent">
  <div class="child"></div>
</div>
<!-- 「.cls*6」 左記の場合*n文のタグが作れます。 -->
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>

他にも沢山あるので、調べながら使っていって覚えていこうと思います!