How can I enable syntax highlighting for .vue file

问题:

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 highlight .vue files properly?

回答1:

language-vue package adds syntax highlighting to Vue components.

There is also another package to beautify your code. Install atom-beautify package. It has Vue beautifier preinstalled.

回答2:

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:

• [e-mail] - Vue component file syntax for Atom.
• [e-mail] - Adds syntax highlighting to Vue Component files in Atom.
• [e-mail] - Vue.js 1.0+ autocomplete for Atom.
• [e-mail] - Atom snippets for Vue component files.
• [e-mail] - Auto compile vue file on save.
• [e-mail] - Atom.io package to lint Sass/SCSS in .vue files.
• [e-mail] - Atom snippets for javascript and components, including lifecycle hooks, directives, properties, vuex, vue-router, vue-i18n support.
• [e-mail] - 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.

回答3:

Use in your command prompt:

apm install language-vue

for syntax highlighting.

There is another Atom package which seems to only beautify it but doesn't do syntax highlighting:

apm install vue-format

You may need to exit Atom and then restart it.