vscode - 创建vue模板

第一步:  新建模板并保存

文件 --> 首选项 --> 用户代码片段 --> 输入vue，选择vue.json -->复制 第三步中的模板内容中内容保存

 

第二步: 添加配置，让vscode允许自定义的代码片段提示

文件 --> 首选项 --> 设置 ---> 复制添加这2项

 

// 在其他建议上方显示代码片段建议。

"editor.snippetSuggestions": "top",

// 自动格式化粘贴进来的内容

"editor.formatOnPaste": true

 

第三步: 复制以下代码，保存重启vscode

{
  "Print to console": {
	  "prefix": "vue",
	  "body": [
	    "\n",
	    "\n",
	    "",
	    "$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