打造自己的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.json  const packageJsonFilePath = join(path, '/package.json');  // 读取package.json  let 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

首先，我们需要安装 vsce，它是一个用于打包和发布VS Code插件的命令行工具。

$ npm install -g vsce解释

然后我们可以使用 vsce来打包我们的插件。

$ vsce package // 打包插件 .vsix 格式解释

最后，我们可以将插件发布到VS Code的MarketPlace。

$ vsce publish // 发布到 MarketPlace解释

结语

制作自己的VSCode插件，不仅可以高度地满足我们的开发需求，提升开发效率，同时我们也可以把自己的作品分享给全球的开发者，互相学习，共同进步。以上只是我个人的一些想法和经验，有更好的建议和想法欢迎评论交流。

才疏学浅，如有讲述不清之处，还请指正，共同进步。

作者：前端 magic

相关网址：

https://github.com/AKclown/js-to-ts