Super fast Blade and Vue templating with Atom and Emmet

Written by on

We're always looking for ways to make development faster and Emmet is a fantastic package that allows us to write shorthand html. Unfortunately it doesn't support Vue or Blade as standard, however we can fix that.

Emmet is fantastic for speeding up development but if you've ever tried to use it in Vue or Blade you'd be left feeling disappointed. Using Atom we can simply edit our Keymap file and have Emmets shorthand up and running in no time.

At the top of your Editor go to Atom > Keymap to open your keymap.cson file and add the following to the end of your file:

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

Save your file and restart your Atom. Open a Blade of Vue file and Emmet's short hand is now working. Simple as that!

If you've not used Emmet before, you can find a cheat sheet here to learn how to speed up your workflow.

  • Vue
  • Blade
  • Atom
  • Emmet
Three Bears - Web design and development
Loading