背景
上一篇讲了利用 VsCode 进行项目调试的基本操作，但是实际使用中发现一个比较麻烦的事就是，每次启动 chrome 调试前需要先手动把项目跑起来，还有就是手上同时开发多个项目时，node版本管理的问题；我就想有没有办法在调试器启动前自动切换node版本并且运行项目，一番搜索之后发现 VsCode 调试器还个 preLaunchTask 配置，配合 nvm 可以实现；
这篇文章主要讲解如何通过 preLaunchTask 配合 nvm 一键运行项目并启动 VsCode 调试器，为了把文章水长一点学习得更全面，顺便把开发时的 node 版本切换总结一下；完整demo 放在文章末尾；
Node版本切换
n 和 nvm
先来讲讲 node 版本管理，比较常见的就是 n 和 nvm 啦，我的设备是 mac，这里以mac为例；很多老文章写 nvm 不支持 windows，现在已经支持了哈；
使用起来非常简单，使用方法网上文章也一大堆就不再赘述啦；
二者主要区别在于
n 是一个 npm 包，我们需要先装一个 node 才能安装 n 以此来安装其它版本的 node，主打一个我管我自己；
而 nvm 是一个独立的软件包，可以单独安装使用；
此外，使用 n 切换版本的时候，它会将指定版本的 node 复制到 node 的默认路径中 /usr/local/bin;
而 nvm 则是将不同版本的 node 安装到 ~/.nvm/<version>/，比如 /Users/dqqbl/.nvm/versions/node/v18.16.0/bin/node ；
切换版本的时候再修改 $PATH;
两个我都用过，nvm 使用起来更方便，再看看 star 数，该用哪个不用我多说了吧?
这两者虽然都能管理 node 版本，但是每次启动项目前都需要手动在 shell 里执行命令，手动切换到指定的版本，比如nvm use 14 (自动使用合适的 v14 版的node)，还是有点麻烦；
nvm 的 README 里有提到，可以通过 shell 脚本的方式实现，每次打开项目目录时自动读取目录下的 nvm 配置文件 (.nvmrc) 切换 node 版本的方式；
但是我还是想单纯的利用 VsCode 实现，所以这里没有采用这种方式
docker 和 voltra
这两种方案都比较偏向团队方面，让团队统一开发环境
docker 如果没有用过还要先学习一下容器和镜像等概念和docker的指令，稍微有一点上手成本；
voltra 是一个 Javascript 的工具管理器，可以通过配置 package.json 给每个项目指定使用的 node 版本，这个就改到项目文件了，而我只想悄悄变强?
二者都不太符合我懒速速上手的理念，这里贴一下两篇使用介绍
preLaunchTask
水完上面的内容，回头看看我们的 vscode 调试器配置；我们想做到的是，launch 到 chrome 前不用手动运行项目，并且能自动切换 node 版本；
其实就是要在调试器启动前执行一段脚本嘛，通过 preLaunchTask 配置可以实现，这个字段的作用是，在调试器启动前，调用 .vscode/tasks.json 里对应的指定脚本；
因此，我们先要创建一段需要执行的脚本，command + shift + p ，输入并选择tasks: configure Task，再随便选一个，比如
vscode 就会给我们生成 tasks.json 文件和 我们所选配置，这些配置是vscode 根据我们的 package.json 文件给出的一些默认配置，我们只是要个模板
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"problemMatcher": [],
"label": "npm: start",
"detail": "node scripts/start.js"
}
]
}
把 tasks.json 修改一下，我们只配置必须的
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "nvm-use",
"command": "zsh -i -c 'nvm use 14 && npm run start'",
"isBackground": true,
},
]
}
-
type任务类型，比如我们要执行 shell 脚本，用来启动react项目 -
label任务的名称，用于指定调用该任务 -
command执行的命令zsh表示运行 Zsh Shell-i表示以交互式方式运行 Shell。该选项启动一个交互式 Shell 并维持其特性，例如加载配置文件-c表示在启动的 Shell 中执行后续的命令。后面跟着的是要执行的命令字符串nvm use 14表示切换到合适的 v14 版 node&&这是 Shell 中的逻辑操作符，表示在前一个命令成功执行后才执行后续命令npm run start启动 react 项目
默认情况下 vscode 启动的脚本是非交互式的，如果我们直接写
nvm use 14，是访问不到 nvm 的，所以我们要在前面加上zsh -i -c -
isBackground是否后台运行任务，这里要设置为 true，否则会阻塞后面调试器的启动
配置好 tasks.json, 我们再修改下 launch.json
在最后加上我们刚配置的任务preLaunchTask: "nvm-use"，启动调试器
尴尬报错?
这里主要是因为我们没有配置 problemMatcher，这个是用来收集任务执行中的报错等信息并归到 PROBLEMS Tab里用的，我们直接看DEBUG CONSOLE 或者 TERMINAL 就行了，这个用不大上，勾选 Remember my choice for this task ，再点击 Debug Anyway 直接执行即可；
对配置感兴趣的可以看看文末 Task 官方配置链接
自此我们就实现了一键切换node版本，启动react项目，launch chrome 调试啦
Demo
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "debug react",
"request": "launch",
"type": "chrome", // 调试器运行环境
"runtimeExecutable": "canary", // 可执行文件的绝对路径或浏览器版本，如果是浏览器版本需要先下载安装
"userDataDir": false, // chrome 保存的用户数据目录
"url": "http://localhost:3000", // 浏览器访问的url
"runtimeArgs": [
"--auto-open-devtools-for-tabs" // 启动时自动打开开发者工具
], // 启动时携带的参数
"webRoot": "${workspaceFolder}", // 项目根目录
"preLaunchTask": "nvm-use"
},
]
}
// .vscode/tasks.json
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "nvm-use",
"command": "zsh -i -c 'nvm use 14 && npm run start'",
"isBackground": true,
// "problemMatcher": []
},
]
}
