第一步: 新建模板并保存
文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存
第二步: 添加配置,让vscode允许自定义的代码片段提示
文件 --> 首选项 --> 设置 ---> 复制添加这2项
// 在其他建议上方显示代码片段建议。
"editor.snippetSuggestions": "top",
// 自动格式化粘贴进来的内容
"editor.formatOnPaste": true
第三步: 复制以下代码,保存重启vscode
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"page\">\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" name: '',",
" components: {},",
" data() {",
" return {\n",
" }",
" }",
"}",
"</script>\n",
"<style scoped lang=\"stylus\">",
"</style>",
"$2"
],
"description": "Log output to console"
}
}
第四步:测试是否添加成功
测试方法: 新建vue后缀文件,输入vue,按下tab键,OK
注意事项:如果第四步测试不成功,检查vscode右下角,文件类型需要是vue才可以,如果.vue后缀的文件右下角的文件类型是html,手动改为vue后,再次重复第四步。
缺点是:无法像sublime一样新建一个vue文件就可以自动带上对应的模板。
吐槽一下:webstorm中,中文输入法兼容有问题,据传是Microsoft .NET Framework 4.5.2以上版本的兼容问题,更换多次版本后无法修复。无奈只能换到vscode