目录
1.创建代码片段步骤
文件--->首选项--->用户片段,如下如所示之后就可以进入自定义代码片段界面,输入该片段名字(这个名字仅仅是区分不同代码片段的,并不是快捷键prefix前缀)
下面给出vue2和vue3代码片段,直接复制粘贴就可以。
2.Vue3代码片段模板
{
"Print to console": {
"prefix": "vuecli3",
"body": [
"<!-- $1 -->",
"<template>",
" $4",
"</template>",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"export default {",
" setup(){",
" $2",
" return{",
" $3",
" }",
" },",
"}",
"</script>",
"<style lang='css' scoped>",
" ",
"</style>"
],
"description": "vue3.x代码片段"
}
}
3.Vue2代码片段模板
{
"Print to console": {
"prefix": "vuecli",
"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='css' scoped>",
"$4",
"</style>"
],
"description": "vue2.x代码片段"
}
}
4.语法说明
$1为最后光标所在位置。按tab健依次到$2,3,4..............
基本语法补充说明:
-
prefix
触发快捷提示的字符串前缀 -
body
代码片段主体-
$num
是每次按tab
键光标移动对位置 -
${2:默认文本}
跳转到指定位置到同时选中默认文本,方便修改 -
\n
换行 -
\t
制表符
-
-
description
快捷提示窗对该代码片段对描述