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"
  }
}

总结

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

你可能感兴趣的:(工具,编辑器)