VSCode 自定义片段如何使用文件名 - TypeScript

在使用 VSCode 进行 TypeScript 开发时，我们经常需要写一些重复性高、格式相似的代码。VSCode 带有片段（Snippets）功能，可以让我们自定义代码片段，节省编码时间，提高效率。本文将介绍如何使用文件名自定义 VSCode 片段。

1. 创建自定义片段

在 VSCode 中，使用快捷键 Ctrl+Shift+P 或 Command+Shift+P（Mac）打开命令面板。输入 Preferences: Configure User Snippets，选择 TypeScript，然后选择你想要添加片段的作用域，比如 function。

接着，将下面的代码复制到出现的文件中：

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('${TM_FILEPATH}'); $1"
        ],
        "description": "Print variable to console"
    }
}

这个片段的作用是将文件路径打印到控制台。

2. 将文件名添加到自定义片段中

我们可以使用 $TM_FILENAME_BASE 和 $TM_FILENAME 分别获取当前文件名的基础名称和完整名称。

修改上面的代码，在 "Print to console" 的 body 中添加 $TM_FILENAME_BASE 和 $TM_FILENAME：

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$TM_FILENAME_BASE: ${TM_FILEPATH}'); $1",
            "console.log('$TM_FILENAME: ${TM_FILEPATH}'); $1"
        ],
        "description": "Print variable to console"
    }
}

此时，我们就可以在 TypeScript 文件中使用 log 片段，同时输出文件名到控制台了。

3. 在自定义片段中使用文件名生成新代码

假设我们需要在 TypeScript 文件中添加一个新的类，类名为当前文件名的基础名称。

我们可以添加一个新片段，如下所示：

{
    "New class from filename": {
        "prefix": "newclass",
        "body": [
            "export class ${TM_FILENAME_BASE} {",
            "\tconstructor() {",
            "\t}",
            "}"
        ],
        "description": "Create a new class from filename"
    }
}

在编辑 TypeScript 文件时，输入 newclass 后按下 Tab 键即可生成新代码。

总结

以上就是如何在 VSCode 自定义片段中使用文件名的方法。通过这种方法，我们可以更加高效地编写 TypeScript 代码，减少重复性工作。如果您对VSCode自定义片段功能感兴趣，也可以查看文档进行更深入的学习。