DEV Community

wszgrcy
wszgrcy

Posted on

Implementing programmable code snippets in VSCode - `Code Recycle`

#vscode #parser #snippet
  • How to customize code snippets in the editor? Provide the completion prefix, provide the completion content, and then you can use it directly
  • But specific content can only be inserted in the current file and input location, sometimes it may not meet the requirements
  • If we want to introduce a service that automatically creates when it does not exist, we can only rely on ourselves because the code snippet is static and cannot be programmed
  • If you have such a need and want to implement it, why not give it a try with Code Recycle

Import a service

  • Create code snippet configuration 
{
    "prefix": [
        "import"
    ],
    "body": " ",
    "regexp": {
        "pattern": "\\.([\\p{L}\\p{N}]+)",
        "flag": "u"
    },
    "pattern": "**/*.ts",
    "dynamicMode": true,
    "script": "./import-class.ts"
}
Enter fullscreen mode Exit fullscreen mode
  • Implement call function 
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(
    [
    // Check if the class exists
      {
        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) {
    // Create from template
    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');
  // insert reference
  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);
};
Enter fullscreen mode Exit fullscreen mode
  • When entering import.hello in the ts file in the editor, and completing the completion, the Hello class will be automatically introduced and initialized

More?

  • examples
  • The tool currently supports the execution of CLI and VSCode Extension. Script Support yaml/js/ts
  • You can view document learn more
  • If you want to see more instances, you can visit the repository view and Run
  • If you are already interested, you can start quickly

Top comments (0)

Read next

vhugogarcia profile image

Solving .NET MAUI Issues on macOS Sequoia with Visual Studio Code and XCode 16

Victor Hugo Garcia -

matowang profile image

Save 1000 hours in development time. VSCode shortcuts & Window Management

Matthew Wang -

asimachowdhury profile image

Top Tools: 5 VS Code Extensions to Enhance Your React Development

Asima Chowdhury -

codemee profile image

在 VSCode 中幫需要命令行引數的 Python 程式除錯

codemee -