在user snippets中的vue.json中配置常用的代码片段(持续更新中)
javascript
{
"Print to console": {
"prefix": "log",
"body": ["console.log('$1');", "$2"],
"description": "Log output to console"
},
"vue3 component": {
"prefix": "vue3",
"body": [
"<template>",
" <div $1></div>",
"</template>",
"",
"<script setup>",
"import { ref, onMounted } from 'vue';",
"import { useRoute, useRouter } from 'vue-router';",
"const route = useRoute();",
"const router = useRouter();",
"onMounted(() => {",
" //console.log('3.-组件挂载到页面之后执行-------onMounted')",
"})",
"</script>",
"<style scoped lang='scss'>",
"</style>"
],
"description": "vue3的代码片段"
},
"function comment": {
"prefix": "funccomment",
"body": [
"/**",
" * $1",
" * $2",
" *",
" * @param $3 $4 $5",
" * @param $6 $7 $8",
" * @returns $9",
" */"
],
"description": "Add function comment"
},
"page comment": {
"prefix": "pagecomment",
"body": [
"<!--",
" Author: Your Name",
" Last Modified: 2023-11-06",
" Description: Vue Component",
"-->",
],
"description": "Add function comment"
},
"vue2 component": {
"prefix": "vue2",
"body": [
"<template>",
" <div>",
" $1",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" data() {",
" return {",
" $2",
" }",
" },",
" methods: {",
" $3",
" }",
"}",
"</script>",
"",
"<style scoped>",
" $4",
"</style>"
]
},
"JavaScript If Statement": {
"prefix": "if",
"body": [
"if ($1) {",
" $2",
"}"
],
"description": "JavaScript If Statement"
}
}