VSCode中实现可编程的代码片段 - `Code Recycle`

• 如何在编辑器中自定义代码片段?提供补全前缀,提供补全内容,然后就可以直接使用了.
• 但是只能在当前文件,当前输入位置插入特定内容,有时候不能满足需求
• 如果我们想引入一个服务,当服务不存在时那么自动创建,只能靠我们自己,因为代码片段是静态的不能做到可编程
• 如果您有这种需求,并想实现,那么不妨试一试Code Recycle

导入一个服务

• 创建代码片段配置

{
    "prefix": [
        "import"
    ],
    "body": " ",
    "regexp": {
        "pattern": "\\.([\\p{L}\\p{N}]+)",
        "flag": "u"
    },
    "pattern": "**/*.ts",
    "dynamicMode": true,
    "script": "./import-class.ts"
}

• 实现调用函数

let fn: ScriptFunction = async (util, rule, host, injector) => {
  let importName = util.documentContext.snippetParameters![1];
  let _ = util.lodash;
  let className = _.upperFirst(_.camelCase(importName));
  let rootCtx = util.initContext();
  await util.changeList(
    [
    // 查询类是否存在
      {
        path: `*.ts`,
        name: 'classPath',
        glob: true,
        list: [
          {
            query: `export class ${className}`,
            mode: 'like',
            optional: true,
            callback(context, index) {
              let classPathCtx = context.getContext('root.classPath');
              classPathCtx.data = context.node!.path!;
            },
          },
        ],
      },
    ],
    rootCtx
  );
  let filePath = rootCtx.getContext('root.classPath').data;
  if (!filePath) {
    // 从模板中创建
    await util.changeList([
      {
        type: 'copy',
        from: join(__dirname, './template/__name@dasherize__.ts'),
        to: './',
        pathTemplate: '@angular-devkit',
        contentTemplate: '@angular-devkit',
        templateContext: { name: importName },
      },
    ]);
    let changedRecord = host.records();
    filePath = util.path.normalize((changedRecord[0] as any).path);
  }
  let pathRelative = require('../shared/path-relative');
  // 插入引用
  let changed = await util.changeList([
    {
      path: util.filePathGroup.currentPath,
      list: [
        {
          range: [0, 0],
          replace: `import {${className}} from '${pathRelative(util.filePathGroup.currentPath, filePath, util)}'\n`,
        },
        {
          range: util.documentContext.insertRange![0].range,
          replace: `let ${importName} = new ${className}()`,
        },
      ],
    },
  ]);

  await util.updateChangeList(changed);
};

• 在编辑器中的ts文件里输入import.hello,完成补全时,会自动引入Hello类,并实现初始化

更多?

• 实例
• 工具目前支持CLI与VSCode Extension进行执行,脚本支持yaml/js/ts
• 您可以查看文档了解更多
• 如果您已经感兴趣,那么可以快速开始