vscode/webstorm自定义vue模板

导语

在进行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}直接获取组件名。

---

vscode

1. 安装Vetur

在应用市场中安装Vetur

2. 使用

此时，在vue项目中新建.vue文件，然后输入vue时，按tab键则会出来一份默认的模板。由于默认模板涵盖内容过少，因此我们仍需要对齐进行自定义模板配置。

3. 自定义模板

1. 打开 文件 => 首选项 => 用户片段
2. 搜索关键词vue
3. 在候选列表中选择vue.json
4. 在打开的文件中自定义配置即可

如果没有找到vue.json，可以重启一下vscode试一下。

4. 参考

给出一份参考

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "\n",
            "\n",
            "\n",
        ],
        "description": "Create vue template"
    }
}