提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
- 前言
- 一、创建代码片段？
* - 1.1 打开设置=》配置用户代码片段
- 1.2 新建代码片段
- 1.3 输入代码片段文件名称
- 1.4 配置代码
- 1.5 测试
- 1.6 代码片段语法说明
- 1.7 一些常用的代码片段，以供参考
- 二、删除代码片段文件
* - 1.1.打开显示导航痕迹
- 1.2 在目录下找到需要删除的文件
- 总结
前言
由于最近一直写vue代码，对于手敲文件模板代码深感麻烦，于是就思考有没有类似html一样输入一个!就能自动生成一些模板代码呢？最后找到了代码片段这么一个功能，特此记录。
一、创建代码片段？
1.1 打开设置=》配置用户代码片段
; 1.2 新建代码片段
- 可选全局也可选项目内
1.3 输入代码片段文件名称
; 1.4 配置代码
- 将下图代码替换为vue3.2的模板代码
- vue3.2模板代码片段
{
"Print to vue3.2": {
"prefix": "vue3.2",
"body": [
"",
" ",
" hello${1}",
" ",
"\n",
"${2}"</span><span class="token punctuation">,</span>
<span class="token string">"\n",
"\n${3}"</span><span class="token punctuation">,</span>
<span class="token string">"",
],
"description": "vue3.2 output to vue3.2模板"
}
}
1.5 测试
- 新建一个.vue文件，输入vue3.2，右侧就会出来定义的模板片段，此时回车或者tab即可快速生成模板
; 1.6 代码片段语法说明
prefix :代码片段名字，就是创建这个片段的指令。
body :你想在页面上输出啥就往这里面加啥，不过得按规矩来哦。
${数字} :生成代码后光标的位置，1表示光标开始的序号，按住tab键可切换光标位置。
\n :换行符。
\ :转义符号。
'' :用来控制代码的缩进。
description :描述,输入创建指令后编辑器显示出提示信息。
1.7 一些常用的代码片段，以供参考
{
"Print to vue2.0": {
"prefix": "vue2.0",
"body": [
"",
" ",
" hello${1}",
" ",
"\n",
""</span><span class="token punctuation">,</span>
<span class="token string">"export default {"</span><span class="token punctuation">,</span>
<span class="token string">" name:\"\","</span><span class="token punctuation">,</span>
<span class="token string">" components: {},"</span><span class="token punctuation">,</span>
<span class="token string">" data() {"</span><span class="token punctuation">,</span>
<span class="token string">" return {\n${2}"</span><span class="token punctuation">,</span>
<span class="token string">" }"</span><span class="token punctuation">,</span>
<span class="token string">" },"</span><span class="token punctuation">,</span>
<span class="token string">" filters: {\n${3}"</span><span class="token punctuation">,</span>
<span class="token string">" },"</span><span class="token punctuation">,</span>
<span class="token string">" computed: {\n${4}"</span><span class="token punctuation">,</span>
<span class="token string">" },"</span><span class="token punctuation">,</span>
<span class="token string">" watch: {\n${5}"</span><span class="token punctuation">,</span>
<span class="token string">" },"</span><span class="token punctuation">,</span>
<span class="token string">" created () {\n${6}"</span><span class="token punctuation">,</span>
<span class="token string">" },"</span><span class="token punctuation">,</span>
<span class="token string">" mounted () {\n${7}"</span><span class="token punctuation">,</span>
<span class="token string">" },"</span><span class="token punctuation">,</span>
<span class="token string">" methods: {\n${8}"</span><span class="token punctuation">,</span>
<span class="token string">" }"</span><span class="token punctuation">,</span>
<span class="token string">"}"</span><span class="token punctuation">,</span>
<span class="token string">"\n",
"\n${9}"</span><span class="token punctuation">,</span>
<span class="token string">"",
],
"description": "vue2.0 output to vue2.0模板"
}
}
{
"Print to vue3.0": {
"prefix": "vue3.0",
"body": [
"",
" ",
" hello${1}",
" ",
"\n",
""</span><span class="token punctuation">,</span>
<span class="token string">"export default {"</span><span class="token punctuation">,</span>
<span class="token string">" name:\"\","</span><span class="token punctuation">,</span>
<span class="token string">" setup() {"</span><span class="token punctuation">,</span>
<span class="token string">" return {\n${2}"</span><span class="token punctuation">,</span>
<span class="token string">" }"</span><span class="token punctuation">,</span>
<span class="token string">" },"</span><span class="token punctuation">,</span>
<span class="token string">"}"</span><span class="token punctuation">,</span>
<span class="token string">"\n",
"\n${3}"</span><span class="token punctuation">,</span>
<span class="token string">"",
],
"description": "vue3.0 output to vue3.0模板"
}
}
二、删除代码片段文件
- 由于已经创建的代码片段文件会存在本地，因此不能在vscode中直接删除，需要按照以下方法才能删除
1.1.打开显示导航痕迹
; 1.2 在目录下找到需要删除的文件
- 直接删除即可
总结
本篇文章主要介绍了vscode中代码片段的创建、使用及删除的方法。下次再见
Original: https://blog.csdn.net/to_the_Future/article/details/127771676
Author: 剑九 六千里
Title: vscode高效之代码片段
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/658224/
转载文章受原作者版权保护。转载请注明原作者出处！