工作技巧：vscode代码片段生成

最新推荐文章于 2025-04-27 10:32:44 发布

piaoyecanfeng

最新推荐文章于 2025-04-27 10:32:44 发布

阅读量321

点赞数

分类专栏：工作小技巧 vue从乞丐到王子文章标签： vscode vue.js javascript

本文链接：https://blog.youkuaiyun.com/piaoyecanfeng/article/details/129433190

版权

工作小技巧同时被 2 个专栏收录

14 篇文章

订阅专栏

vue从乞丐到王子

2 篇文章

订阅专栏

本文介绍了如何使用在线工具生成VSCode代码片段。通过访问https://snippet-generator.app/，可以方便地创建自定义代码片段，并在VSCode中进行设置。用户只需在左侧输入代码，右侧将自动生成用于VSCode的代码片段描述。接着，在VSCode中选择文件》首选项》配置用户代码片段，将生成的片段添加到对应的json配置文件中，如vue.json。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先打开网址https://snippet-generator.app/
顶部添加代码描述与生成的快捷性：左侧书写要自定义的代码片段

<template>
  <div class="${1:home}">
    <h2>${1:home}</h2>
  </div>
</template>
<script setup lang="ts">
import {} from 'vue'
</script>
<style lang="less" scoped>
.${1:home} {}
</style>

右侧就会自动生成vscode中自动描述的片段了

"vue3 typescript": {
  "prefix": "tsvue3",
  "body": [
    "<template>",
    "  <div class=\"${1:home}\">",
    "    <h2>${1:home}</h2>",
    "  </div>",
    "</template>",
    "<script setup lang=\"ts\">",
    "import {} from 'vue'",
    "</script>",
    "<style lang=\"less\" scoped>",
    ".${1:home} {}",
    "</style>",
    ""
  ],
  "description": "vue3 typescript"
}

在这里插入图片描述

二、打开vscode》文件》首选项》配置用户代码片段，然后把代码片段添加到vue.json中（根据你要添加的项目，比如react，vue，html，css不同文件，选择文件添加）

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Print to vue3init": {
		"prefix": "vue3init",
		"body": [
			"<template>",
				"<div class=\"\"></div>",
			"</template>",
			"<script setup>",
			" import {} from 'vue'",
			"</script>",
			"<style lang=\"scss\" scoped></style>"
		],
		"description": "Log output to vue3 init"
	},
	"vue3 typescript": {
		"prefix": "tsvue3",
		"body": [
			"<template>",
			"  <div class=\"${1:home}\">",
			"    <h2>${1:home}</h2>",
			"  </div>",
			"</template>",
			"<script setup lang=\"ts\">",
			"import {} from 'vue'",
			"</script>",
			"<style lang=\"less\" scoped>",
			".${1:home} {}",
			"</style>",
			""
		],
		"description": "vue3 typescript"
	}
}