VS Code自定义代码模板背景：在使用VS Code开发时，不管是Vue或者React项目，当书写一个组件的时候，都

背景：

在使用VS Code开发时，不管是Vue或者React项目，当书写一个组件的时候，都必须写一些代码，例如：

// React的User.tsx 组件
export default function User(props: {username: string}) {
  return <div>{props.username}</div>
}

// Vue的User.tsx组件
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'User',
	props: {
		username: String,
	},
	setup(props, ctx) {
		return () => <div>{props.username}</div>;
	},
});

可见，上述代码是有很多重复的，每次写一个组件，都要书写export default function ...等等一连串的代码，设想一下：如果可以输入几个字符，然后编辑器自动带出这些重复的模板，多方便！

解决方案

在VS Code官网文档给出了用户自定义代码碎片的方式。

在VS Code左下角点击齿轮--用户代码片段，选择需要设置的语言，例如对于vue3和react的自定义组件的代码碎片，就选择javascriptreact或者typescriptreact，然后在json里设置：保存后，在开发时，只需要输入json中配置的prefix字段值，即可弹出选项：

选中后回车，编辑器即可自动产生对应的代码碎片：

减少模板代码的编写！