VSCodeエメット機能は、あなたの時間を節約することができます!

VSCodeは、最も人気のあるコードエディタの1つの機能と機能と1つの私の好きな機能は、emmetのスニペットです.
エメットスナイペットは、エメットの略語を提供することによって自分で全体のコードを書くことを防ぎます.

どうやって動くの?

このエメットul>li*5.list 5つの子を持つ順序なしリストを作成するli クラスのタグlist .
emmetスニペットを壊しましょう.

最初に、我々は我々が使用したい親タグに言及しましたul .

> は子タグを作成するために使われるli この場合).

* はタグの乗算に使われる.

. はクラス属性を記述するために使用されます.

構文と例

チャイルドタグdiv>ul>li結果:

<div>
    <ul>
        <li></li>
    </ul>
</div>

IDとクラス属性div.container - "コンテナ"という名前のクラスを持つdivを作成します.

<div class="container">

</div>

div#header - idという名前のidを作成します.

<div id="header">

</div>

兄弟タグdiv+p+span - すべてのタグを作成します.

<div></div>
<p></p>
<span></span>

入力タグinput:checkbox - チェックボックスの入力タグを作成します.
これは入力タイプごとに使用できます.例えば、text , number , password , range , など

<input type="checkbox" name="" id="">

マルチカーソルサポート
を選択することができますし、同時に複数の行を編集します.複数行を選択するalt キー.


カスタムメイドのemmetスニペット
また、独自のカスタムemmetのスニペットを作成することができます.JSONファイルに定義する必要がありますsnippets.json . The emmet.extensionsPath このファイルを含むディレクトリへのパスを設定する必要があります.
例えば、

{
    "html": {
        "snippets": {
            "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
            "oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
        }
    },
    "css":{
        "snippets":{
            "bgr": "background-color: red",
            "clrb" : "color: black",
            "mgz": "margin : 0"
        }
    }
}

カスタムメイドのemmetsについてHere

次のステップ?
エメットは、VSコードの偉大なWeb開発者の機能の一つです.あなたはそれについてもっと公式に読むことができますVSCode docs .
また、より多くのemmetのスニペットのためのカンニングペーパーを見ることができます.Here