VSCode怎么添加NPM包_VSCode终端安装和管理NPM依赖包教程-VSCode-PHP中文网

VSCode怎么添加NPM包_VSCode终端安装和管理NPM依赖包教程

看不見的法師

发布： 2025-08-27 13:49:01

原创

760人浏览过

答案是：在VSCode中添加NPM包需通过集成终端执行npm命令。打开项目根目录下的终端，运行npm install [包名]安装生产依赖，或npm install [包名] --save-dev安装开发依赖，前者用于运行时必需的包，后者仅用于开发构建工具，两者分别记录在package.json的dependencies和devDependencies字段中，确保依赖正确管理。

vscode怎么添加npm包_vscode终端安装和管理npm依赖包教程

在VSCode里添加NPM包，其实就是利用其内置终端执行标准的NPM安装命令。你只需要打开终端，输入

npm install [包名]

登录后复制

，然后NPM就会帮你处理下载和依赖管理了。这并非VSCode特有的功能，而是它提供了一个便捷的环境来运行这些命令。

说实话，VSCode本身并不直接“添加”NPM包，它更像是一个超级好用的工作台，把所有工具都集成在一起。我们真正做的是在VSCode里打开它的集成终端，然后像在任何普通命令行里一样，跑NPM命令。这感觉就像你在自己的书桌上，伸手就能拿到所有工具，而不是每次都要跑去工具间。

具体操作起来，其实很简单，但有些细节值得注意：

豆包AI编程

豆包推出的AI编程助手

483

查看详情

打开你的项目和终端： 确保你在VSCode里打开了你的项目文件夹。然后，最快的方式是按
```
Ctrl+
```
登录后复制
(反引号键)，或者通过菜单
```
视图(View) -> 终端(Terminal)
```
登录后复制
。你会看到底部弹出一个命令行窗口。
确认工作目录： 这一点很重要。终端默认会定位到你当前打开的VSCode工作区根目录。如果你是在子文件夹里，记得用
```
cd
```
登录后复制
命令切换到
```
package.json
```
登录后复制
所在的根目录。不然，你安装的包可能不会被正确记录到你的项目依赖里，甚至会安装到错误的位置。我见过不少新手在这里犯错，然后抱怨包怎么没生效。
安装具体包：
- 项目依赖（生产环境）：
```
npm install [包名]
```
  登录后复制
  。比如，
```
npm install axios
```
  登录后复制
  。这个包会被添加到
```
dependencies
```
  登录后复制
  字段。
- 开发依赖（开发/构建环境）：
```
npm install [包名] --save-dev
```
  登录后复制
  或
```
npm i [包名] -D
```
  登录后复制
  。比如，
```
npm install webpack --save-dev
```
  登录后复制
  。这些包会进
```
devDependencies
```
  登录后复制
  。
- 全局安装：
```
npm install -g [包名]
```
  登录后复制
  。全局包通常是一些命令行工具，比如
```
npm install -g create-react-app
```
  登录后复制
  。它们不属于某个特定项目，而是在你的系统路径下可用。
安装所有项目依赖： 如果你克隆了一个项目，或者
```
node_modules
```
登录后复制
文件夹被删了，你只需要在项目根目录运行
```
npm install
```
登录后复制
。NPM会根据
```
package.json
```
登录后复制
里的记录，把所有需要的包都装上。
验证： 安装完成后，你会看到终端输出一些信息。最直接的验证方式是：
- 检查你的项目根目录里有没有一个
```
node_modules
```
  登录后复制
  文件夹，新安装的包就在里面。
- 打开
```
package.json
```
  登录后复制
  文件，看看
```
dependencies
```
  登录后复制
  或
```
devDependencies
```
  登录后复制
  里是不是多了一行你刚刚安装的包名和版本号。如果没看到，那很可能你安装错了目录，或者NPM出了点小岔子。