VSCode设置与删除代码模板(vue和react为例)

前言：在我们做开发中，免不了会偷个懒，节省自己的写代码的时间。想通过一些快捷键直接把想要的模板对象创建出来。今天给大家详细的写下，在VSCode中怎样去设置代码模板。

---

步骤：

①：找到VSCode里的左上角的文件，然后点击，找到列表里的首选项，在首选项里会看到用户代码片段

②：然后进行设置，自己的代码片段。

下面我以react为例进行解释。（直接从上面第②步开始）

Vue的代码段生成：

①:找到左下角设置中的用户代码段

②：在弹框搜索vue.json.code-snippets,没有的话会自动创建

③：把默认的删除，将下面的粘贴进去保存

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

④：在vue模板使用，直接vue

react的模板生成步骤

点击用户代码片段VSCode会弹出下面的框，根据自己的需要进行选择不同代码段类型

选择好会看到VSCode上面有一行显示下面的样式（我选的是jsx结尾的）

 

最后把下面的代码拷贝进去，Ctrl+S保存就好了

{
	"Print to console": {
        "scope": "javascript,typescript",
        "prefix": "react",
        "body": [ 
            "import React, { Component } from 'react'",
            "export default class ClassName extends Component {",
                "constructor(props) {",
                    "super(props);",
                    "this.state = {}",
                "}",
                "render() {",
                    "return (<div></div>);",
                "}",
            "}", 
        ],
        "description": "Log output to console"
    }
}

最后怎样使用呢

直接在你建的jsx文件中react+Tab键就OK啦！

效果图

---

删除代码段

最后再给大家补充一点，怎样删除自己建的代码模板：也是我自己尝试无意中发现的

如果想删除自己创建的代码模板，在用户代码段里直接把粘贴代码清空保存就好了。