WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

Visual Studio Code

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

Visual Studio CodeでEmmetを使う

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

Atom

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

AtomでEmmetを使う

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

Brackets

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

BracketsでEmmetを使う

Sublime Text

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

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

Sublime TextでEmmetを使う

Dreamweaver

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

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

DreamweaverでEmmetを使う