27
21

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.

PHPでもEmmetを使ってHTMLを展開する方法

Posted at

##PHPでEmmetが使えなくて泣きそうになったあげく解決したのでメモ。

私の環境は以下の通りです。
・OS Windows
・Editor Atom

##解決方法

1. 設定からキーバンドを確認

2. Emmet展開のキーバインドをコピー(赤丸で囲んだ箇所をクリックすればコピーできます)
01.png

3. キーマップに貼り付け
02.png

4. PHPでも展開できるように以下を追加します
atom-text-editor[data-grammar~="php"]:not([mini])

追加後です。以下をコピペでもOK

keymap.cson
{
'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="erb"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="stylus"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini]), atom-text-editor[data-grammar~="scss"]:not([mini]), atom-text-editor[data-grammar~="php"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'
}

これで無事にPHPでも展開できました。
他にも解決策があるのかもしれませんが、取り急ぎこのまま使おうと思います。


####ちなみに、今回うまくいかなかった方法
snippets.jsonに以下を追記。

snippets.json
{
    /////いろいろ設定が書いてありますが最終行に追加/////

    ,"php": {
        "extends": "html"
    }
}

参考:AtomエディタのEmmetで、PHPファイルでもHTMLスニペットを使う
いろいろ記事を調べて出てくるのが上記の方法だったのですが、これはうまくいきませんでした。(泣)
その代わり別な設定方法が学べたので良かったです、ありがとうございます。

うまくいかないことがありましたらお知らせください。

27
21
1

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
27
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?