营销网站建设实训总结北京新网数码信息技术有限公司
准备
安装开发依赖
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 ExtensionA Visual Studio Code extension that does amazing things!## Features- Feature 1: Describe feature 1.
- Feature 2: Describe feature 2.## Installation1. 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.## Usage1. Open a file in Visual Studio Code.
2. Press `Ctrl+Shift+P` and type "My Extension: Do Something".
3. Enjoy the magic!## ConfigurationThis extension provides the following settings:- `myExtension.enable`: Enable or disable the extension. Default is `true`.## ExamplesHere 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": "https://example.com/your-username/your-repo-name.git"},
遇到警告2
WARNING LICENSE.md, LICENSE.txt or LICENSE not found创建一个许可证文件 LICENSE.md ，输入以下内容（参考），将
[Year]替换为当前年份，将[Your Name]替换为你的名字或组织名称
MIT LicenseCopyright (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发布者管理页面
注意事项
1、需要微软账号（可以直接注册）；
2、需要能访问谷歌的网络（架梯子）；
3、具备以上两点后，在创建发布者页面填写组织名称和ID（组织名称和ID要与前面 遇到警告2 里面解决方案填写的组织者名称一致）即可创建发布者；
4、创建发布者后，就可上传应用；
5、上传后等待审核，审核成功后就可以在应用市场搜索到；
注册成功后
在管理页面上传应用
选择应用
选择打包好的 .vsix 文件上传
1、如遇到上传错误，一般为项目配置里面的组织名称与发布者名称不一致 或者 插件名称已在市场存在等问题；
2、在发布插件前，可以先在插件市场搜索一下，是否有重名；
参考
开发一个自己的VSCode插件_vscode插件开发官方文档-CSDN博客
vscode插件开发教程 - 简书