0
0

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 3 years have passed since last update.

ATOMのerbファイルでEmmetが効かなくなった時に

Posted at

初めてQiitaに記事を書きます。
今Railsを学習している所で、エディタはAtomを使っています。
Railsの.html.erbファイルを記述している時にEmmetの機能が効かなくなったので、個人的に解決した方法を残しておきます。

#Atomで、erbファイルを編集する時にEmmetの機能を使いたい

普通のhtmlファイルを編集する時に
nav.box>ul>li*5
のようにすると、tabキーで

<nav class="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

になるのに、erbファイルだと全く効かず、ただインデントが追加されるだけでした。
Atomの記事が少なく解決までに時間がかかったので、個人的に解決した方法を残しておきます。

##Emmetの設定で、 html.erbも読み込めるようにする

Atomを開き、上部タブのAtom > 環境設定 > 設定フォルダを開く に行きます。スクリーンショット 2020-07-23 15.48.14.png

開いたページの中の、 .atom > packages > emmet > keymaps >emmet.cson を開きます。
37行目に 'tab': 'emmet:expand-abbreviation-with-tab' とあり、tabキーを押した時に対応する言語が36行目にずらっと書いてあります。
スクリーンショット 2020-07-23 15.49.41.png

36行目に、

atom-text-editor[data-grammar="text html ruby"]:not([mini])

を追加し,保存します。

画面を閉じた後もう一度Atomの環境設定を開き、キーバインドを開きます。
先ほど保存した内容があるので、コピーします。
ボードクリップのマークをクリックでコピーできます。
スクリーンショット 2020-07-23 16.04.33.png

上部のAtomタブ > キーマップ を開き、コピーした内容を貼り付けて保存します。
自分はこれで、erbでもemmetの機能を使えるようになりました。

折角なので、これからも何かあれば投稿していこうと思います。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?