![Koa与Node.js开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/426/25462426/b_25462426.jpg)
1.3 Visual Studio Code编辑器
性能优秀的编辑器对于高效的开发来说如同利刃,笔者常用的就是广受好评的Visual Studio Code,本节将对它进行详细介绍。Visual Studio Code是微软在2015年发布的一款能够运行在Windows、macOS和Linux上的跨平台编辑器,官网地址为https://code.visualstudio.com/。
1.3.1 Visual Studio Code的安装及其功能
从官网下载Visual Studio Code的稳定版本,下载界面如图1.21所示,其他版本需展开下拉框进行选择。
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_44.jpg?sign=1739264812-mkftMtR5MRwtIR2fFa3aa1sEMZAdMWDE-0-bfa52855c07cbe4c8328a84ec896d0ca)
图1.21 Visual Studio Code官网下载界面
下载完成后,打开安装包进行安装即可。
Visual Studio Code最重要的部分是侧边栏,也就是如图1.22所示的区域。这个区域集成了编码时会用到的核心功能,其他功能都可以通过安装扩展来实现。
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_45.jpg?sign=1739264812-Dqotfi4yfKuG6fR18C63MbfgLowCGrFI-0-b0b3a77bf9e43bf63d16bb2b2ed2cac1)
图1.22 Visual Studio Code的侧边栏
1.3.2 使用Visual Studio Code调试Node.js
下面使用1.1.5节中的示例来演示调试Node.js。首先使用Visual Studio Code打开1.1.5节中的示例代码,单击编辑器左侧工具栏中的“调试”按钮的位置(如图1.23所示)。
进入调试窗口,可以看到当前项目暂时“没有配置”调试信息(如图1.24所示)。
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_46.jpg?sign=1739264812-EMES3M1Op3ZVjXj3xInjmeQlxUSlPcpo-0-bee45605f0bec91dee65fc602cfe56c0)
图1.23 “调试”按钮的位置
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_47.jpg?sign=1739264812-SATVPeny0PNLuJpog3nq0tCPicO6FYgZ-0-3f219bdf524eed9550e6f41666d15c08)
图1.24 “没有配置”调试信息
单击调试窗口中的“没有配置”选项,在展开的下拉菜单中,选择“添加配置”选项,然后选择“Node.js:附加到进程”,如图1.25所示。
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_48.jpg?sign=1739264812-Is5fXj3fRKqWDRYSLXge0g4cn6CghS3y-0-cf42f55b1b949ad34e0f25d1a51f53bb)
图1.25 添加Node.js调试配置信息
Visual Studio Code会自动在当前项目中创建文件夹.vscode,并在该文件夹中添加文件launch.json,配置代码如下:
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_49.jpg?sign=1739264812-NsIGtwVFbBhMtjA3h3YyCLhHELzmNw8n-0-fd8c62b52dbb8feaab0b6e6bf0ffeafb)
接下来,在第1.1.5节中的示例代码08行处添加断点,代码如下:
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_50.jpg?sign=1739264812-agSzQ3JqGaRovXPj4XE58u0K8Lmce80l-0-7ca7a7ba6615686e2597374dfc418839)
然后,单击如图1.24箭头处的“调试”按钮启动Node.js服务。打开浏览器,输入地址http://localhost:8080/,程序进入断点处,如图1.26所示。
通过图1.26可以看到,Visual Studio Code为开发者提供了充足的调试功能,如当前上下文环境中的变量查看功能、监视功能、调用堆栈查看功能等。
提示:读者也可以访问https://code.visualstudio.com/docs/nodejs/nodejs-debugging,了解更多高级调试功能。
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_51.jpg?sign=1739264812-YNicgvuAiUaJOn4RcqspEX0HTTWOrGAY-0-e7657800c90cb9391d8e932ed7ebb149)
图1.26 程序进入断点处