电商网站建设最好的公司,天津百度关键词推广公司,建湖企业做网站多少钱,河南网站设计价格1、前言
对于一个前端开发者来说#xff0c;开发工具#xff0c;最常用的应该就是VSCode了#xff0c;因为它免费#xff0c;速度快#xff0c;提供了丰富了插件等优点#xff0c;使得越来越多的前端开发者都来使用它了#xff0c;在开发的时候如果有丰富的插件提供支持…1、前言
对于一个前端开发者来说开发工具最常用的应该就是VSCode了因为它免费速度快提供了丰富了插件等优点使得越来越多的前端开发者都来使用它了在开发的时候如果有丰富的插件提供支持那么我们写代码的速度会快很多体验也有很好有时候我们有一些自己的需求那么可以自己尝试开发一款自己的插件来提升自己的效率以下会讲到如何开发自己的一个插件VSCode官方也提供了很多api大家有时间可以多去研究一下。
以下是官方文档Your First Extension | Visual Studio Code Extension API
如果你不知道如何下手也可以通过微软官方对应的示例代码跑起来去研究下对应的示例代码代码示例地址如下所示
github地址GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.
2、快速开始
首先我们需要提前安装Node和Git的环境安装完之后执行以下命令来安装对应的脚手架
npm install -g yo generator-code
完成上面的安装后可以通过以下命令生成基本的代码文件
yo code
运行之后可以选择对应的扩展类型进行创建。 在插件的开发过程中会经常改动文件可以运行pnpm watch命令用来监听文件的改动以及打包运行。 注所以在调试插件之前进行启动否则在调试窗口自定义的命令会不生效。 3、文件目录
name-transform
├─ .vscode
│ ├─ extensions.json
│ ├─ launch.json
│ ├─ settings.json
│ └─ tasks.json
├─ src
│ ├─ test
│ │ └─ extension.test.ts
│ └─ extension.ts
├─ .eslintrc.json
├─ .gitignore
├─ .vscode-test.mjs
├─ .vscodeignore
├─ CHANGELOG.md
├─ package.json
├─ README.md
├─ tsconfig.json
├─ vsc-extension-quickstart.md
└─ webpack.config.js
4、调试插件
在VSCode工具左侧运行和调式图标然后再点击绿色的小三角按钮或者快捷键F5就可以运行了。 执行完成之后会弹出一个新的VSCode窗口看到扩展开发宿主字样说明调试窗口就开启成功了。。。 通过快捷键“CtrlShiftP”然后输入“Hello world”选中条目窗口下方会有对应的提示如下所示 5、编辑插件
开发插件的文件位于src\extension.tsextension.ts是开发的入口文件如果代码量就直接在这个文件中写代码量比较大可以在其他文件中写最后从当前文件中进行引用就行。 6、插件功能实现
在开发过程中可能有这样的需求在写代码的时候需要写命名规范的代码那么就需要对应自己命名的代码进行转换。
1、定义命令
首先需要在pageage.json定义所需要的命令如下图所示 然后需要配置在编辑区域选中进行转换。配置如下所示 在这里定义完所有的自定义的命令之后就需要在入口文件extension.ts写每个命令对应的逻辑代码。
2、功能代码
把所有命令名定义成一个常量对象如下所示 把所有命令循环进行注册如下所示 然后写选中替换的功能逻辑如下所示; 最后transformFun函数是具体的替换逻辑根据不同的命令返回对应的字符串。 2.1、添加右键菜单
添加右键菜单进行转换需要在package.json中进行配置。如下所示 2.2 添加快捷键
添加快捷键功能也需要在package.json中进行配置部分示例如下所示 到这里功能基本上就开发完了哈完成之后可以看看实际效果是什么样子的。 7、发布插件
首先我们需要把自己开发好的插件进行打包.vsix需要安装vsce这个包vsce是“Visual Studio Code Extensions”的缩写是一个用于打包、发布和管理VS Code扩展的命令行工具。
安装
确保你已经安装Nodejs然后运行如下命令
npm install -g vscode/vsce
使用
然后就可以进行打包和发布了。
$ cd myExtension
$ vsce package
# name-transform-0.0.1 生成了
$ vsce publish
# publisher id.name-transform 发布到 VS Code 插件市场了
发布扩展
您可以通过两种方式发布扩展
自动使用vsce publish命令 vsce publish 这种方式需要进行登录必须使用vsce login命令提供您的个人访问令牌 手动使用vsce package将扩展打包为可安装的VSIX格式然后将其上传到Visual Studio Marketplace发布者管理页面 这种方式需要提前准备以下信息 1、要有一个微软的账户
2、能够访问google的网络如果没有在创建发布者的时候在点击“创建按钮”的时候页面会没反应。 在创建发布者页面填写必填项如下所示
然后点击“Create”按钮就行如果网络不行会提示如下信息说验证码未定义这块会涉及谷歌的一个图形验证码。如下图所示 创建完毕之后可以点击New extension按钮弹窗以下弹窗然后把打包好的.vsix结尾的文件上传即可。 完成之后就等待审核就可以了审核完成之后就可以在VSCode左侧插件输入框中进行搜索和查看了如下所示 好了这样一个自己开发的插件就大功告成了以上就是一个插件开发的一个大概流程具体的一些其他细节可以参考官方或者官方示例以下是自己代码地址一些功能或者也可用来参考代码地址如下所示
github: https://github.com/hanjiangxueying/name-transform
