[Atom]emmetで独自のスニペットを設定する方法

エディタはAtomをメインで使っているたにっぱです。

Atomはカスタマイズの自由度が魅力なのですが、その分カスタマイズ方法がややこしく、情報も英語しかない場合が多いので微妙にハードルが高かったりもします。

今回は、emmetの独自スニペットを定義する方法を調べて定義したので紹介したいと思います。

やりたかったこと

• PHPファイルでもHTMLのスニペットを使用できるようにしたい。
• 「pi」で「<?php ?>」、「pe」で「<?php echo ; ?>」が展開される独自スニペットを定義したい。

設定ファイルの場所

まず、独自のスニペットを書き込む設定ファイル「snippets.json」を作成する必要があります。

「Settings > Packages > emmet」からemmetの設定を開きましょう。

画像の赤枠の部分が設定ファイルを配置するべき場所です。配置場所は自由に設定することが可能です。 (デフォルトでは「~/emmet」ですが、自分は自宅と職場で設定を共有したいためDropboxフォルダ内に配置しています。)

今回の場合は「~/emmet/snippets.json」を作成します。

設定ファイルの内容

以下のように設定ファイルを記述しました。

{
  "php": {
    "extends": "html",
    "snippets": {
      "pe": "<?php echo |; ?>",
      "pi": "<?php | ?>"
    }
  }
}

詳細

"extends": "html"

これは、HTMLのスニペットを引き継ぐ(extend)という意味です。これでPHPファイルでもHTMLのスニペットが適用されます。

"snippets": {
  "pe": "<?php echo |; ?>",
  "pi": "<?php | ?>"
}

ここは独自のスニペットを定義している部分です。スニペットを展開した際、パイプ（縦棒）が書かれている場所にカーソルが配置されるので、いい感じの場所にパイプを書いておきましょう。

あとは保存してAtomを再起動すれば変更が適用されているはずです。

以上

Atomは色々ややこしい点も多いですが、その分上手くカスタマイズすれば劇的に便利になるので色々カスタマイズを試したいですね。

以上、たにっぱでした〜