ATOMのStylus + Emmetで:(コロン)を間に挟んで展開されるようにする
Macでの設定方法です。
emmet-atomをATOMへインストールした後、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
:
が合ったほうが僕は好きです。