From be9952f6bc5d23c693589a20a53e1896bdc6d4fc Mon Sep 17 00:00:00 2001 From: zhangbk1 Date: Thu, 28 Mar 2024 19:03:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- GPT.md | 81 +++++++++++++++++++++++++++++++++++++- package.json | 40 +++++++++++++++++-- src/extension.ts | 34 +++++++++++----- src/test/extension.test.ts | 30 ++++++++++++++ src/text-conversion.ts | 39 ++++++++++++++++++ test-code.md | 16 ++++++++ 6 files changed, 226 insertions(+), 14 deletions(-) create mode 100644 src/text-conversion.ts create mode 100644 test-code.md diff --git a/GPT.md b/GPT.md index 743797e..81f0def 100644 --- a/GPT.md +++ b/GPT.md @@ -76,4 +76,83 @@ ``` - 按照[官方文档](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)发布到VSCode Marketplace。 -请注意，这只是一个基本的指南，您可能需要根据您的具体需求调整代码。如果您需要更详细的帮助或有任何问题，请随时告诉我！ \ No newline at end of file +请注意，这只是一个基本的指南，您可能需要根据您的具体需求调整代码。如果您需要更详细的帮助或有任何问题，请随时告诉我！ + +==================== + +谢谢你，那么我想添加一个右键菜单，选中文本后，可以通过右键菜单，实现转小驼峰，转大驼峰，转小写，转大写，转下划线，转中划线等功能，请问应该如何实现 + +要在VSCode插件中添加一个右键菜单（上下文菜单），您需要在`package.json`文件中使用`menus`字段。以下是您可以遵循的步骤： + +1. **在`package.json`中定义上下文菜单**： + - 找到`contributes`部分，并添加一个新的`menus`字段。 + - 在`menus`字段中，使用`editor/context`来定义一个新的上下文菜单项。 + - 为每个转换操作指定一个命令和标题。 + + 这是一个示例： + ```json + "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`注册每个转换函数作为命令。 + + 这是一个示例： + ```typescript + 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插件添加一个右键菜单，并实现不同的字符串转换功能。如果您在实现过程中遇到任何问题，或者需要更多帮助，请随时联系我！🛠️ diff --git a/package.json b/package.json index e5c36cb..b2ce16b 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,20 @@ "contributes": { "commands": [ { - "command": "text-conversion.helloWorld", - "title": "Hello World" + "command": "extension.toCamelCase", + "title": "转小驼峰 To Camel Case" + }, + { + "command": "extension.toPascalCase", + "title": "转大驼峰 To Pascal Case" + }, + { + "command": "extension.toUpperCase", + "title": "转大写 To Upper Case" + }, + { + "command": "extension.toLowerCase", + "title": "转小写 To Lower Case" } ], "keybindings": [ @@ -26,7 +38,27 @@ "key": "shift+alt+t", "when": "editorTextFocus" } - ] + ], + "menus": { + "editor/context": [ + { + "when": "editorTextFocus", + "submenu": "extension.stringConversion" + } + ], + "submenus": [ + { + "id": "extension.stringConversion", + "when": "editorTextFocus", + "command": "extension.toCamelCase", + "label": "字符串转换" + }, + { + "when": "editorTextFocus", + "command": "extension.toPascalCase" + } + ] + } }, "scripts": { "vscode:prepublish": "npm run compile", @@ -47,4 +79,4 @@ "@vscode/test-cli": "^0.0.8", "@vscode/test-electron": "^2.3.9" } -} +} \ No newline at end of file diff --git a/src/extension.ts b/src/extension.ts index 03104db..7030366 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -1,6 +1,7 @@ // The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below import * as vscode from 'vscode'; +import * as TextConversion from './text-conversion'; // This method is called when your extension is activated // Your extension is activated the very first time the command is executed @@ -19,7 +20,7 @@ export function activate(context: vscode.ExtensionContext) { // vscode.window.showInformationMessage('Hello World from text-conversion!'); // }); - let disposable = vscode.commands.registerCommand('extension.convertCase', () => { + const handleEditorReplace = (convertFunction: (selectionText: string) => string) => { // 获取当前编辑器 let editor = vscode.window.activeTextEditor; if (editor) { @@ -29,7 +30,7 @@ export function activate(context: vscode.ExtensionContext) { // 获取选中的文本 let text = document.getText(selection); // 转换文本 - let converted = convertStringCase(text); + let converted = convertFunction(text); // 当转换后文本与转换前相同时，跳过转换 if (text === converted) { @@ -38,19 +39,34 @@ export function activate(context: vscode.ExtensionContext) { } // 替换文本 + console.log('replace selection text', text, 'to', converted); editor.edit(editBuilder => { editBuilder.replace(selection, converted); }); } - }); + }; + + let disposableCamelCase = vscode.commands.registerCommand('extension.toCamelCase', () => { + handleEditorReplace(TextConversion.toCamelCase); + }); + context.subscriptions.push(disposableCamelCase); + + let disposablePascalCase = vscode.commands.registerCommand('extension.toPascalCase', () => { + handleEditorReplace(TextConversion.toPascalCase); + }); + context.subscriptions.push(disposablePascalCase); + + let disposableUpperCase = vscode.commands.registerCommand('extension.toUpperCase', () => { + handleEditorReplace(TextConversion.toUpperCase); + }); + context.subscriptions.push(disposableUpperCase); + + let disposableLowerCase = vscode.commands.registerCommand('extension.toLowerCase', () => { + handleEditorReplace(TextConversion.toLowerCase); + }); + context.subscriptions.push(disposableLowerCase); - context.subscriptions.push(disposable); } // This method is called when your extension is deactivated export function deactivate() { } - -function convertStringCase(str: string): string { - // 这里添加转换逻辑 - return str.toUpperCase(); -} diff --git a/src/test/extension.test.ts b/src/test/extension.test.ts index 4ca0ab4..5b568a0 100644 --- a/src/test/extension.test.ts +++ b/src/test/extension.test.ts @@ -5,6 +5,36 @@ import * as assert from 'assert'; import * as vscode from 'vscode'; // import * as myExtension from '../../extension'; +enum TextFormat { + /** 独立单词 */ + SINGLE_WORD, + /** 小驼峰 */ + CAMEL_CASE, + /** 大驼峰 */ + PASCAL_CASE, + /** 大写 */ + UPPER_CASE, + /** 小写 */ + LOWER_CASE, +} + +interface TestCase { + input: string + inputType: TextFormat | Array + output: { + camelCase: string + } +} +const testCase: Array = [ + { + input: '', + inputType: [], + output: { + camelCase: '', + } + }, +]; + suite('Extension Test Suite', () => { vscode.window.showInformationMessage('Start all tests.'); diff --git a/src/text-conversion.ts b/src/text-conversion.ts new file mode 100644 index 0000000..6a511d5 --- /dev/null +++ b/src/text-conversion.ts @@ -0,0 +1,39 @@ +/** + * 转小驼峰 to Camel Case + * + * @param {string} str user selection + * @returns + */ +export function toCamelCase(str: string): string { + return str.replace(/_([a-z])/g, (g) => g[1].toUpperCase()); +} + +/** + * 转大驼峰 to Pascal Case + * + * @param {string} str user selection + * @returns + */ +export function toPascalCase(str: string): string { + return str.replace(/(^\w|_\w)/g, (g) => g.toUpperCase().replace('_', '')); +} + +/** + * 转大写 to Upper Case + * + * @param {string} str user selection + * @returns + */ +export function toUpperCase(str: string): string { + return str.toUpperCase(); +} + +/** + * 转小写 to Lower Case + * + * @param {string} str user selection + * @returns + */ +export function toLowerCase(str: string): string { + return str.toLowerCase(); +} diff --git a/test-code.md b/test-code.md new file mode 100644 index 0000000..a61397c --- /dev/null +++ b/test-code.md @@ -0,0 +1,16 @@ +```javascript +// 小驼峰 +const helloWorld = '' +// 大驼峰 +const HelloWorld = '' +// 下划线 + 首字母大写 +const Hello_World = '' +// 下划线 + 全小写 +const hello_world = '' +// 下划线 + 全大写 +const HELLO_WORLD = '' +// 小写 +const helloworld = '' +// 大写 +const HELLOWORLD = '' +``` \ No newline at end of file