atom editor package: emmet


剛裝好emmet這包atom的插件,做一下筆記,記錄一個略為不順手的地方。

這是個可以讓人少打很多字的好物,我一直都是用內建的snippet,搭上emmet應該可以再少打更多字


emmet自帶了很多快捷鍵,包括使用tab來展開自動完成的這個功能,例如輸入:

div.hello>ul#list>li.item*4

再按下tab,就會變成:

<div class="hello">
    <ul id="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

 

預設作用的語言包括html、css等等,我想要加上的是讓他在vue component裡也能運作(有裝vue syntax),因此照document的做法是在keymap.cson裡面加上新的selector:

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

 

但問題就來了,emmet是能在vue檔案裡作用了,但是他把原本的snippe通通吃掉了,所有tab的行為全部都被解釋成emmet的展開功能,變成vue裡原本的快捷鍵無法作用(比如說插入template等等),甚至在js的區塊按下tab都會被變成html tag(<if></if>、<var></var>這樣)。

為了解決這個問題,只好改變一下key binding,改成使用option + tab:

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

 

同時因為不需要其他花俏的功能,也順便取消預設的key binding,改將幾個常用的功能放進自己的keymap.cson裡,避免蓋掉原來的快捷鍵。