2023/08

利用Vscode用户代码片段快速生成vue模板

发布时间：2023-08-18 15:39:10

发布者：鴏麚讏纔驆

浏览量:

今天给大家介绍一下vscode用户代码片段，类似于一种快捷键，当输入特定文本的时候，vscode会自动补充好你预设的文本。今天拿vue2的用户代码片段为例子，这个也是在网上流传的较为广泛的文本，我略微做了一下修改，更符合我的写作习惯。大家读完这篇文章后也能修改内容，找出符合自己的就好。

在vscode的设置里可以找到。

图片1.png

单击后会出现以下输入框，点击新建全局代码片段文件并命名。

图片2.png

进入后可以发现官方给我们写的例子。

图片3.png

Scope我们不用管，默认的就可以，prefix就是你输入的触发文本，body是vscode补全文本，每一行都需要用双引号包裹，换到下一行需要重新用双引号包裹，description是描述文本，可写可不写。$1和$2是光标位置，当你生成了文本后光标会出现在$1位置，当你按下tab光标会出现在$2位置以此类推。

下面是我习惯性生成的vue的模板文件。

"prefix": "vue2",
        "body": [
            "",
            "",
            "",
            "",
            "",
            "  /* @import url(); 引入公共css类 */",
            "$4",
            ""
        ],

请复制到prefix和body里。另外给大家推荐一个转换的网址。

这里的格式可以通过以下链接进行格式化：https://snippet-generator.app/。

上一篇：轻质感磨砂效果图标制作

下一篇： Vue2路由元信息mate

关键词:

返回列表

2024-04-28

利用用户代码片段快速生成vue3模板查看详情

2023-08-18

利用Vscode用户代码片段快速生成vue模板查看详情

2020-07-22

如何让文件支持右键vscode打开查看详情

2018-06-18

VSCode及插件推荐推荐查看详情