vscode快速新建vue及table模板

最新推荐文章于 2025-05-04 16:02:08 发布

lihefei_coder

最新推荐文章于 2025-05-04 16:02:08 发布

阅读量3k

点赞数

分类专栏： vue VSCode 文章标签： vue 模版 vscode

原文链接：https://blog.youkuaiyun.com/x550392236/article/details/80771410

版权

vue 同时被 2 个专栏收录

53 篇文章

订阅专栏

VSCode

9 篇文章

订阅专栏

本文详细介绍如何在VSCode中创建Vue和Vue-TypeScript代码片段模板，通过简单步骤实现快速生成标准Vue组件结构，提高前端开发效率。

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

第一步: 新建模板并保存

文件 ==> 首选项 ==> 用户代码片段 ==> 输入 vue，选择 vue.json ==> 编辑vue.json文件如下：

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"   <div></div>",
			"</template>\n",
			"<script>",
			"export default {",
			"    name: '',",
			"    components: {},",
			"    props: {},",
			"    data() {",
			"        return {}",
			"    },",
			"    watch: {},",
			"    mounted() {},",
			"    methods: {}",
			"}",
			"</script>\n",
			"<style lang=\"scss\" scoped>",
			"</style>",
			"$2"
		],
		"description": "Log output to console"
	}
}

第二步: 添加配置

文件 ==> 首选项 ==> 设置 ==> 新增这2项

// 让vscode允许自定义的代码片段提示出来
"editor.snippetSuggestions": "top",
"editor.formatOnPaste": true,

第三步: 测试是否添加成功

新建vue文件，输入vue，按下tab键即可,效果如下
在这里插入图片描述
原文链接：
https://blog.youkuaiyun.com/x550392236/article/details/80771410

vue-typescript的创建方式：

文件 ==> 首选项 ==> 用户代码片段，选择New Global Snippets file
在这里插入图片描述
输入vue-ts回车

编辑vue-ts.code-snippets文件如下：

{
    "Print to console": {
        "prefix": "vue-ts",
        "body": [
            "<template>",
            "   <div class=\"hello\"></div>",
            "</template>\n",
            "<script lang=\"ts\">",
            "import { Component, Prop, Watch, Vue } from 'vue-property-decorator';",
            "@Component({name: 'Hello', components: {}})",
            "export default class extends Vue {",
            "}",
            "</script>\n",
            "<style lang=\"scss\" scoped>\n",
            ".hello {}\n",
            "::v-deep {}\n",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}

table的创建方式：

文件 ==> 首选项 ==> 用户代码片段 ==> 输入 html，选择 html.json ==> 编辑html.json文件如下：

{
    "Print to console": {
        "prefix": "table",
        "body": [
            "<table>",
            "   <thead>",
            "       <tr>",
            "           <th></th>",
            "           <th></th>",
            "       </tr>",
            "   </thead>",
            "   <tbody>",
            "       <tr>",
            "           <td></td>",
            "           <td></td>",
            "       </tr>",
            "   </tbody>",
            "</table>"
        ],
        "description": "Log output to console"
    }
}