vscode【实用技巧】自定义代码片段（ 编程速度飞起，含AI 助力 ！）

vue 的代码片段

输入 vue 回车

内容为

{
    "vue3组合式API模板": {
        "prefix": "v3",
        "body": [
            "<script setup lang='ts'>",
            "import { ref, reactive, onMounted, onUnmounted } from 'vue';",
            "",
            "// 定义响应式数据",
            "const count = ref(0);",
            "const state = reactive({",
            "    message: 'Hello, Vue 3 Composition API'",
            "});",
            "",
            "// 生命周期钩子",
            "onMounted(() => {",
            "    console.log('组件挂载完成');",
            "});",
            "onUnmounted(() => {",
            "    console.log('组件卸载');",
            "});",
            "",
            "// 自定义函数",
            "const increment = () => {",
            "    count.value++;",
            "};",
            "",
            "</script>",
            "",
            "<template>",
            "  <div>",
            "    <p>{{ state.message }}</p>",
            "    <p>Count: {{ count }}</p>",
            "    <button @click=\"increment()\">Increment</button>",
            "  </div>",
            "</template>",
            "",
            "<style scoped  lang='scss'>",
            "</style>"
        ],
        "description": "生成Vue3组合式API模板"
    }
}

在 .vue 的空白文件中输入 v3 回车，即可快捷输入

效果如下：

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'

// 定义响应式数据
const count = ref(0)
const state = reactive({
  message: 'Hello, Vue 3 Composition API'
})

// 生命周期钩子
onMounted(() => {
  console.log('组件挂载完成')
})
onUnmounted(() => {
  console.log('组件卸载')
})

// 自定义函数
const increment = () => {
  count.value++
}
</script>

<template>
  <div>
    <p>{{ state.message }}</p>
    <p>Count: {{ count }}</p>
    <button @click="increment()">Increment</button>
  </div>
</template>

<style scoped lang="scss"></style>

html 的代码片段

( 在 vue 文件中的 <template> 标签内，也会响应 html 的代码片段 )

输入 html 回车，以快捷创建表格为例，内容为

{
	"html-table 模板": {
		"prefix": "table",
		"body": [
			"<table border=\"1\" cellspacing=\"0\">",
			"  <caption>",
			"    表格标题",
			"  </caption>",
			"  <thead>",
			"    <tr>",
			"      <th>表头1</th>",
			"      <th>表头2</th>",
			"    </tr>",
			"  </thead>",
			"  <tbody>",
			"    <tr>",
			"      <td>第1行单元格1</td>",
			"      <td>第1行单元格2</td>",
			"    </tr>",
			"    <tr>",
			"      <td>第2行单元格1</td>",
			"      <td>第2行单元格2</td>",
			"    </tr>",
			"  </tbody>",
			"  <tfoot>",
			"    <tr>",
			"      <td>表尾单元格1</td>",
			"      <td>表尾单元格2</td>",
			"    </tr>",
			"  </tfoot>",
			"</table>"
		],
		"description": "生成带有标题、表头、表身和表尾的HTML表格模板"
	}
}

js 的代码片段

输入 javascript 回车，以快捷声明函数为例，内容为

{
	"声明函数": {
		"prefix": "f",
		"body": [
			"function $1($2) {",
			"  $3",
			"}"
		],
		"description": "声明函数"
	}
}

最终效果

function () {
  
}

ts 的代码片段

输入 typescript 回车，以快捷输入vue3的watch为例，内容为

{
	"vue3-watch模板": {
		"prefix": "w",
		"description": "快速实现watch",
		"body": [
			"watch(() => (newVal, oldVal) => {$1}, { immediate: true, deep: true });",
		]
	},
}

在 <script setup lang="ts"> 中可用

最终效果

watch(() => (newVal, oldVal) => {}, { immediate: true, deep: true });

AI 助力便捷生成自定义代码片段

以豆包为例，向 AI 提问

watch(() => (newVal, oldVal) => {}, { immediate: true, deep: true })  
转为vscode的js代码片段

得到答案