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