Emmet is super useful for writing code quickly. Unfortunately it’s not support right out of the box when working with Vue files in Atom. Luckily it’s easy to get it up and running!

Just copy and paste the below into your KeyMap. If you don’t where that is, then just follow this.

Open up Atom -> File -> Keymap. Scroll to the bottom of the file and paste the snippet!

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

That’s all! You should now be able to use emmet inside your Atom templates. Happy coding!