Atom下VueJS开发的配置

VueJS中的Vue组件是以.vue为扩展名的，atom中不识别，atom默认认为是Plain Text，所以没有语法高亮等特性。

在atom中有一个名为language-vue的社区包，安装之后能够高亮.vue的文件，还有一个template的缩略词，能够快速生成Vue组件的结构，看似完美。

但是Emmet不好用！！！！

作为一个无法离开Emmet的人来说，没有Emmet的功能简直是回到了原始社会，无法忍受。

在google上搜索，得到解决方案，在emmet-atom中有#364的开放issue，joshuajohnson814提出了可以在keymap.cson中添加自定义快捷键：

1
2

'atom-text-editor[data-grammar~="vue"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

作为临时的解决方案，但是其他人提出：

CSS 不好用

也就是我没办法输入

1

w10[tab] -> width: 10px;

其实，.vue文件不过就是html文件换了个扩展名而已，我们可以直接把.vue登记成.html文件即可，也就是atom看到了.vue文件就用.html来处理即可。

完美解决方案

在atom中打开config.json文件，别告诉我你不知道怎么打开，在MacOS下，在atom菜单中。

在core段下面增加：

1
2
3
4

customFileTypes:
  'text.html.basic': [
    'vue'
  ]

这样，所有的.vue文件一律视为html，完美解决。

我得意地笑，得意地笑，~~~~

上面那段配置什么意思？给你一个网址，atom官方手册，好好看看Customizing Language Recognition这一段就明白了。