32
32

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.

AtomエディタのEmmetで、PHPファイルでもHTMLスニペットを使う

Last updated at Posted at 2015-03-31

AtomEmmetプラグイン を使っているけど、デフォルトだとPHPファイル内でうまく動いてくれない。
例えば html:5<html:5></html:5> になってしまう。ので、設定メモ。

:arrow_down: 追記の方がおすすめ

設定ファイルの場所は以下。
(Atomの設定画面から「Open Config Folder」を開くのがラク)

[ユーザーディレクトリ]/.atom/packages/emmet/node_modules/emmet/lib/snippets.json

設定ついでに以下の部分も日本語にしておくと良いかも。

snippets.json
{
	"variables": {
		"lang": "ja",
		"locale": "ja-JP",
		"charset": "utf-8",
		"indentation": "\t",
		"newline": "\n"
	}

	/////ここからいろんな設定/////
}

本題のPHP対応は、設定ファイルの最後に以下を追記するだけ。

snippets.json
{
	/////ここまでいろんな設定/////

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

はじめのカンマは、前の行にカンマがない時用です。
以上メモでした。

追記

もっと簡単な方法があったので追記。
Emmetはどうやらユーザー拡張ができるようなので、その方法を。

拡張用のディレクトリを作成し、そこに各設定ファイルを入れる。
ディレクトリはデフォルトで ~/emmet になっている。(画像はAtomのEmmet設定画面)
2015-05-13_100218.png

ここに snippets.json という名前のファイルを作り、拡張したい項目のみ記述する。
今回拡張したいのはPHPでの動作と日本語圏対応なので、以下のみ。

~/emmet/snippets.json
{
	"variables": {
		"lang": "ja",
		"locale": "ja-JP"
	},
	"php": {
		"extends": "html"
	}
}

これで動作した。
最初の方法だとAtomのEmmetアップデートのたびにリセットされてしまうので、こっちの方が良い。

32
32
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
32
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?