VSCode终端：提升命令行使用体验

背景

在使用vite的过程中，发现了一个问题。

通常，需要先安装vite，然后输入命令vite dev来启动本地服务。然而，一个奇怪的现象是：这个命令在我的电脑上命令行直接运行没有问题，但在其他小伙伴的电脑上却提示无法识别命令vite。

解决过程

vite这个npm包定义了一个bin命令vite。在安装该包时，它会在node_modules/.bin目录下生成三个vite文件（分别对应Linux、CMD、PowerShell），以便在npm run时能够识别并执行该命令。这些文件可以被npm scripts直接调用。

然而，我一直误以为这个机制不仅允许npm scripts调用，还允许在当前项目的命令行中直接识别并使用该命令，因为在我的终端命令行中可以直接使用：

第一位小伙伴出现问题时，我还以为是他电脑的问题，没有细查。第二位小伙伴再次出现时，就开始怀疑事情有问题，决定深究一番。

事实上，node_modules/.bin目录下的命令只能在npm run时被识别。看官网描述：

那么，为什么我可以直接在终端中使用该命令呢？查看官网描述后，我猜测可能的原因是我的终端命令行shell有预先存在的PATH。因为我通常都是在PHPStorm的终端命令行中使用的，可能是IDE内置了环境变量。

为了验证这一猜测，我打开了windows CMD和VSCode，进入项目目录并输入命令，结果都无法识别。

windows CMD：

VSCode：

这表明，PHPStorm的终端命令行确实自动导入了node_modules/.bin到环境变量中。

为了能在VSCode内置终端直接运行命令，是否可以让VSCode自动导入环境变量？只需修改settings.json，便可在打开CMD、PowerShell或Git Bash时，自动将当前目录的node_modules/.bin加入PATH，方便命令的直接识别与使用。

使用 Ctrl + Shift + P 快捷键打开 settings.json 文件，并进行如下修改：

json 复制代码

{
   "terminal.integrated.profiles.windows": {
      "PowerShell": {
        "source": "PowerShell",
        "icon": "terminal-powershell",
        "command": "powershell.exe",
        "args": [
          "-NoExit", 
          "-Command", 
          "[System.Environment]::SetEnvironmentVariable('PATH', $env:PATH + ';' + (Join-Path $PWD 'node_modules\\.bin'), [System.EnvironmentVariableTarget]::Process)"
        ],
      },
      "Command Prompt": {
        "path": [
          "${env:windir}\\Sysnative\\cmd.exe",
          "${env:windir}\\System32\\cmd.exe"
        ],
        "args": ["/k", "set PATH=%PATH%;%CD%\\node_modules\\.bin"],
        "icon": "terminal-cmd"
      },
      "Git Bash": {
        "source": "Git Bash",
        "args": ["--login", "-i", "-c", "export PATH=\"$PATH:$(pwd)/node_modules/.bin\"; exec bash"],
        "icon": "terminal-bash"
      }
    }
}

保存后，重新在VSCode打开新终端进行测试，此时所有终端都能完全识别并使用命令：

CMD：

Git Bash：

PowerShell：