0

0

VSCode 如何利用快捷键快速生成注释模板 VSCode 快速生成注释模板的快捷键创意技巧​

蓮花仙者

蓮花仙者

发布时间:2025-08-03 08:42:03

|

732人浏览过

|

来源于php中文网

原创

最直接且强大的方式是利用vscode的“用户代码片段”功能,通过配置特定语言或全局的代码片段文件(如javascript.json),定义注释模板的前缀(prefix)、内容(body)和描述(description),输入前缀后按tab键即可生成规范注释;2. 可结合快捷键进一步提升效率,在keybindings.json中配置如ctrl+alt+c触发指定名称的代码片段插入命令,实现一键生成;3. 为不同语言创建专属模板时,应选择对应语言的snippets文件(如python.json),并遵循该语言的注释风格(如python用三引号docstring,javascript用jsdoc);4. 高级用法包括使用内置变量(如$current_year、$tm_filename_base)和变量转换(如/${1:/pascalcase}/将文件名转为pascalcase),以及在模板中添加选项列表(如${1|low,medium,high|})实现交互式选择;5. 还可扩展用于生成todo/fixme标记、区域折叠、版权声明、调试日志等多样化注释,全面提升编码效率与代码规范性。

VSCode 如何利用快捷键快速生成注释模板 VSCode 快速生成注释模板的快捷键创意技巧​

VSCode中,要快速生成注释模板,最直接且强大的方式就是利用其内置的“用户代码片段”(User Snippets)功能。这不仅能让你通过简单的几下按键完成复杂的注释结构,还能确保代码风格的统一性,极大提升开发效率。

解决方案

要实现VSCode中注释模板的快速生成,核心在于配置用户代码片段(User Snippets)并结合快捷键。

首先,打开VSCode,按下

Ctrl+Shift+P
(Windows/Linux) 或
Cmd+Shift+P
(macOS),输入
Configure User Snippets
并选择它。你会看到一个列表,可以选择为特定语言创建代码片段(例如
javascript.json
),也可以选择
New Global Snippets file...
创建一个适用于所有语言的全局代码片段。通常,为特定语言创建是更好的实践。

以JavaScript为例,选择

javascript.json
文件后,你会看到一个JSON结构。在这里,你可以定义你的注释模板。一个基本的模板结构如下:

{
    "Function Comment Block": {
        "prefix": "fdoc",
        "body": [
            "/**",
            " * @description ${1:函数功能描述}",
            " * @param {${2:type}} ${3:paramName} - ${4:参数描述}",
            " * @returns {${5:type}} ${6:返回值描述}",
            " * @author YourName",
            " * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
            " */"
        ],
        "description": "Generate a JSDoc function comment block"
    },
    "File Header Comment": {
        "prefix": "filedoc",
        "body": [
            "/**",
            " * @file ${TM_FILENAME_BASE}.js",
            " * @description ${1:文件功能描述}",
            " * @author YourName",
            " * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
            " */"
        ],
        "description": "Generate a file header comment block"
    }
}

解析:

  • "Function Comment Block"
    "File Header Comment"
    是这个代码片段的名称,你可以随意命名。
  • "prefix"
    : 这是触发代码片段的关键词。当你输入
    fdoc
    filedoc
    并按下
    Tab
    键时,对应的模板就会出现。
  • "body"
    : 这是一个字符串数组,每一项代表模板中的一行。
    • $1
      ,
      $2
      等是“制表位”(tab stops)。当你插入模板后,光标会依次跳转到这些位置,方便你快速填写内容。
    • ${1:placeholder}
      带有占位符,在你跳转到该位置时会显示默认文本,你可以直接覆盖。
    • $CURRENT_YEAR
      ,
      $CURRENT_MONTH
      ,
      $CURRENT_DATE
      ,
      $TM_FILENAME_BASE
      都是VSCode内置的变量,会自动替换为当前信息。
  • "description"
    : 对代码片段的简短描述,会在VSCode的建议列表中显示。

保存这个JSON文件后,你就可以在对应的语言文件中输入

fdoc
filedoc
,然后按
Tab
键来生成注释了。

