<h1 id="emmet%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%AE%EF%BC%9F">
<a class="header-anchor-link" href="#emmet%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%AE%EF%BC%9F" aria-hidden="true"></a> emmetって何ができるの？</h1>
<p>HTMLやCSSのコードを補完してくれます。途中まで書いたら勝手に対応するタグを書いてくれる機能を提供してくれます。</p>
<h1 id="emmet%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#emmet%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95" aria-hidden="true"></a> emmetの設定方法</h1>
<p>emmetの設定をします。</p>
<ol>
<li>vscodeを起動する</li>
<li>左下の歯車マークをクリックして(<code>ctrl+,</code>でも可)、「settings」をクリックする</li>
<li>上の検索バーに「emmet」と入れる</li>
<li>「Trigger Expansion on Tab」という項目にチェックを入れる</li>
<li>「Edit in settings.json」をクリックして、設定を書き換える。</li>
</ol>
<h2 id="settings.json%E3%81%AE%E4%B8%AD%E8%BA%AB">
<a class="header-anchor-link" href="#settings.json%E3%81%AE%E4%B8%AD%E8%BA%AB" aria-hidden="true"></a> settings.jsonの中身</h2>
<div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token punctuation">{</span>
    <span class="token string-property property">"emmet.showSuggestionsAsSnippets"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token string-property property">"emmet.variables"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">"lang"</span><span class="token operator">:</span> <span class="token string">"ja"</span>
     <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://storage.googleapis.com/zenn-user-upload/dsfghqapiqu5qylf7v5awiticjpa" alt loading="lazy" class="md-img"></p>
<p>ここまでできれば完了です。</p>
<h2 id="%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 使ってみる</h2>
<p>作ったindex.htmlに「<strong>!</strong>」と入力して、<strong>Tab</strong>を押してみてください。</p>
<p>すると画像のように一気に補完してくれます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/swujff06y125gdtrjbu9yzann8j1" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%81%9C%E3%81%B2%E8%A9%A6%E3%81%97%E3%81%A6%E6%AC%B2%E3%81%97%E3%81%84%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89">
<a class="header-anchor-link" href="#%E3%81%9C%E3%81%B2%E8%A9%A6%E3%81%97%E3%81%A6%E6%AC%B2%E3%81%97%E3%81%84%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" aria-hidden="true"></a> ぜひ試して欲しいコマンド</h2>
<p>私自身emmetを使いこなせているわけではないので、そこまでコマンド紹介はできませんが、以下はぜひ試してみてください！感じがつかめると思います。<br>
<strong>それぞれ入力したあとEnterキーを押してください。</strong></p>
<div class="code-block-container"><pre class="language-plane"><code class="language-plane">!  (TabかEnterを押す)
</code></pre></div><div class="code-block-container"><pre class="language-plane"><code class="language-plane">.header-left  (TabかEnterを押す)
</code></pre></div><div class="code-block-container"><pre class="language-plane"><code class="language-plane">h1{title}  (TabかEnterを押す)
</code></pre></div><div class="code-block-container"><pre class="language-plane"><code class="language-plane">link:css  (TabかEnterを押す)
</code></pre></div><div class="code-block-container"><pre class="language-plane"><code class="language-plane">ul&gt;li*3  (TabかEnterを押す)
</code></pre></div><div class="code-block-container"><pre class="language-plane"><code class="language-plane">h1+h2  (TabかEnterを押す)
</code></pre></div>

[VScode]EmmetによるHTML自動補完機能

Discussion