VSCode新建代码模板

设置模板步骤

文件 > 首选项 > 用户代码片段 > 搜索对应代码的json模板文件
在这里插入图片描述

html

模板文件
{
	"h5 template": {
		"prefix": "!", // 对应的是使用这个模板的快捷键
		"body": [
		  "<!DOCTYPE html>",
		  "<html lang=\"zh-CN\">",
		  "<head>",
		  "\t<meta charset=\"UTF-8\">",
		  "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
		  "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		  "\t<title>新建html的标题</title>",
		  "</head>",
		  "<body>\n",
		  "</body>",
		  "</html>"
		],
		"description": "自定义的H5模板" // 自己定义模板的描述
	}
}
生成步骤

输入“! tab回车”如下图
在这里插入图片描述
效果图如下在这里插入图片描述

vue

模板文件
{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
            "//例如:import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成(可以访问当前this实例)",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成(可以访问DOM元素)",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}
生成步骤

输入“vue tab回车”如下图
在这里插入图片描述
效果图如下
在这里插入图片描述

javascript

模板文件
{
"js template": {
		"prefix": "jscommont",
		"body": [
			"/**",
			" * @description 类描述.",
			" * @copyright ***有限公司 2020 (http://www.***.com/)",
			" * @version V1.0",
			" * @date 2020",
			" * @author hub",
			" */\n",
			"/**",
			" * @description ClassName",
			" * @class: ClassName",
			" */",
			"export default class ClassName {",
			"    /**",
			"    * 示例函数.",
			"    * @return {number} The x value.",
			"    */",
			"    method(){",
			"        return null;",
			"    }\n",
			"}"
		]
	}
}
生成步骤

在这里插入图片描述
效果图如下
在这里插入图片描述

总结

\t \" \n都是转义字符,空格就是单纯的空格,输入时可以输入空格
\t 的意思是 横向跳到下一制表符位置 等于 Tab键
\" 的意思是 双引号
\n 的意思是回车换行
//时间yyyy-MM-dd hh:mm:ss
${CURRENT_YEAR}-
${CURRENT_MONTH}-
${CURRENT_DATE} 
${CURRENT_HOUR}:
${CURRENT_MINUTE}:
${CURRENT_SECOND}

未完待续…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值