当前位置：首页 > news >正文

制作一个简单的vscode插件

news 2025/9/14 5:30:17

当前环境情况

操作系统：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
```
初始化项目
```
yo code
```
然后根据提示，填写基本项目基本内容，我这里选择了 TypeScript

项目结构

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!**