导语
在进行vue项目时，我们需要对编译器进一步配置来支持vue文件以及相关模板语法的高亮显示等。本文列出关于webstorm和vscode两种常用编译器的模板语法配置。
webstorm
1. 打开设置
打开设置：
File => Settings
2. 安装vue插件
在搜索区输入plugins，或者找到plugins选项，右边的Marketplace搜索vue，安装。
webstorm_1.png
3. 自定义模板
有时候我们新建vue文件时默认的模板不是我们想要的，这时可以自定义模板：
还是在设置中，搜索框输入file and code template或者在设置中找到该选项也行，在右侧选择vue模板，然后在编辑区修改模板即可。如图
webstorm_2.png
4. 参考
给出一份我自己的作为参考，可按自己常用规则优化修改。
其中，${COMPONENT_NAME}直接获取组件名。
<template>
<div>
</div>
</template>
<script>
export default {
name: "${COMPONENT_NAME}",
props: [],
components: {
},
data () {
return {
}
},
methods: {
},
mounted () {
}
}
</script>
<style type="text/scss" lang="scss" scoped>
</style>
vscode
1. 安装Vetur
在应用市场中安装Vetur
2. 使用
此时，在vue项目中新建.vue文件，然后输入vue时，按tab键则会出来一份默认的模板。由于默认模板涵盖内容过少，因此我们仍需要对齐进行自定义模板配置。
3. 自定义模板
- 打开
文件 => 首选项 => 用户片段 - 搜索关键词
vue - 在候选列表中选择
vue.json - 在打开的文件中自定义配置即可
如果没有找到vue.json，可以重启一下vscode试一下。
4. 参考
给出一份参考
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" props: {\n",
" },",
" components: {\n",
" },",
" data() {",
" return {\n",
" };",
" },",
" watch: {\n",
" },",
" methods: {\n",
" },",
" mounted() {\n",
" },",
"};",
"</script>\n",
"<style scoped lang=\"${1:scss}\" type=\"text/scss\">\n",
"</style>\n",
],
"description": "Create vue template"
}
}
