其他分享
首页 > 其他分享> > VSCode 利用 Snippets 设置代码块[附带网站推荐]

VSCode 利用 Snippets 设置代码块[附带网站推荐]

作者:互联网

VSCode 利用 Snippets 设置代码块

一、起步

1.如何设置

Windows系统: 文件 > 首选项 > 用户代码片段

Mac系统: Code > 首选项 > 用户片段

image-20220204103121376

2. 选择已有代码片段或创建代码片段(可以对现有的进行修改,也可以新建代码片段)

代码片段分两种:

  1. 全局代码片段(每种语言环境下都能触发代码块)。
  2. 对应语言的局部代码片段(只能在对应语言环境下才能触发),新建全局代码片段会在 snippets 目录下生成 .code-snippets 为后缀的配置文件,而新建对应语言的代码片段会生成 对应语言 + .json 的配置文件。
  3. 点击新建全局代码片段,可以新建所有文件都可使用的代码块,输入拓展名可以打开已有的拓展名文件,或者创建新的代码块文件

下图是创建代码块的开始界面:

image-20220204103514675

如:我们新建一个叫 my-snippets 的代码片段文件

新建完之后会出现默认的示例,看起来是个类似 json 的配置文件。

image-20220204104836757

接下来我们可以在开心的在新建的 my-snippets.code-snippets 文件中设置我们的代码片段了。

二、Snippet 语法

// Example:
"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}
复制代码

1.占位符 $

log 方法中 $ 后面紧跟数字可指定代码片段触发落入编辑器之后的光标位置,光标位置按照从小到大排序。 log 方法中当你输入 log + TAB 之后光标会默认落到 log() 的括号中($1 的位置),如果此时没有手动移动光标位置,再次按 TAB 则光标会落到 console.log() 的第二行( $2 的位置),当然,你也可以设置 $3、$4 … 等等。

需要注意的是:

$0 用于设置最终光标的位置,设置了 $0 之后,再往后设置其他占位符则不会生效, $0 终止了 TAB键 的光标跳转操作。

2.网站推荐

https://snippet-generator.app/
帮你生成代码块文件

image-20220204104450983

标签:片段,console,log,VSCode,代码,snippets,附带,光标,Snippets
来源: https://blog.csdn.net/li520_fei/article/details/122781673