How can I enable syntax highlighting for .vue files in Atom?

Question

I\'m starting up with Vue.js. The first problem I\'ve run into is that my IDE (Atom) doesn\'t beautify my .vue files. It\'s all just white text.

How can I make Atom hi

Answer 1

The Vue.js project maintains Awesome Vue.js, "a curated list of awesome things related to Vue.js".

This includes a list of useful Atom packages for Vue.js:

• language-vue@atom.io - Vue component file syntax for Atom.
• language-vue-component@atom.io - Adds syntax highlighting to Vue Component files in Atom.
• vue-autocomplete@atom.io - Vue.js 1.0+ autocomplete for Atom.
• vue-snippets@atom.io - Atom snippets for Vue component files.
• vue-autocompile@atom.io - Auto compile vue file on save.
• lint-sass-vue@atom.io - Atom.io package to lint Sass/SCSS in .vue files.
• vuejs2-snippets@atom.io - Atom snippets for javascript and components, including lifecycle hooks, directives, properties, vuex, vue-router, vue-i18n support.
• vue2-autocomplete@atom.io - Vue.js 2.0+ autocomplete for Atom.

Note that currently the language-vue and language-vue-component do not play nicely together, as discussed here. For now, for syntax highlighting in Atom your best bet is language-vue only.