8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

BracketsのEmmetをpugに対応させる

Last updated at Posted at 2017-04-06

1. snippets.jsonを作成

[ファイル]->[新規作成]から新しいファイルを作成し、下記のJSONを貼り付けます。

{
  "pug": {
    "filters": "jade",
    "extends": "html",
    "profile": "xml"
  }
}

新しいファイルの名前を「snippets.json」として任意の場所に保存してください。
今回は、デスクトップに「emmet」というフォルダを作り、そこにsnippets.jsonを置くとします。

2. snippets.jsonのパスを確認

Bracketsがデフォルトの状態であれば、snippets.jsonのタイトルバーにパスが表示されます。
確認しておきましょう。
下記画像のタイトルバーは「/Users/kubotomoki/Desktop/emmet/snippets.json(Getting Started) - Brackets」となっています。

3. Emmet Preferencesにパスを指定

メニューの[Emmet]->[Preferences...]から「Emmet Preferences」を表示。
「Extensions folder」の入力欄に、タイトルバーで確認したsnippets.jsonまでのパスを入力します。
snippets.jsonまでのパスなので、ファイル名は含めないでください。

4. Bracketsを再起動

Bracketsを再起動します。
Bracketsをそのまま落としてもいいですし、メニューの[デバッグ]->[拡張機能付きでリロード]でEmmetを更新します。

たのしー!

pug.gif

もしEmmetがおかしくなったら

拡張機能からEmmetを削除したのち、再インストールしてください。

snippets.jsonについて

snippets.jsonなどのEmmetの正規のカスタマイズ方法は、過去に私がAdobe公式ブログで解説しています。参考にしてください。

Emmet入門 第4回 Emmetのスニペットや設定を編集して、思い通りの記述にしよう | Adobe Creative Station

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?