如何在 Atom 中为 .vue 文件启用语法高亮显示？

Question

我从 Vue.js 开始。我运行遇到的第一个问题是我的 IDE (Atom) 没有美化我的 .vue 文件。都是白字。

如何让 Atom 正确高亮 .vue 文件？

Answer 1

language-vue 包为 Vue 组件添加语法高亮。

还有一个包可以美化你的代码。安装 atom-beautify 软件包。它已预装 Vue beautifier。

Answer 2

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

这包括 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.

请注意，目前 language-vue 和 language-vue-component 不能很好地搭配，as discussed here。目前，对于 Atom 中的语法突出显示，您最好的选择是仅 language-vue。

Answer 3

在命令提示符中使用：

apm install language-vue

用于语法高亮显示。

还有一个Atom包好像只美化了没有语法高亮:

apm install vue-format

您可能需要退出 Atom 然后重新启动它。

如何在 Atom 中为 .vue 文件启用语法高亮显示？

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

syntax-highlighting

atom-editor

vue.js