0
vscode——配置用户代码片段
黄粱一梦2024-11-270
1.设置代码片段
左下角找到用户设置,点击代码片段
2.选择全局/局部代码片段
这里我设置的是局部的
vue代码片段，大家可根据自身需要来进行设置.
单代码片段设置
{
"vue3-ts片段": {
"prefix": "vue3-ts",
"body": [
"<script setup lang=\"ts\">",
"import { ref, reactive, toRefs, onMounted} from 'vue'",
"",
"</script>",
"",
"<template>",
" <div></div>",
"</template>",
"",
"<style scoped lang=\"scss\">",
"</style>",
],
"description": "Log output to console"
}
}
设置多行代码片段
只需要在原来的基础上面,再扩展一个对象
:::danger
需要注意,如果自己定义的对象名称和前面的一致会进行覆盖
:::
{
"vue3-ts片段": {
"prefix": "vue3-ts",
"body": [
"<script setup lang=\"ts\">",
"import { ref, reactive, toRefs, onMounted} from 'vue'",
"",
"</script>",
"",
"<template>",
" <div></div>",
"</template>",
"",
"<style scoped lang=\"scss\">",
"</style>",
],
"description": "Log output to console"
},
"vue3-js片段": {
"prefix": "vue3-js",
"body": [
"<script setup lang=\"js\">",
"import { ref, reactive, toRefs, onMounted} from 'vue'",
"",
"</script>",
"",
"<template>",
" <div></div>",
"</template>",
"",
"<style scoped lang=\"scss\">",
"</style>",
],
"description": "Log output to console"
},
"[自定义名称]": {
"prefix": "vue3-js",
"body": [
"<script setup lang=\"js\">",
"import { ref, reactive, toRefs, onMounted} from 'vue'",
"",
"</script>",
"",
"<template>",
" <div></div>",
"</template>",
"",
"<style scoped lang=\"scss\">",
"</style>",
],
"description": "Log output to console"
},
}
使用自定义代码片段
版权声明
本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~
Preview