更进一步,如果你想通过一个真正的快捷键(比如

Ctrl+Alt+C
)来直接插入某个特定的注释模板,而不是通过输入前缀再按Tab,你需要修改
keybindings.json
。 再次按下
Ctrl+Shift+P
,输入
Open Keyboard Shortcuts (JSON)
。 添加一个这样的配置:

[
    {
        "key": "ctrl+alt+c",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && editorLangId == 'javascript'",
        "args": {
            "name": "Function Comment Block" // 这里的名称必须与你snippets文件中定义的名称完全一致
        }
    }
]

这里的

key
定义了快捷键组合,
command
指定了插入代码片段的动作,
when
条件确保这个快捷键只在JavaScript文件中且编辑器有焦点时生效,
args
则指定了要插入哪个具体名称的代码片段。这样一来,你甚至不需要记住
prefix
,直接一个快捷键就能搞定。

为什么自定义注释模板能大幅提升编码效率?

这问题,对于一个写代码的人来说,简直是救命稻草。我的经验是,写代码最烦的不是实现逻辑,而是那些重复性的、格式化的工作,比如给每个函数、每个文件头部加上规范的注释。一开始可能觉得手动敲几行也还好,但当项目规模变大,文件数量剧增,或者团队对注释规范有严格要求时,这种重复劳动就会变得异常消耗精力和时间。

自定义注释模板首先解决的就是效率问题。你想想,一个复杂的JSDoc注释,可能需要敲几十个字符,还要确保格式正确,参数名、类型、描述都对齐。有了模板,你只需要输入几个字母,或者按一个快捷键,整个框架就出来了,光标还会自动定位到你需要填写的地方。这不仅仅是省了几秒钟的事,更是把你的注意力从“怎么写这个注释”转移到“这个函数是干什么的”。这种心流不被打断的感觉,对编程效率的提升是巨大的。

其次,它带来了一致性。在一个团队里,每个人对注释的理解和习惯可能都不一样。有的人喜欢简洁,有的人喜欢详细,有的人甚至不写。但一个好的项目,尤其是在多人协作时,代码风格和注释规范的统一性至关重要。自定义模板就是强制推行这种规范的利器。大家用的都是同一个模板,自然而然地就形成了统一的注释风格,这对于后续的代码阅读、维护和交接,简直是太友好了。我曾接手过一个项目,注释五花八门,每次看代码都像在考古,深知其苦。

最后,它还能减少错误。手动敲注释,很容易出现拼写错误、格式错误,甚至遗漏关键信息。模板是预设好的,只要你模板本身没问题,每次生成的注释都是正确的。这对于那些需要通过工具(如JSDoc生成文档)解析注释的项目来说,尤其重要。

如何为不同编程语言创建专属注释模板?

VSCode在设计用户代码片段时,就考虑到了多语言的需求,所以为不同编程语言创建专属注释模板是相当直观的。关键在于

scope
属性,以及VSCode组织代码片段文件的方式。

当你通过

Ctrl+Shift+P
选择
Configure User Snippets
时,VSCode会提示你选择一个语言,比如
javascript.json
,
python.json
,
typescript.json
等。每选择一个语言,VSCode就会打开或创建一个对应的JSON文件。这些文件是专门为该语言服务的。

例如:

Flowise
Flowise

一款开源的低代码/无代码AI应用开发工具

下载
  • javascript.json
    中,你可以定义适用于JavaScript的注释模板,比如
    /** ... */
    风格的JSDoc。
  • python.json
    中,你则可以定义Python的Docstring风格注释,通常是三引号包围的字符串,如
    """ ... """

示例对比:

JavaScript (在

javascript.json
中):

{
    "JS Function Doc": {
        "prefix": "jsdoc",
        "body": [
            "/**",
            " * @description ${1:函数描述}",
            " * @param {${2:any}} ${3:name} - ${4:参数描述}",
            " * @returns {${5:any}} ${6:返回值描述}",
            " */"
        ],
        "description": "JavaScript function JSDoc"
    }
}

Python (在

python.json
中):

