vscode代码片段生成

最新推荐文章于 2025-03-28 18:08:08 发布

SevgiliD

最新推荐文章于 2025-03-28 18:08:08 发布

阅读量962

点赞数 1

分类专栏：【前端学习笔记】文章标签： vscode vue.js javascript

本文链接：https://blog.youkuaiyun.com/SevgiliD/article/details/129897852

版权

【前端学习笔记】专栏收录该内容

10 篇文章

订阅专栏

在学习Vue时，可以利用VSCode的代码片段功能加快编码速度。通过复制代码，使用在线工具生成代码片段格式，然后在VSCode的用户设置中配置HTML.json，粘贴代码并保存。例如，创建了一个名为createvueapp的片段，输入vueapp就能自动生成Vue应用的基础模板。

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

在刚学习vue的时候，有些代码片段是经常写的，在vscode中写一个代码片段可以帮助快速生成。

生成步骤：

VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。
具体的步骤如下:
第一步，复制自己需要生成代码片段的代码;
第二步，vscode代码片段在线生成工具在该网站中生成代码片段;
第三步，在VSCode中配置代码片段;

在vscode中配置的步骤：

文件->首选项->配置用户代码片段->html.json->将复制的代码片段粘贴进去然后保存即可

在这里插入图片描述

此处附上刚学习vue需要使用的代码片段

{

	"create vue app": {
		"prefix": "vueapp",
		"body": [
		  "<!DOCTYPE html>",
		  "<html lang=\"en\">",
		  "",
		  "<head>",
		  "    <meta charset=\"UTF-8\">",
		  "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
		  "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
		  "    <title>Document</title>",
		  "    <script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>",
		  "</head>",
		  "",
		  "<body>",
		  "    <div id=\"app\">",
		  "        {{message}}",
		  "    </div>",
		  "    <script>",
		  "",
		  "        const app = Vue.createApp({",
		  "            data() {",
		  "                return {",
		  "                    message: 'hello vue'",
		  "                }",
		  "            }",
		  "        })",
		  "        app.mount('#app')",
		  "    </script>",
		  "</body>",
		  "",
		  "</html>"
		],
		"description": "create vue app"
	  }
	  
}