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

URL: https://webrandum.net/emmet-text-editor/
公開日: 2019-05-08
更新日: 2019-05-04
カテゴリー: 作業効率化
タグ: Atom, Emmet, Visual Studio Code, テキストエディタ
出典: Webrandum（著者: サイトウ マサカズ）

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

- Visual Studio Codee

- Atom

- Brackets

- SublimeText

- Dreamweaver

Emmet自体の使い方に関しては別で記事を書いているので、[そちら](https://webrandum.net/emmet-html/)を参考にしてください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/03/eyecatch-19.jpg)効率的なマークアップが出来るようになるEmmetでHTMLを書く時の基本https://webrandum.net/emmet-htmlWebサイトのマークアップスピードを上げるためには、そもそも書く文字数を減らすとスピードが上がります。HTMLの場合は下記のような理由から、記述に時間がかかってしまいます 開始タグと閉じタグで、要素名を2回入力する必要がある <>を入力する必要がある インデントの入力が面倒今回はそんなHTMLを素早く入力できるEmmetという記法についてまとめます。Emmetとは？Emmet（旧：Zen-Coding）は、独自の省略記法でマークアップスピードを上げるプラグインです。括弧や閉じタグを書かずに記述して最後にtabで展開するので、単純に...](https://webrandum.net/emmet-html)

## Visual Studio Code

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

![Visual Studio CodeでEmmetを使う](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_1-24.png)

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

## Atom

Atomの場合はパッケージを入れる必要があります。

［環境設定］→［インストール］にて「emmet」と検索してパッケージをインストールします。

![AtomでEmmetを使う](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_2-19.png)

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

## Brackets

Bracketsの場合は拡張機能をインストールします。

逆EmmetというHTMLをEmmetに戻すという拡張機能もあります（Emmetの勉強に使えそうです）。

![BracketsでEmmetを使う](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_3-17.png)

## Sublime Text

Sublime Textもパッケージのインストールが必要です。

command + shift + Pでコマンドパレットを呼び出し、「Package Control: Install Package」を入力して選択します。

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

![Sublime TextでEmmetを使う](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_4-9.png)

## Dreamweaver

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

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

![DreamweaverでEmmetを使う](https://webrandum.net/mskz/wp-content/uploads/2019/05/image_5-3.png)