UbuntuのAtomのEmmetのコードスニペットを追加する


※環境:Ubuntu 16.04 / Atom 1.21.1

経緯としては、Ubuntu環境下でRuby on railsを勉強するため環境構築をしていて、NetBeansだとRuby on railsのrails new 〜〜を走らせたあとだとプロジェクトが立てられないという弊害が発生した。
(立てようとすると「もうフォルダがあるから新規プロジェクトにできない」と怒られてしまう)

そこで別エディタでjEditを利用していた…が、jEditにはEmmetがないため、HTMLの記述が徐々に面倒になってきた。

そこでさらに別のエディタで、かつEmmetが動くものを探してAdobe Bracketsに行き着いた。
が、Adobe Bracketsは本記事記載時はバージョン1.11で、Mozcによる日本語変換ができないというバグ??っぽいものを持っていることが分かった。
(手がかりになった記事:PrsPrsBK’s blog – Adobe Brackets を 1.11 から 1.10 に戻した (Linux)

そこで更にエディタ探しの旅に出て、最終的に出会ったのが「Atom」だった。
順調にインストール、プラグインの導入が進んで、Emmetを使いながら日本語入力も問題ない。
うまくいったかなー、と思い、Emmetのスニペットを追加したら、動かない。

Adobe BracketsやNetBeansではこんなことはなかったんだけど、Atomの場合は強引に追加したEmmetが動かなかったので、キチンと記述した、というお話。

BracketsやNetBeansでは

"html": { 
    "filters": "html",
    "profile": "html",
        "snippets": { "!!!": "<!DOCTYPE html>",
        ...(略)...
    },
}

この真下あたりに強引に

        "snippets": { "!!!": "<!DOCTYPE html>",
                      "php": "<?php | ?>",

とでも追加しておけば、「php」と打ち込んでEmmet変換したら出てきてた。

でも、Atomではこれがエラーになって帰ってくるし、普段から入っているEmmetも動かなくなる。

で、いろいろ調べたらそれらしいものが出てきた。

"php": {
    "extends": "html",
    "snippets": {
      "eh": "<?php echo h(|); ?>"
    }
  },

こう書かないといけないらしい。

つまり、ファイルを合わせないといけないっぽい。

今回は自分はRuby on Railsをやっているので、以下のようにした。

"html": {
    "filters": "html",
    "profile": "html",
    "snippets": {
        "!!!": "<!DOCTYPE html>",
        ...(略)...
    },
},
"erb": {
    "extends": "html",
    "snippets": {
        "%": "<%= | %>"
        }
    },

こうすると、erbファイルの中でEmmet変換できた。

いくつか拡張子があるので、適宜合わせて記述し、変換したいコードを追加していけばいいと思う。

参考にさせていただきました!
ログってなんぼ – AtomのemmetパッケージにCakePHPのh()関数スニペットを登録する より

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.