VScode—自定义代码片段snippets

转载:https://www.jianshu.com/p/1f1132df1def
自定义代码片段snippets

作为一名码农,码字过程中总会遇到一些重复性的代码,如果我可以像快捷键一样输入一个命令就可以调出这些代码多好,那么学会snippets对于提高工作效率必不可少。

1.创建自定义的片段

打开编辑器>文件>首选项>用户代码片段>输入要创建的代码类型>会生成一个json文件
在这里插入图片描述
那么如何编写自己的代码片段呢?这里我先介绍些snippets的语法。

snippets语法

prefix      :代码片段名字,即输入此名字就可以调用代码片段。
body        :这个是代码段的主体.需要编写的代码放在这里,      
$1          :生成代码后光标的初始位置.
$2          :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
${1,字符}    :生成代码后光标的初始位置(其中1表示光标开始的序号,字符表示生成代码后光标会直接选中字符。)
description :代码段描述,输入名字后编辑器显示的提示信息。

注:

  • 如果没有description,默认提示信息是类似上图中Print to console一样的信息(即key值)
  • 代码多行语句的以 , 隔开
  • 每行代码需要用引号包裹住
  • 字符串间如果值里包含特殊字符需要 \ 进行转义.
 换行:\r或者\n

  tab键制表符:\t
  • 如果多个,比如${1,字符1} ${1,字符2} ${2,字符3},光标开始会选中字符1和字符2,点击tab会切换到字符3

demo

工作中会经常使用面向对象的方式写js以及调试使用console.log(),如下

 console.log()

  var obj = {
        fn_test:function(){
        },
        init: function () {
            this.fn_test();
        }
    }
    $(function () {
        obj.init()
    })

下面贴上自己的代码片段
在这里插入图片描述

### 如何在 VSCode 中创建和使用自定义代码片段 #### 一、VSCode 代码片段概述 代码片段是在编写代码过程中可以重用的小部分代码模板。通过这些预设好的结构化代码段,开发者能够显著提高编码效率并减少错误的发生率[^1]。 #### 二、创建自定义代码片段的具体步骤 ##### 打开代码片段配置 为了开始设置个人化的快捷方式或者常用的函数模式,在 Visual Studio Code 内部可以通过命令面板 (`Ctrl+Shift+P` 或 `Cmd+Shift+P`) 输入 "Preferences: Configure User Snippets" 来访问全局或特定语言环境下的代码片段编辑界面。 ##### 选择代码片段的适用范围 当首次尝试添加新的代码片段时,会提示选择该片段适用于哪种编程语言。这一步骤决定了所创建的代码片段将在哪些类型的文件中可用。如果希望某个代码片段可以在任何地方被调用,则可以选择 Global (全局)。 ##### 创建和编辑代码片段 一旦选择了合适的上下文之后就可以正式着手构建自己的代码片段了。对于每一个新加入的内容来说,都需要指定触发词(prefix)、描述以及主体(body),其中 body 部分支持多种语法特性如占位符、选项列表等特殊标记来增强灵活性[^2]。 ```json { "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } } ``` 上述 JSON 片段展示了如何定义一个简单的 JavaScript 控制台日志记录语句作为可复用单元;这里 `$1`, `$2` 表示光标的停留位置或是待填充区域[^3]。 ##### 代码片段示例 考虑这样一个场景——频繁地书写 HTML 结构标签,那么完全可以按照上面提到的方式建立如下所示的一个简单却实用的例子: ```json { "HTML Template": { "prefix": "htmltemp", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "\t<head>", "\t\t<meta charset=\"UTF-8\">", "\t\t<title>$1</title>", "\t</head>", "\t<body>", "\t\t$0", "\t</body>", "</html>" ], "description": "Basic HTML template with DOCTYPE and meta tags." } } ``` 此代码片段允许快速生成标准的 HTML 文件框架,并且提供了两个插入点用于进一步定制页面标题和其他内部元素。 #### 三、自定义代码片段的高级用法 除了基本的功能之外,还可以利用更多复杂的机制来自定义工作流中的常用表达式或者是更复杂的数据处理逻辑。例如引入动态变量替换、多行同时操作等功能以满足不同层次的需求。 #### 四、代码片段的管理与分享 随着积累越来越多个性化的代码片段库,有效的管理和分类变得尤为重要。一方面要保持良好的命名习惯以便于查找检索;另一方面也可以借助社区力量或者其他插件工具来进行跨平台同步更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值