vscode - 创建vue模板

第一步: 新建模板并保存

文件 --> 首选项 --> 用户代码片段 --> 输入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

vscode - 创建vue模板

猜你喜欢