如何在 Visual Studio Code 中创建代码片段

10年服务1亿前端开发工程师

在 VSCode 中创建自定义代码片段的方法其实很简单。

点击菜单 “查看”-“命令面板” 或者按 command + shift + P 快捷键打开命令选项板。搜索 “Preferences: Configure User Snippets” 或者 “首选项:配置用户代码片段”。

你可以选择现有的代码片段文件或者创建代码片段文件,其中创建代码片段文件有两个选项:全局可用和当前项目目录可。

我们这里以新建全局代码段文件为例,单击“新建全局代码片段文件…”。 创建 .code-snippets 后缀的文件。我们可以看到一个大的对象{},查看注释中示例示例:

"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

其中:

Print to console 是代码片段名称;
scope 字段表示作用域,在什么语言下其作用;
prefix 字段为代码片段前缀,定义如何从IntelliSense和选项卡完成中选择此代码段。
body 即代码片段的主体内容,其中每个字符串表示一行;
description 字段为代码片段说明,会在 IntelliSense 候选栏中出现。未定义的情况下直接显示对象名,上例中将会显示 Log output to console。

body 中如何定义

body 部分可以使用特殊语法结构,来控制光标和要插入的文本,其支持的基本结构如下:

Tabstops:制表符

用“Tabstops”可以让编辑器的指针在 snippet 内跳转。使用 $1,$2 等指定光标位置。这些数字指定了光标跳转的顺序,数字最大表示默认选中,按tab键,光标移到下一个指定位置。特别地,$0表示最终光标位置。相同序号的“Tabstops”被链接在一起,将会同步更新,比如下列用于生成头文件封装的 snippet 被替换到编辑器上时,光标就将同时出现在所有$1位置。

"#ifndef $1"
"#define $1"
"#end // $1"

Placeholders:占位符

“Placeholder” 是带有默认值的”Tabstops”,如 ${1:foo}。“placeholder”文本将被插入“Tabstops”位置,并在跳转时被全选,以方便修改。占位符还可以嵌套,例如${1:another ${2:placeholder}}。

比如,结构体的 snippet 主体可以这样写:

struct ${1:name_t} {\n\t$2\n};

作为“Placeholder”的 name_t 一方面可以提供默认的结构名称,另一方面可以作为输入的提示。

Choice:可选项

“Choice”是提供可选值的“Placeholder”。其语法为一系列用逗号隔开,并最终被两个竖线圈起来的枚举值,比如 ${1|one,two,three|} 。当光标跳转到该位置的时候,用户将会被提供多个值( onetwothree )以供选择。

通常情况这些功能基本够用了,当然 Visual Studio Code 中创建代码片段还有很多高级用法,这里不再展开,请查看官方文档:https://code.visualstudio.com/docs/editor/userdefinedsnippets

赞(2) 打赏
未经允许不得转载:WEB前端开发 » 如何在 Visual Studio Code 中创建代码片段

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