1
0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee
variable-conversion-vscode-.../GPT.md
程序员小墨 a2662a7f87 bugfix: 解决 compile 时报错 activationEvents 不存在问题及其他若干问题
ERROR  Manifest needs the 'activationEvents' property, given it has a 'main' property.

 ERROR  Make sure to edit the README.md file before you package or publish your extension.

 WARNING  A 'repository' field is missing from the 'package.json' manifest file.

 WARNING  LICENSE.md, LICENSE.txt or LICENSE not found
2024-04-03 00:57:54 +08:00

7.7 KiB
Raw Blame History

docs:

右键二级菜单 https://fishpi.cn/article/1630641187509 https://code.visualstudio.com/api/references/contribution-points#contributes.menus https://code.visualstudio.com/api/references/contribution-points#contributes.submenus

extension.toCamelCase Transform to

=====

请帮我用js写一个小驼峰大驼峰下划线写法互相转换的VSCode插件。实现按shift+alt+t自动在这几种模式下切换。我完全没有写过VSCode插件所以你可能需要详细告诉我每一步该怎么做谢谢你

当然可以帮助您创建一个VSCode插件涉及几个步骤包括设置项目结构、编写代码以及打包和发布插件。以下是创建您所需插件的基本步骤

  1. 安装必要的软件

  2. 设置插件项目

    • 打开VSCode安装YeomanVS Code Extension Generator工具,通过运行以下命令:
      npm install -g yo generator-code
      
    • 运行生成器来创建新的插件项目:
      yo code
      
    • 按照提示操作,选择TypeScript作为项目语言,填写插件的名称和其他信息。
  3. 编写插件代码

    • 在生成的项目中,打开src/extension.ts文件,这是插件的主要代码文件。
    • 编写一个函数来转换字符串格式:
      function convertStringCase(str: string): string {
        // 这里添加转换逻辑
        return str;
      }
      
    • 注册一个命令,当用户按下shift+alt+t时触发字符串转换:
      import * as vscode from 'vscode';
      
      export function activate(context: vscode.ExtensionContext) {
        let disposable = vscode.commands.registerCommand('extension.convertCase', () => {
          // 获取当前编辑器
          let editor = vscode.window.activeTextEditor;
          if (editor) {
            let document = editor.document;
            let selection = editor.selection;
      
            // 获取选中的文本
            let text = document.getText(selection);
            // 转换文本
            let converted = convertStringCase(text);
      
            // 替换文本
            editor.edit(editBuilder => {
              editBuilder.replace(selection, converted);
            });
          }
        });
      
        context.subscriptions.push(disposable);
      }
      
    • package.json中添加键绑定:
      "contributes": {
        "keybindings": [
          {
            "command": "extension.convertCase",
            "key": "shift+alt+t",
            "when": "editorTextFocus"
          }
        ]
      }
      
  4. 测试插件

    • 在VSCode中按下F5来运行和测试您的插件。
  5. 打包和发布

    • 使用vsce工具来打包您的插件:
      vsce package
      
    • 按照官方文档发布到VSCode Marketplace。

请注意,这只是一个基本的指南,您可能需要根据您的具体需求调整代码。如果您需要更详细的帮助或有任何问题,请随时告诉我!

====================

谢谢你,那么我想添加一个右键菜单,选中文本后,可以通过右键菜单,实现转小驼峰,转大驼峰,转小写,转大写,转下划线,转中划线等功能,请问应该如何实现

要在VSCode插件中添加一个右键菜单上下文菜单您需要在package.json文件中使用menus字段。以下是您可以遵循的步骤:

  1. package.json中定义上下文菜单

    • 找到contributes部分,并添加一个新的menus字段。
    • menus字段中,使用editor/context来定义一个新的上下文菜单项。
    • 为每个转换操作指定一个命令和标题。

    这是一个示例:

    "contributes": {
      "commands": [
        {
          "command": "extension.toCamelCase",
          "title": "转小驼峰"
        },
        {
          "command": "extension.toPascalCase",
          "title": "转大驼峰"
        },
        // 添加其他命令...
      ],
      "menus": {
        "editor/context": [
          {
            "when": "editorTextFocus",
            "command": "extension.toCamelCase"
          },
          {
            "when": "editorTextFocus",
            "command": "extension.toPascalCase"
          },
          // 添加其他菜单项...
        ]
      }
    }
    
  2. extension.ts中实现命令逻辑

    • 对于每个命令,编写一个函数来执行相应的字符串转换。
    • 使用vscode.commands.registerCommand注册每个转换函数作为命令。

    这是一个示例:

    import * as vscode from 'vscode';
    
    function toCamelCase(str: string): string {
      // 实现转小驼峰的逻辑
      return str.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
    }
    
    function toPascalCase(str: string): string {
      // 实现转大驼峰的逻辑
      return str.replace(/(^\w|_\w)/g, (g) => g.toUpperCase().replace('_', ''));
    }
    
    // 注册命令
    export function activate(context: vscode.ExtensionContext) {
      let disposableCamel = vscode.commands.registerCommand('extension.toCamelCase', () => {
        // 调用转换函数
      });
      let disposablePascal = vscode.commands.registerCommand('extension.toPascalCase', () => {
        // 调用转换函数
      });
    
      context.subscriptions.push(disposableCamel);
      context.subscriptions.push(disposablePascal);
      // 注册其他命令...
    }
    
  3. 测试您的插件

    • 按下F5来运行和测试您的插件,确保上下文菜单正确显示并且命令能够正确执行。

通过这些步骤您应该能够为您的VSCode插件添加一个右键菜单并实现不同的字符串转换功能。如果您在实现过程中遇到任何问题或者需要更多帮助请随时联系我🛠️

==========

VSCode开发的插件如何打包

在 Visual Studio Code (VSCode) 中,你可以按照以下步骤来打包你的插件:

  1. 安装打包工具:首先,你需要安装 VSCode 插件的专用打包工具 vsce。你可以通过 npm 来安装它,命令如下¹⁴⁵:
npm install -g vsce
  1. 修改 README.md:你需要修改项目根目录下的 README.md 文件内容,删除 “This is the README for your extension” 这句话¹。否则,你可能无法正常打包。

  2. 处理静态文件与 node_modules 文件夹:一些如 .txt、.json 文件等的静态文件可以在开发的时候放在根目录¹。

  3. 打包插件:接下来,你可以开始打包你的插件。使用以下命令来打包¹⁴⁵:

vsce package

这个命令会生成一个 .vsix 文件,这就是你的插件的安装包。

以上就是 VSCode 插件的基本打包流程。希望这个答案对你有所帮助!

源: 与必应的对话, 2024/4/3 (1) VSCode 插件开发(三):插件打包与本地安装 - 简书. https://www.jianshu.com/p/bb379a628004. (2) VSCode打包插件及安装vsix包方法_npm from visx-CSDN博客. https://blog.csdn.net/qq_23350817/article/details/83374373. (3) VSCode打包插件及安装vsix包方法 - 马克队长 - 博客园. https://www.cnblogs.com/baokang/p/13251495.html. (4) vscode插件打包流程 - 知乎 - 知乎专栏. https://zhuanlan.zhihu.com/p/643962235. (5) VSCode打包插件及安装vsix包方法 - 马克队长 - 博客园. https://bing.com/search?q=%e5%a6%82%e4%bd%95%e6%89%93%e5%8c%85VSCode%e6%8f%92%e4%bb%b6.