276 lines
12 KiB
Markdown
276 lines
12 KiB
Markdown
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. **安装必要的软件**：
|
||
- 安装最新版本的[Node.js](https://nodejs.org/)。
|
||
- 安装[Visual Studio Code](https://code.visualstudio.com/)。
|
||
|
||
2. **设置插件项目**：
|
||
- 打开VSCode，安装`Yeoman`和`VS Code Extension Generator`工具，通过运行以下命令：
|
||
```bash
|
||
npm install -g yo generator-code
|
||
```
|
||
- 运行生成器来创建新的插件项目：
|
||
```bash
|
||
yo code
|
||
```
|
||
- 按照提示操作，选择**TypeScript**作为项目语言，填写插件的名称和其他信息。
|
||
|
||
3. **编写插件代码**：
|
||
- 在生成的项目中，打开`src/extension.ts`文件，这是插件的主要代码文件。
|
||
- 编写一个函数来转换字符串格式：
|
||
```typescript
|
||
function convertStringCase(str: string): string {
|
||
// 这里添加转换逻辑
|
||
return str;
|
||
}
|
||
```
|
||
- 注册一个命令，当用户按下`shift+alt+t`时触发字符串转换：
|
||
```typescript
|
||
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`中添加键绑定：
|
||
```json
|
||
"contributes": {
|
||
"keybindings": [
|
||
{
|
||
"command": "extension.convertCase",
|
||
"key": "shift+alt+t",
|
||
"when": "editorTextFocus"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
4. **测试插件**：
|
||
- 在VSCode中按下`F5`来运行和测试您的插件。
|
||
|
||
5. **打包和发布**：
|
||
- 使用`vsce`工具来打包您的插件：
|
||
```bash
|
||
vsce package
|
||
```
|
||
- 按照[官方文档](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)发布到VSCode Marketplace。
|
||
|
||
请注意，这只是一个基本的指南，您可能需要根据您的具体需求调整代码。如果您需要更详细的帮助或有任何问题，请随时告诉我！
|
||
|
||
====================
|
||
|
||
谢谢你，那么我想添加一个右键菜单，选中文本后，可以通过右键菜单，实现转小驼峰，转大驼峰，转小写，转大写，转下划线，转中划线等功能，请问应该如何实现
|
||
|
||
要在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插件添加一个右键菜单，并实现不同的字符串转换功能。如果您在实现过程中遇到任何问题，或者需要更多帮助，请随时联系我！🛠️
|
||
|
||
==========
|
||
|
||
VSCode开发的插件如何打包
|
||
|
||
在 Visual Studio Code (VSCode) 中，你可以按照以下步骤来打包你的插件：
|
||
|
||
1. **安装打包工具**：首先，你需要安装 VSCode 插件的专用打包工具 `vsce`。你可以通过 npm 来安装它，命令如下¹⁴⁵：
|
||
```bash
|
||
npm install -g vsce
|
||
```
|
||
2. **修改 README.md**：你需要修改项目根目录下的 README.md 文件内容，删除 “This is the README for your extension” 这句话¹。否则，你可能无法正常打包。
|
||
|
||
3. **处理静态文件与 node_modules 文件夹**：一些如 .txt、.json 文件等的静态文件可以在开发的时候放在根目录¹。
|
||
|
||
4. **打包插件**：接下来，你可以开始打包你的插件。使用以下命令来打包¹⁴⁵：
|
||
```bash
|
||
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.
|
||
|
||
==========
|
||
|
||
谢谢你，那么打包完毕后，如何上架到VSCode插件市场呢
|
||
|
||
将 VSCode 插件发布到插件市场需要以下几个步骤¹²³：
|
||
|
||
1. **准备工作**：确保你已经安装了 Node.js 和 npm。
|
||
|
||
2. **安装 VS Code Extension CLI 工具**：运行以下命令来安装 `vsce`，这是一个用于打包和发布 VSCode 插件的命令行工具：
|
||
```bash
|
||
npm install -g vsce
|
||
```
|
||
|
||
3. **创建一个 Microsoft 账户并获取发布者身份**：访问 Visual Studio Marketplace 并创建一个发布者身份。
|
||
|
||
4. **准备你的插件代码**：确保你的 `package.json` 文件中有所有必要的字段（例如，`name`，`version`，`description`等）。
|
||
|
||
5. **打包插件**：在插件的根目录中运行以下命令来打包插件：
|
||
```bash
|
||
vsce package
|
||
```
|
||
这将生成一个 `.vsix` 文件，这就是你的插件的安装包。
|
||
|
||
6. **发布插件**：首次发布前，运行以下命令来创建一个发布者：
|
||
```bash
|
||
vsce create-publisher [publisher name]
|
||
```
|
||
然后运行以下命令来发布插件：
|
||
```bash
|
||
vsce publish
|
||
```
|
||
这个过程中，`vsce` 会检查 `package.json` 的一些必填项。如果一切无误，你的插件就会被成功发布到插件市场。
|
||
|
||
7. **更新插件**：当你需要更新插件时，修改 `package.json` 中的版本号，然后重新运行 `vsce package` 和 `vsce publish`。
|
||
|
||
8. **管理插件**：你可以在 Visual Studio Marketplace 管理界面中管理你的插件。
|
||
|
||
以上就是将 VSCode 插件发布到插件市场的基本流程。希望这个答案对你有所帮助！
|
||
|
||
源: 与必应的对话， 2024/4/3
|
||
(1) 如何发行你的插件 | 跟我学 VSCode 插件开发 - 知乎. https://zhuanlan.zhihu.com/p/339695661.
|
||
(2) 如何将插件发布到vs code插件市场_vscode插件市场-CSDN博客. https://blog.csdn.net/m0_57236802/article/details/132755535.
|
||
(3) 如何将插件发布到vs code插件市场_vscode插件市场-CSDN博客. https://bing.com/search?q=%e5%a6%82%e4%bd%95%e4%b8%8a%e6%9e%b6VSCode%e6%8f%92%e4%bb%b6%e5%88%b0%e6%8f%92%e4%bb%b6%e5%b8%82%e5%9c%ba.
|
||
(4) visual-studio-code - VScode技巧 | 如何开发一个插件 - 个人文章 - SegmentFault 思否. https://segmentfault.com/a/1190000043764128.
|
||
|
||
==========
|
||
|
||
如何配置VSCode插件logo
|
||
|
||
在Visual Studio Code中创建插件时，你可以为你的插件设置一个图标，这个图标会在VS Code的插件市场和插件侧边栏中显示。以下是设置插件图标的步骤²：
|
||
|
||
1. **准备图标文件**：准备一个你想用作插件图标的图片文件。确保这个文件是一个PNG或者JPEG格式，并且推荐至少为128x128像素的分辨率²。
|
||
2. **添加图标到你的插件项目中**：将图标文件放入你的插件项目的某个目录中，通常是项目的根目录²。
|
||
3. **在 package.json 中指定图标路径**：在你的插件项目的 package.json 文件中，使用 icon 字段来指定图标文件的路径。路径是相对于 package.json 文件的。例如²：
|
||
```json
|
||
{
|
||
"name": "your-extension-name",
|
||
"displayName": "Your Extension",
|
||
"description": "Your extension description",
|
||
"version": "0.0.1",
|
||
"publisher": "your-publisher-name",
|
||
"icon": "images/your-icon.png", // 其他字段...
|
||
}
|
||
```
|
||
在这个例子中，假设你的图标文件名为 your-icon.png ，并且它位于项目根目录下的 images 文件夹中²。
|
||
4. **发布或更新你的插件**：当你发布或更新你的插件到VS Code插件市场时， package.json 文件中的 icon 字段会被用来显示你的插件图标。 确保在发布或更新插件之前测试图标显示是否正确。 你可以通过在本地VS Code中加载你的插件来预览图标。 如果一切看起来都好，你就可以按照VS Code插件发布的正常流程来发布你的插件了²。
|
||
|
||
源: 与必应的对话， 2024/4/3
|
||
(1) 【vscode插件】之插件图标设置 - CSDN博客. https://blog.csdn.net/liyananweb/article/details/135181787.
|
||
(2) vscode-更换图标主题VSCode Icons._vscode更改不了icon-CSDN博客. https://bing.com/search?q=%e5%a6%82%e4%bd%95%e9%85%8d%e7%bd%aeVSCode%e6%8f%92%e4%bb%b6logo.
|
||
(3) 让你的 VSCode 文件图标更好看的10个文件 ... - 掘金. https://juejin.cn/post/7247569496696389691.
|
||
(4) vscode-更换图标主题VSCode Icons._vscode更改不了icon-CSDN博客. https://blog.csdn.net/xiaomizhou66a/article/details/81260347.
|
||
(5) 【VSCode插件】之插件图标设置 - 掘金. https://juejin.cn/post/7315373969833754624.
|
||
|
||
|