一般的によく使われているテキストエディタでのEmmetの設定方法まとめ

Web業界でよく使われている下記のテキストエディタでの、Emmetの使用方法や、カスタマイズ場所をまとめておきます。

• Visual Studio Codee
• Atom
• Brackets
• SublimeText
• Dreamweaver

Emmet自体の使い方に関しては別で記事を書いているので、そちらを参考にしてください。

Webrandum

効率的なマークアップが出来るようになるEmmetでHTMLを書く時の基本

https://webrandum.net/emmet-html

Webサイトのマークアップスピードを上げるためには、そもそも書く文字数を減らすとスピードが上がります。HTMLの場合は下記のような理由から、記述に時間がかかってしまいます 開始タグと閉じタグで、要素名を2回入力する必要がある <>を入力する必要がある インデントの入力が面倒今回はそんなHTMLを素早く入力できるEmmetという記法についてまとめます。Emmetとは？Emmet（旧：Zen-Coding）は、独自の省略記法でマークアップスピードを上げるプラグインです。括弧や閉じタグを書かずに記述して最後にtabで展開するので、単純に...

Visual Studio Code

Visual Studio Codeではデフォルトの状態でEmmetが入っていて（一応拡張機能扱いですが）、設定は［環境設定］→［拡張機能］→［Emmet］から設定できます。

ちなみに［環境設定］→［拡張機能］→［Emmet］の「Trigger Expansion On Tab」にチェックを入れていないと、tabを押してもうまく展開されないので、注意してください。

Atom

Atomの場合はパッケージを入れる必要があります。
［環境設定］→［インストール］にて「emmet」と検索してパッケージをインストールします。

これでEmmetが使えるようになります。

Brackets

Bracketsの場合は拡張機能をインストールします。
逆EmmetというHTMLをEmmetに戻すという拡張機能もあります（Emmetの勉強に使えそうです）。

Sublime Text

Sublime Textもパッケージのインストールが必要です。
command + shift + Pでコマンドパレットを呼び出し、「Package Control: Install Package」を入力して選択します。

再度検索ボックスが表示されるので、「Emmet」と検索して選択すればEmmetがインストールされます。

Dreamweaver

Dreamweaverはデフォルトの状態でEmmetがインストールされています。

1点設定できる項目として、［環境設定］→［コードフォーマット］の「Tabキーを使用して略語を展開」にチェックが入っていないと、tabを押してもEmmetが展開されないので注意してください。