Milk+ea

Weblog Is My Hobby.

ATOMのStylus + Emmetで:(コロン)を間に挟んで展開されるようにする

ATOMのStylus + Emmetで:(コロン)を間に入れて展開されるようにする

Macでの設定方法です。

emmet-atomATOMへインストールした後、preferences.jsonファイルを作成し、そこへ設定を書きます。

emmet-atomのREADME.mdを読むと、設定ファイルは~/emmetへ置けばいいとのこと。 なので、~/emmet/preferences.jsonという形になるように作成し、開きます。

mkdir ~/emmet && touch ~/emmet/preferences.json && open ~/emmet/preferences.json 

そして次をコピペ。

{
  "stylus.valueSeparator": ": "
}

ここまでした所で、一度ATOMを再起動。 .stylファイルを開いて、dbと入力し、tabを押します。

display block

が、間にコロンがない状態で展開されてしまいました。 ちゃんとしたコロンを間に入れて展開させるためには、Stylus用にキーバインドの設定もしてあげる必要があります。

~/.atom/keymap.csonを開いて次を追加してください。

'atom-text-editor[data-grammar~="stylus"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

ATOMを再起動して、再び.stylファイルで、dbと入力してtabを押してください。 次のように展開されれば完了です!

display: block

:が合ったほうが僕は好きです。