打造自己的VS Code插件，提升开发效率
前言
古人云：工欲善其事，必先利其器，要想提升编程效率，一个强大的开发工具就显得极其关键。
作为开发者，我们有时候会发现市场上并不存在一个完全满足我们需求的插件，我们可以自己动手量身打造一个VS Code插件。这将帮助我们更好地满足项目需求，也可以分享至全球开发者社区，帮助他人解决问题。
在这篇文章中，我将教会你如何创建一个VS Code插件，该插件能够根据不同的项目自动切换到相应的Node.js版本。
项目搭建
首先，我们需要安装一个叫 yeoman 的工具，用于更快速地生成项目骨架。
// 安装 yeoman$ npm install -g yo generator-code
在 yeoman 安装完毕后，我们便可以使用它来生成我们的插件项目。
// 生成项目$ yo code
执行 yo code 后，创建的过程中出现的交互式命令行，我们需要回答一些问题来初始化项目配置，如下所示：
_-----_ ╭──────────────────────────╮| | │ Welcome to the Visual │|--(o)--| │ Studio Code Extension │`---------´ │ generator! │( _´U`_ ) ╰──────────────────────────╯/___A___\ /| ~ |__'.___.'__´ ` |° ´ Y `? What type of extension do you want to create? New Extension (JavaScript)? What's the name of your extension? HelloWorld? What's the identifier of your extension? helloworld? What's the description of your extension? vscode plugin demo? Enable JavaScript type checking in 'jsconfig.json'? Yes? Initialize a git repository? Yes? Which package manager to use? npm
启动项目
运行插件
打开 src/extension.js 文件，并按下 F5 或者 去运行与调试面板点击 Run Extention 即可运行项目。
插件调试
运行插件后会弹出一个新的vscode窗口，这个新的窗口是测试环境(扩展开发宿主)，插件功能在这个新的窗口测试，打印的消息在前一个窗口的调试控制台中，比如自带的例子，在我们新窗口 cmd/ctrl+shift+p 后输入 Hello world 后会在前一个窗口的控制台打印一些信息。
编辑插件
主要功能开发在 src/extension.js 文件中开发，这个文件定义了一个名为 activate 的函数，每当插件被激活时 VS Code 执行的函数。
开发插件：多项目下node版本控制
我们制作一个能够根据项目自动切换 Node.js 版本的插件，它可以自动根据不同的项目切换Node.js版本。
它可以在项目级别设置你想要的 Node.js 版本，然后当你在VS Code中打开该项目时，插件就会自动切换到相应的 Node.js 版本。
这样就减少了手动切换版本的时间，并且避免了因版本不匹配导致的一些错误。
const { readFileSync } = require('fs');const { join } = require('path');const vscode = require('vscode');// My vscode extension codefunction activate() {vscode.window.onDidOpenTerminal((terminal) => {// 获取工作区目录if (!vscode.workspace.workspaceFolders) {return;}// 获取工作区目录路径const path = vscode.workspace.workspaceFolders[0].uri.fsPath;// 获取package.jsonconst packageJsonFilePath = join(path, '/package.json');// 读取package.jsonlet packageJsonString = readFileSync(packageJsonFilePath,'utf8').toString();// 读取node版本号let packageJson = JSON.parse(packageJsonString)let { nodeVersion } = packageJson// 修改当前临时窗口node版本terminal.sendText(`$env:PATH = "E:\\frontend\\nvm\\nvm\\${nodeVersion};" + $env:PATH`, true)})}
临时配置当前命令窗口node版本
$env:Path = "E:\frontend\nvm\nvm\14.18.0;" + $env:Path
插件打包 & 发布
❝当我们完成插件开发后，我们可以将其发布到 VS Code 的 MarketPlace，让其他人也能使用我们的插件。可参考官方资料 publishing-extensions
$ npm install -g vsce
$ vsce package // 打包插件 .vsix 格式
$ vsce publish // 发布到 MarketPlace
结语
制作自己的VSCode插件，不仅可以高度地满足我们的开发需求，提升开发效率，同时我们也可以把自己的作品分享给全球的开发者，互相学习，共同进步。以上只是我个人的一些想法和经验，有更好的建议和想法欢迎评论交流。
才疏学浅，如有讲述不清之处，还请指正，共同进步。
作者：前端 magic
相关网址：
https://github.com/AKclown/js-to-ts
本篇文章为 @ 行动的大雄 创作并授权 21CTO 发布，未经许可，请勿转载。
内容授权事宜请您联系 webmaster@21cto.com或关注 21CTO 公众号。
该文观点仅代表作者本人，21CTO 平台仅提供信息存储空间服务。
评论
行动的大雄
标准用户最新文章
我要赞赏作者
请扫描二维码，使用微信支付哦。