當前環境情況
操作系統：Windows
項目類型：VS Code 插件（TypeScript 編寫）
Node.js 版本：20.18.1
yarn 版本：1.22.22
npm 版本：10.8.2
npm registry：huawei ------- https://repo.huaweicloud.com/repository/npm/
安裝官方的腳手架來初始化項目
- 安裝官方手腳架
yarn global add yo generator-code - 初始化項目
然后根據提示，填寫基本項目基本內容，我這里選擇了 TypeScriptyo code
項目結構
hello-vscode-plugin/
├── package.json # 項目元數據、依賴、腳本及 VS Code 插件配置
├── src/ # TypeScript 源代碼目錄
│ └── extension.ts # 插件主入口，核心功能實現
├── out/ # 編譯后的 JavaScript 文件目錄
│ └── extension.js # 編譯后的插件主入口文件
├── node_modules/ # 項目依賴包目錄，由 npm 自動生成
├── .vscode/ # VS Code 編輯器相關配置
│ └── settings.json # 工作區級別的 VS Code 設置
├── tsconfig.json # TypeScript 編譯配置文件
├── .eslintrc.js # ESLint 代碼規范配置文件
├── README.md # 項目說明文檔，介紹插件功能和使用方法
├── LICENSE.md # MIT 許可證，MIT 許可證是一種寬松、開放源代碼的許可證，適合個人或企業自由使用和二次開發
重要文件內容
extension.ts
import * as vscode from "vscode";
import { toLowerCamelCase } from "./utils";export function activate(context: vscode.ExtensionContext) {console.log('Congratulations, your extension "extensionproject" is now active!');const disposable = vscode.commands.registerTextEditorCommand("hello-vscode-plugin.toLowerCamelCase",(textEditor, edit) => {if (textEditor.selection.isEmpty) {// 未選中文本直接返回return;}const textRange = new vscode.Range(textEditor.selection.start,textEditor.selection.end);const text = textEditor.document.getText(textRange);edit.replace(textRange, toLowerCamelCase(text));});context.subscriptions.push(disposable);
}export function deactivate() {}
utils/index.ts
export const toLowerCamelCase = (str: string) => {if (str.length < 2) {return str.toLowerCase();}const [firstWords, ...otherWords] = str.split("_");return (firstWords.toLowerCase() +otherWords.filter((word) => !!word).map((word) =>word[0].toUpperCase() + word.slice(1, word.length).toLowerCase()).join(""));
};
package.json
{"name": "hello-vscode-plugin","displayName": "hello-vscode-plugin","description": "將枚舉等文本快速轉換為 lowerCamelCase 格式的 VS Code 擴展。","publisher": "Jacky","version": "0.0.2","license": "MIT","repository": {"type": "git","url": "https://git.com/jacky/hello-vscode-plugin"},"engines": {"vscode": "^1.103.0"},"categories": ["Other"],"activationEvents": ["onCommand:hello-vscode-plugin.toLowerCamelCase"],"main": "./out/extension.js","contributes": {"menus": {"editor/context": [{"when": "editorFocus","command": "hello-vscode-plugin.toLowerCamelCase"}]},"commands": [{"command": "hello-vscode-plugin.toLowerCamelCase","title": "toLowerCamelCase","category": "hello-vscode-plugin"}]},"scripts": {"vscode:prepublish": "npm run compile","compile": "tsc -p ./","watch": "tsc -watch -p ./","pretest": "npm run compile && npm run lint","lint": "eslint src","test": "vscode-test"},"devDependencies": {"@types/vscode": "^1.103.0","@types/mocha": "^10.0.10","@types/node": "22.x","@typescript-eslint/eslint-plugin": "^8.39.0","@typescript-eslint/parser": "^8.39.0","eslint": "^9.32.0","typescript": "^5.9.2","@vscode/test-cli": "^0.0.11","@vscode/test-electron": "^2.5.2"}
}
LICENSE.md
# MIT LicenseCopyright (c) 2025 JackyPermission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
README.md
# hello-vscode-plugin將枚舉等文本快速轉換為 lowerCamelCase 格式的 VS Code 擴展。## Features- 支持將選中的文本轉換為 lowerCamelCase 格式
- 通過右鍵菜單快速訪問轉換功能
- 適用于枚舉值、變量名等需要轉換為駝峰命名的場景## Usage1. 在編輯器中選擇需要轉換的文本
2. 右鍵點擊選中的文本
3. 選擇 "toLowerCamelCase" 選項
4. 文本將自動轉換為 lowerCamelCase 格式## Release Notes### 0.0.1Initial release of hello-vscode-plugin extension.---## Following extension guidelinesEnsure that you've read through the extensions guidelines and follow the best practices for creating your extension.* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)## Working with MarkdownYou can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.## For more information* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)**Enjoy!**
調試
- 在當前項目中，按F5進入調試模式
- 然后在其他項目中，進行大寫轉小駝峰，選中大寫內容：
- 在命令面板(cmd + P)（或在工作臺頂部上面進行搜索）中輸入
>toLowerCamelCase點擊下方出現的命令后就可以在右下角看到彈出框了
正常轉換就行
打包 vsix
1. 安裝打包工具
首先需要安裝 VS Code 官方提供的打包工具 vsce（Visual Studio Code Extension Manager）：
npm install -g @vscode/vsce
2. 準備打包
在打包前，確保插件項目根目錄下的 package.json 文件配置正確，特別是以下字段：
name：插件名稱（必須唯一）
version：版本號（每次發布需遞增）
engines.vscode：支持的 VS Code 版本范圍
3. 執行打包命令
在插件項目的根目錄（package.json 所在目錄）執行：
vsce package
4. 獲取 VSIX 文件
打包成功后，會在當前目錄生成一個 .vsix 文件，文件名格式為：
[插件名稱]-[版本號].vsix（例如 my-extension-0.0.1.vsix）
5. 安裝測試（可選）
可以手動安裝生成的 VSIX 文件驗證：
- 在 VS Code 中打開「擴展」面板（Ctrl+Shift+X）
- 點擊右上角的「…」菜單，選擇「從 VSIX 安裝」
- 選擇生成的 .vsix 文件完成安裝
注意事項
- 如果插件依賴外部資源，需確保在 package.json 的 files 字段中聲明需要包含的文件 / 目錄
- 若出現權限錯誤，在 macOS/Linux 系統可嘗試添加 sudo，Windows 系統建議以管理員身份運行命令行
- 如需發布到 VS Code 市場，需先注冊 Azure DevOps 賬號 并獲取發布令牌
