- Koa与Node.js开发实战
- iKcamp
- 654字
- 2020-08-27 23:29:52
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所示,其他版本需展开下拉框进行选择。

图1.21 Visual Studio Code官网下载界面
下载完成后,打开安装包进行安装即可。
Visual Studio Code最重要的部分是侧边栏,也就是如图1.22所示的区域。这个区域集成了编码时会用到的核心功能,其他功能都可以通过安装扩展来实现。

图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所示)。

图1.23 “调试”按钮的位置

图1.24 “没有配置”调试信息
单击调试窗口中的“没有配置”选项,在展开的下拉菜单中,选择“添加配置”选项,然后选择“Node.js:附加到进程”,如图1.25所示。

图1.25 添加Node.js调试配置信息
Visual Studio Code会自动在当前项目中创建文件夹.vscode,并在该文件夹中添加文件launch.json,配置代码如下:

接下来,在第1.1.5节中的示例代码08行处添加断点,代码如下:

然后,单击如图1.24箭头处的“调试”按钮启动Node.js服务。打开浏览器,输入地址http://localhost:8080/,程序进入断点处,如图1.26所示。
通过图1.26可以看到,Visual Studio Code为开发者提供了充足的调试功能,如当前上下文环境中的变量查看功能、监视功能、调用堆栈查看功能等。
提示:读者也可以访问https://code.visualstudio.com/docs/nodejs/nodejs-debugging,了解更多高级调试功能。

图1.26 程序进入断点处