VS Code配置与调试
好马配好鞍，Node.js开发怎么能少得了VS Code？这东西是真的香，免费开源不说，插件生态强大到没朋友。这节课手把手教你配置一个完美的Node.js开发环境。
一、 下载安装VS Code
去官网 https://code.visualstudio.com/ 下载对应系统的版本。Windows用户直接运行安装包，Mac用户拖拽到Applications文件夹就行。
二、 必装插件
打开VS Code，点击左侧Extensions图标（或者按Ctrl+Shift+X），搜索安装这几个插件：
1. Node.js Extension Pack（强烈推荐）
这个打包了Node.js开发必备的所有插件：
- ESLint - 代码检查
- Node.js modules - 模块智能提示
- npm - npm脚本运行
- JavaScript ES6 code snippets - 代码片段
2. Chinese (Simplified) Language Pack
中文语言包，看英文累的话必装！
3. Prettier - Code formatter
代码格式化工具，一键排版，拯救强迫症。
4. Thunder Client
在VS Code里直接测试API接口，不用切换到Postman了。
5. Auto Rename Tag
改HTML标签时自动成对修改，效率神器。
三、 必知快捷键
调试相关
- F5 - 开始调试
- F9 - 设置/取消断点
- F10 - 单步跳过
- F11 - 单步进入
- Shift+F11 - 单步退出
代码编辑
- Ctrl+Shift+P - 打开命令面板
- Ctrl+` - 打开终端
- Ctrl+Shift+K - 删除整行
- Alt+上/下 - 移动整行
- Ctrl+D - 选中下一个相同内容
- Ctrl+Shift+L - 选中所有相同内容
文件操作
- Ctrl+P - 快速打开文件
- Ctrl+Tab - 切换标签页
- Ctrl+B - 显示/隐藏侧边栏
- Ctrl+~ - 打开终端
四、 配置settings.json
按 Ctrl+Shift+P，输入 "settings.json" 选择 "Open Settings (JSON)"，添加这些配置：
{ // 统一用空格缩进，2个空格 "editor.tabSize": 2, "editor.insertSpaces": true,
// 保存时自动格式化 "editor.formatOnSave": true,
// 开启文件自动保存 "files.autoSave": "afterDelay",
// 不显示这些文件的预览 "files.exclude": { "/node_modules": true, "/.git": true },
// Node.js调试配置 "node.debug.maxTraceLength": 20000 }
五、 调试Node.js程序
这才是重点！学会调试，bug无处遁形。
方法1：直接调试
- 打开你的JS文件
- 在想停下的地方按F9设置断点（会显示红点）
- 按F5，选择 "Node.js"
- 程序会在断点处停下，你可以：
- 查看变量值
- 查看调用栈
- 单步执行
方法2：Attach调试
Attach到正在运行的Node.js进程：
// 启动时加参数 node --inspect app.js
然后在VS Code里：
- 按F5
- 选择 "Attach to Node process"
- 找到你的进程，点连接
launch.json配置
点击左侧的调试图标（虫子图标），点击 "create a launch.json file"，会生成一个 .vscode/launch.json 文件。改成这样：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"skipFiles": ["
六、 终端配置
VS Code内置终端很好用：
Windows用PowerShell
默认是cmd，可以改成PowerShell，更强大：
- Ctrl+Shift+P
- 输入 "Terminal: Select Default Shell"
- 选择 "PowerShell"
常用终端快捷键
- Ctrl+Shift+` - 新建终端
- Ctrl+Shift+C - 复制选中内容
- Ctrl+Shift+V - 粘贴到终端
七、 集成npm脚本
package.json里的scripts可以直接运行：
- 打开 package.json
- 看到上面的 "Run Script" 按钮了吗？
- 点一下就能看到所有npm脚本
- 右键可以运行
或者：
- Ctrl+Shift+P
- 输入 "npm: Run Script"
- 选择要运行的脚本
八、 ESLint配置
代码规范很重要，装完ESLint插件后：
初始化ESLint配置
npx eslint --init
会问你一些问题：
- How would you like to use ESLint? → To check syntax, find problems
- What type of modules does your project use? → CommonJS
- What framework does your project use? → None of these
- Does your project use TypeScript? → No
.eslintrc.json 示例
{ "env": { "node": true, "es2021": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": 12 }, "rules": { "indent": ["error", 2], "linebreak-style": ["error", "unix"], "quotes": ["error", "single"], "semi": ["error", "always"] } }
保存文件时会自动检查，有问题的代码会有红色波浪线。
九、 常见问题
1. 终端显示乱码
在settings.json里加：
"terminal.integrated.defaultProfile.windows": "PowerShell", "terminal.integrated.env.windows": { "CHCP": 65001 }
2. 模块找不到
可能是没装依赖：
npm install
或者在终端运行：
npm install 模块名 --save
3. 调试时断点不生效
确认launch.json的program路径对不对：
"program": "${workspaceFolder}/app.js"
4. 代码提示不全
检查一下是否正确安装了类型定义：
npm install @types/node --save-dev
十、 总结
VS Code配置好，开发效率翻倍提升。这节课的核心：
- 装好必备插件（Node.js Extension Pack、ESLint、Prettier）
- 记住快捷键（F5调试、F9断点、Ctrl+`终端）
- 配置好launch.json
- 用好集成终端和npm脚本
下节课我们聊聊REPL交互环境，那是Node.js独有的神器！
有问题评论区见！