VS Code自定义代码片段能否自动读取项目JSON的组件名？

你可以通过自定义命令+代码片段变量的组合完成这个功能，核心思路是用自定义命令解析项目里的构建JSON文件并返回组件名，再在代码片段里调用这个命令填充占位符。

具体步骤： #

1. 创建简单VS Code扩展（实现自定义命令）
   只需几行JS代码就能实现读取JSON的命令：

   • 用yo code快速生成扩展项目，替换extension.js代码为：

     const vscode = require('vscode');
     const fs = require('fs');
     const path = require('path');
     
     function activate(context) {
         let getComponentName = vscode.commands.registerCommand('util.getComponentName', async () => {
             const activeDoc = vscode.window.activeTextEditor?.document;
             if (!activeDoc) return '';
     
             let currentDir = path.dirname(activeDoc.uri.fsPath);
             const rootDir = path.parse(currentDir).root;
     
             // 向上遍历查找构建JSON文件（示例为build.json）
             while (currentDir !== rootDir) {
                 const buildJsonPath = path.join(currentDir, 'build.json');
                 if (fs.existsSync(buildJsonPath)) {
                     const config = JSON.parse(fs.readFileSync(buildJsonPath, 'utf8'));
                     // 替换为你JSON中组件名对应的键
                     return config.componentName || '';
                 }
                 currentDir = path.dirname(currentDir);
             }
     
             vscode.window.showErrorMessage('未找到项目构建配置文件');
             return '';
         });
     
         context.subscriptions.push(getComponentName);
     }
     
     function deactivate() {}
     
     module.exports = { activate, deactivate };
     

   • 将扩展安装到本地（按F5调试或打包后手动安装）

2. 修改自定义代码片段
   把片段中的{???}替换为${command:util.getComponentName}，示例：

   "组件文档注释头": {
       "prefix": "doc-header",
       "body": [
           "/**",
           " * 组件名: ${command:util.getComponentName}",
           " * 单元名: ${TM_FILENAME_BASE}",
           " * 描述: $1",
           " */"
       ],
       "description": "生成带组件名的文档注释头"
   }
   

替代方案（无需自行写扩展） #

如果不想自己开发扩展，可以使用现成的Custom JavaScript and TypeScript Snippets扩展，它允许你在代码片段中直接编写JS逻辑读取外部文件，通过定义自定义变量解析JSON并返回组件名，再在片段中引用该变量即可。

内容的提问来源于stack exchange，提问作者Aleksandar