Vscode系列：vscode中自定义模板代码（react模板、vue模板）

Vscode系列：vscode中自定义模板代码react模板、vue模板）

在使用React和Vue等框架进行项目开发的时候，使用插件不能满足我们模板的需求，那么我们就需要自定义模板。那么使用Vscode如何自定义模板呢？

---

系列相关文章
Vscode终端中使用cnpm或者yarn命令
VScode 好用插件！！ 不定期更新

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、React模板配置

打开vscode，选中 文件 》 首选项 》用户片段。
选中新建代码片段。
输入名称 react.json，点击回车。
删除所有内容，把下面代码复制粘贴。

{
	"reactDemo":{
		"prefix": "rea", //快捷名称
		"body": [ //主题部分
			"class $1 extends React.Component {", //$1 表示变量
				"constructor (props){",
					"super(props)",
					"this.state = {",
				  		"data : []",
					"}",
				"}",

				"render(){",
					"return (",
					  "<div>",
						"<div> $1 div>",
					  "div>",
					");",
				"}",
			"}",
			"export default $1"
		
		],
		"description": "react demo create by qingfeng"//文件描述
	}
}

完成上述操作就可以了，新建文件输入res出现提示直接回车即可。

二、Vue模板配置

打开vscode，选中 文件 》 首选项 》用户片段。
选中新建代码片段。
输入名称 vue.json，点击回车。
删除所有内容，把下面代码复制粘贴。

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "",
      "<template>",
      "  <div>div>",
      "template>",
      "",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "    };",
      "  },",
      "",
      "  components: {},",
      "",
      "  computed: {},",
      "",
      "  mounted: {},",
      "",
      "  methods: {}",
      "}",
      "",
      "script>",
      "<style lang='scss' scoped>",
      "style>"
  ],
    "description": "Log output to console"
  }
}

总结

上述就是创建一个自定义模板，如果要创建其他的模板，可以根据上述内容进行修改即可。