![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=1738889309-rdvTbgKhH0OP4Np5nXqdbRqGat2VIIDq-0-b3e7a932b5b66f48e2cfb0b722e6efa3)
图1.21 Visual Studio Code官网下载界面
下载完成后,打开安装包进行安装即可。
Visual Studio Code最重要的部分是侧边栏,也就是如图1.22所示的区域。这个区域集成了编码时会用到的核心功能,其他功能都可以通过安装扩展来实现。
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_45.jpg?sign=1738889309-LK2H38652zKE6rVokrNnC9Dfk5BT1jYv-0-0f52a9e72c1dcf931d7b255157bd47b0)
图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=1738889309-tqsc8V0RQXSpxaPbMk1uVGYexavoFnuW-0-04c17cbc3b7f3d7a9efc40de575f6c1a)
图1.23 “调试”按钮的位置
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_47.jpg?sign=1738889309-THLP0sKirqkMc1kcPJwUQ09qnMjkVwTJ-0-bb90aa3031560098f5ca82b75a61b257)
图1.24 “没有配置”调试信息
单击调试窗口中的“没有配置”选项,在展开的下拉菜单中,选择“添加配置”选项,然后选择“Node.js:附加到进程”,如图1.25所示。
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_48.jpg?sign=1738889309-1yJHIR73w0IOQpJ5UNq7p4xqad9LWaRC-0-ac0075e2b785925624b422156c797b3a)
图1.25 添加Node.js调试配置信息
Visual Studio Code会自动在当前项目中创建文件夹.vscode,并在该文件夹中添加文件launch.json,配置代码如下:
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_49.jpg?sign=1738889309-2q7nJA756fPa1Ns7101mO9GMxwTe1ApE-0-7734614d7fdcb1672dbc900b13ab86c1)
接下来,在第1.1.5节中的示例代码08行处添加断点,代码如下:
![](https://epubservercos.yuewen.com/CA5268/13916125705940506/epubprivate/OEBPS/Images/txt002_50.jpg?sign=1738889309-fWDGPXhmnxOmbBPMaEJyU1YUktuUhH4X-0-59ace675d33954c3362f7df2f446ee03)
然后,单击如图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=1738889309-gHt5Gm62Sly0NBGen5kiMKV054hFHvRf-0-7c29e8ff623fc31422229efc638e6fb9)
图1.26 程序进入断点处