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

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

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

npm install [包名]

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

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

Moshi Chat

法国AI实验室Kyutai推出的端到端实时多模态AI语音模型，具备听、说、看的能力，不仅可以实时收听，还能进行自然对话。

下载

1. 打开你的项目和终端： 确保你在VSCode里打开了你的项目文件夹。然后，最快的方式是按

   Ctrl+

   (反引号键)，或者通过菜单

   视图(View) -> 终端(Terminal)

   。你会看到底部弹出一个命令行窗口。
2. 确认工作目录： 这一点很重要。终端默认会定位到你当前打开的VSCode工作区根目录。如果你是在子文件夹里，记得用

   cd

   命令切换到

   package.json

   所在的根目录。不然，你安装的包可能不会被正确记录到你的项目依赖里，甚至会安装到错误的位置。我见过不少新手在这里犯错，然后抱怨包怎么没生效。
3. 安装具体包：
   • 项目依赖（生产环境）：

     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

     。它们不属于某个特定项目，而是在你的系统路径下可用。
4. 安装所有项目依赖： 如果你克隆了一个项目，或者

   node_modules

   文件夹被删了，你只需要在项目根目录运行

   npm install

   。NPM会根据

   package.json

   里的记录，把所有需要的包都装上。
5. 验证： 安装完成后，你会看到终端输出一些信息。最直接的验证方式是：
   • 检查你的项目根目录里有没有一个

     node_modules

     文件夹，新安装的包就在里面。
   • 打开

     package.json

     文件，看看

     dependencies

     或

     devDependencies

     里是不是多了一行你刚刚安装的包名和版本号。如果没看到，那很可能你安装错了目录，或者NPM出了点小岔子。

NPM包的生产依赖和开发依赖有什么区别？我应该如何选择？

NPM的包管理，最开始让人有点摸不着头脑的就是

dependencies

devDependencies

生产依赖 (dependencies) 简单来说，这些是你项目在运行时必须有的东西。没有它们，你的应用根本跑不起来，或者核心功能会缺失。比如，如果你在写一个React应用，那

react

react-dom

axios

axios

npm install [包名]

开发依赖 (devDependencies) 这些包呢，是你在开发、测试、构建项目时才需要的。一旦你的项目构建完成并准备部署，这些包就没用了，它们不会被包含在最终的生产代码里。想想看，像

webpack

babel

eslint

jest

typescript

npm install [包名] --save-dev