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?
3 Answers
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
.vuefiles.- 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.
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.
Related