{
    "Python Function Docstring": {
        "prefix": "pydoc",
        "body": [
            "\"\"\"",
            "    ${1:函数描述}",
            "    :param ${2:name}: ${3:参数描述}",
            "    :type ${4:name}: ${5:type}",
            "    :returns: ${6:返回值描述}",
            "    :rtype: ${7:type}",
            "\"\"\""
        ],
        "description": "Python function docstring"
    }
}

注意看

body
中的注释风格,JavaScript用
/** ... */
,Python用
""" ... """
。参数的写法也完全不同,JavaScript用
@param {type} name - description
,Python则常用
:param name: description
:type name: type

当你需要一个全局通用的代码片段,不限语言时,可以创建一个

New Global Snippets file...
。在这种全局文件中,如果你想让某个片段只在特定语言中生效,可以在其定义中添加
scope
属性:

{
    "Global HTML Comment": {
        "prefix": "htmlc",
        "body": [
            ""
        ],
        "description": "HTML comment",
        "scope": "html,blade" // 这个片段只在HTML和Blade模板文件中生效
    }
}

通过这种方式,你可以非常灵活地为不同语言定制最符合其规范和习惯的注释模板,确保在任何语言环境下都能高效地生成正确的注释。

除了基础模板,还能玩出哪些注释的“花样”?

基础的函数、文件注释模板固然实用,但VSCode的用户代码片段远不止于此。我们可以利用它的一些高级特性,玩出更多“花样”,让注释模板变得更智能、更自动化。

一个很酷的功能是变量转换。想象一下,你有一个文件名叫

my_awesome_feature.js
,你希望在文件头部注释中自动生成一个驼峰命名的模块名
myAwesomeFeature
。这可以通过变量转换来实现:

{
    "Advanced File Header": {
        "prefix": "advfiledoc",
        "body": [
            "/**",
            " * @file ${TM_FILENAME_BASE}.js",
            " * @module ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} // 将文件名转换为PascalCase",
            " * @description ${1:文件功能描述}",
            " * @author YourName",
            " * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
            " */"
        ],
        "description": "Generate an advanced file header with module name transformation"
    }
}

这里的

${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}
就是一个变量转换的例子。它获取文件名(不含扩展名),然后通过正则表达式
(.*)
捕获整个文件名,再利用
/pascalcase
转换器将其转换为PascalCase。VSCode支持多种转换器,比如
lowercase
,
uppercase
,
capitalize
,
camelcase
,
pascalcase
,
kebabcase
,
snakecase
等,甚至可以进行更复杂的正则表达式替换。这让你的模板能够根据上下文(比如文件名)自动调整生成的内容,非常智能。

另一个实用的小技巧是条件插入或选项列表。虽然不是直接在注释中,但可以辅助你快速插入带选项的注释。例如,你想快速插入一个

TODO
FIXME
标记,并且能选择优先级:

{
    "TODO Comment": {
        "prefix": "todo",
        "body": [
            "// TODO: [${1|Low,Medium,High|}] ${2:任务描述} - $CURRENT_DATE"
        ],
        "description": "Insert a TODO comment with priority"
    },
    "FIXME Comment": {
        "prefix": "fixme",
        "body": [
            "// FIXME: ${1:问题描述} - $CURRENT_DATE"
        ],
        "description": "Insert a FIXME comment"
    }
}

TODO
模板中,
${1|Low,Medium,High|}
会在你插入模板时光标跳转到
$1
位置时,弹出一个下拉菜单让你选择
Low
,
Medium
,
High
。这在需要标准化的标记时非常方便。

我个人还会用它来快速生成一些代码块注释,比如:

  • 区域折叠标记
    #region
    #endregion
    (C#),
    // #region
    (JS/TS)。这对于管理大型文件中的代码结构非常有用。
  • 版权声明:在文件头部自动插入公司的版权信息和许可证声明。
  • 调试日志:一个快速
    console.log
    模板,包含文件名和行号,方便调试。

这些“花样”让代码片段从简单的文本替换工具,变成了提升开发体验和代码质量的强大助手。关键在于多思考你在日常编码中哪些重复性工作可以通过自动化来解决,然后大胆尝试去配置这些高级代码片段。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

418

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

535

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

513

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

251

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

745

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

214

2023.08.11

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

31

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.6万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 7.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号