主页 > 手机 >

vscode插件开发

手机
2025-09-03 04:12:02

准备

安装开发依赖

npm install -g yo generator-code

安装后，运行命令

yo code

运行

打开项目，点击 vscode 调式

按 F5 或点击调试运行按钮

会打开一个新窗口，在新窗口按快捷键 `Ctrl+Shift+P` ，搜索 Hello World 选择执行

右下角出现消息弹窗，说明运行成功

项目解释

回到项目

package.json 主要配置文件

开发中文文档

VS Code插件创作中文开发文档

开发测试

实现一个 Vue 项目提供代码片段和 javascript 项目提供代码片段；

创建一个 snippets 目录和两个文件 js.json 、vue3.json

js.json

{ "create axios modul": { "prefix": "logs", "body": [ "console.log($1)", "", "console.log($2)" ], "description": "create console" } }

vue3.json

{ "Vue Component": { "prefix": "vue3", "body": [ "<template>", "</template>", "", "<script setup>", "import { ref } from 'vue'", "</script>", "", "<style lang='less' scoped>", ".demo-page { height: 100%; }", "</style>" ], "description": "Create a Vue component" } }

更新 package.json 配置，在 contributes 里面添加以下代码

"snippets": [ { "language": "javascript", "path": "./snippets/js.json" }, { "language": "vue", "path": "./snippets/vue3.json" } ]

描述

运行

保存后，重启下调试

在调试新窗口，添加一个 test.js 文件和 test.vue 文件

在 test.js 文件，输入 logs 就会出现代码提示

在 test.vue 文件，输入 vue3 就会出现代码提示

打包安装依赖 vsce npm install -g vsce 执行打包命令 vsce package 遇到报错 ERROR Make sure to edit the README.md file before you package or publish your extension.

编辑下 README.md 文件，以下示例模板

# My Extension A Visual Studio Code extension that does amazing things! ## Features - Feature 1: Describe feature 1. - Feature 2: Describe feature 2. ## Installation 1. Open Visual Studio Code. 2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing `Ctrl+Shift+X`. 3. Search for "My Extension". 4. Click the Install button. ## Usage 1. Open a file in Visual Studio Code. 2. Press `Ctrl+Shift+P` and type "My Extension: Do Something". 3. Enjoy the magic! ## Configuration This extension provides the following settings: - `myExtension.enable`: Enable or disable the extension. Default is `true`. ## Examples Here are some examples of how to use this extension: ```json { "myExtension.enable": true } 遇到警告1 WARNING A 'repository' field is missing from the 'package.json' manifest file.

在 package.json 文件中添加 repository 字段

"repository": { "type": "git", "url": " example /your-username/your-repo-name.git" },

遇到警告2 WARNING LICENSE.md, LICENSE.txt or LICENSE not found

创建一个许可证文件 LICENSE.md ，输入以下内容（参考），将 [Year] 替换为当前年份，将 [Your Name] 替换为你的名字或组织名称

MIT License Copyright (c) [Year] [Your Name] Permission 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.

更新 package.json 配置，publisher 的值替换为你的名字或组织名称（跟上面一至）

"publisher": "your-publisher-name", "license": "MIT",

前面两个警告也可以临时忽略，不影响打包（但是打包后只能本地加载，不能发布线上）

打包成功

打包成功后，根目录会生成一个 .vsix 文件

本地加载插件

点击扩展 --- 加载刚刚打包的 .vsix 文件

加载并启用后，就可本地使用了

发布插件

发布插件前，可以先在插件市场搜索一下，是否有重名；

打开 Visual Studio Marketplace发布者管理页面

注意事项