打造自己的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 code
function 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)
 })
}解释