目次
VS CodeでEmmetの設定をして作業を効率化する
どうもこんばんはヒロシです★
今回は、テキストエディタのEmmetを用いて、VSCodeでHTMLやCSSを効率良くコーディングするやり方を紹介します。
またこのプラグインは、Atom、SublimeTextや他のテキストエディタでも使えます。
これが使えるだけで、最初に表記すべきDOCTYPE宣言から基本構文までを、自動で記述できるので、時間も短縮出来てオススメです。
それでは、やってみましょう！
VSCodeで、ファイルを開く
まず、テキストエディタから、index.htmlファイルを作成または開きます。
html:5または!と記述し、Tabキーを押す
1行目に、！もしくはhtml:5と記述して、Tabキーを押します。
後は２行目の"en"を”ja”に変えて完了です。
また、例えば<h1>や<p>など他のタグでも同じように使えます。
始めから<html lang="ja">に設定したい場合
以上の手順でやると、毎回lang設定を記述し直すため、面倒かと思います。
そこで、いちいち設定しなくても良いように、最初に設定するやり方がこちらです。
まず、設定画面から、拡張機能でemmetと入れ【setting.jsonで編集】という箇所をクリックして、setting.jsonを開きます。
そして、以下のようにコードを追加すれば完了です。
では、試しに初めからやってみると、、、
成功ですね！
以上でした★
![Pinterest](https://www.pinterest.com/pin/create/button/?url=https%3A%2F%2Fhiroshinopage.com%2Fvscode-emmet%2F&media=https://hiroshinopage.com/wp-content/uploads/2020/06/kisspng-visual-studio-code-microsoft-visual-studio-source-5af3543934ceb8.8291349215258962492163-e1592052160136.png&description=目次1 VS CodeでEmmetの設定をして作業を効率化する2 VSCodeで、ファイルを開く3 html:5または!と記述し、Tabキーを押す4 始めから<html lang="j){kind=link}