VSCode 自定义智能提示配置和编写

839 阅读1分钟

1.相关软件环境
Visual Studio Code 1.70.2
Node.js 16.13.2

2.自定义智能提示介绍
要配置自定义智能提示,就是要去配置用户片段(Configure User Snippets)。Json格式,但是需要了解特定的字符串格式,才能实现自己的需求。可实现自动填写头文件注释,函数备注等。 格式列表

特定字符串说明显示样式
LINE_COMMENT注释符号//
TM_FILENAME当前文件名greet.ts
CURRENT_YEAR年份2023
...

3.步骤示意图
1)点击设置按钮(齿轮图标),选择“Configure User Snippets”;

Image.png

2)输入“typescript”字样,选择“typescript.json”。这是ts文件的智能提示配置文件,json格式。 文件路径:AppData\Roaming\Code\User\snippets\

Image1.png

3.代码,代码注释有详细说明

{
    //说明:智能提示配置就是一个json文件,但是有很多语法和关键字要了解下
    //格式:“${1:此处需要输入的内容提示}”
    //每个snippet里面都包含prefix,body和description三个字段
    //第一个snippet
    "头文件": { //提示符,可中文,会显示在智能提示的弹窗里
        "prefix": "file", //触发智能提示的字符串,可与原有智能提示兼容
        "body": [
            "$LINE_COMMENT", //注释符号,我以为是直接输入“//”。
            "$LINE_COMMENT $TM_FILENAME", //头文件名
            "$LINE_COMMENT Author:qiuchun(362460803@qq.com)", //我不知道哪里获取用户名,只能写死
            "$LINE_COMMENT Time:$CURRENT_YEAR.$CURRENT_MONTH.$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND", //显示日期,每个系统变量前都要加$
            "$LINE_COMMENT Desc:描述"
        ],
        "description": "文件头" //本来以为这个是显示在智能提示的备注,但是没显示
    },
    //第二个snippet
    "函数": {
        "prefix": "function",
        "body": [
            "$LINE_COMMENT ${1:函数名}", //光标输入位,按tab切换到下一个输入位
            "$LINE_COMMENT @Parma:${2:参数名}",
            "$LINE_COMMENT Desc:${3:作用}",
            "export function ${4}(){",
            "\t$5",
            "}",
        ],
        "description": "函数"
    }
}

4.后续补充
1)可以关联快捷键等功能;
2)自动获取用户名等接口还不了解。