VSCode代码片段Snippets的使用(添加Copyright、生成Vue代码片段等)

一、新建Copyright代码片段

1.新建代码片段

文件 ? 首选项 ? 用户代码片段 ? 点击新建全局代码片段 ? 输入代码片段名称 ? 确定
或者
Ctrl+Shift+P ? 输入snippets ? 确定 ? 选新建全局代码片段 ? 输入代码片段名称 ? 确定

2.Copyright代码片段模板

新建一个名叫copyright(名字随便起)的代码片段,将下方模板代码贴进去(注意最外层需要包裹一个大括号),配置好后直接输入copyright便能生成配置好的模板代码

"add Copyright notice": {
	"prefix": [
		"copyright"  //输入copyright便可以生成body里的片段,也可以配置多个
	],
	"body": [
		"/*",
		" * Copyright (C) 1994-$CURRENT_YEAR XXX Company Limited",
		" *",
		" * All Rights Reserved.",
		" *",
		" * LEGAL NOTICE: All information contained herein is, and",
		" * remains the property of XXX Company Limited.", //写一些内容...
		" */"
	],
	"description": "Adds copyright..."
}

二、新建Vue.js代码片段

操作同上,复制下方模板

"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 scoped>",
		"/*@import url($3); 引入公共css类*/",
		"$4",
		"</style>"
	],
	"description": "生成vue模板"
}

三、新建http请求代码片段

操作同上,复制下方模板

"http-get请求": {
	"prefix": "httpget",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(‘‘),",
		"method: ‘get‘,",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"
	],
	"description": "httpGET请求"
},
"http-post请求": {
	"prefix": "httppost",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(‘‘),",
		"method: ‘post‘,",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });"
	],
	"description": "httpPOST请求"
}

VSCode代码片段Snippets的使用(添加Copyright、生成Vue代码片段等)

上一篇:Fivetran:自动化数仓集成服务


下一篇:SLB访问日志分析:基于客户端来源和HTTP状态码的实践