设置模板步骤
文件 > 首选项 > 用户代码片段 > 搜索对应代码的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}
未完待续…