VSCode下载、安装及配置、调试的一些过程理解

news2024/9/22 15:48:28

第一步先下载了vscode，官方地址为：https://code.visualstudio.com/Download

第二步安装vscode，安装环境是win10，安装基本上就是一步步默认即可。

第三步汉化vscode，这一步就是去扩展插件里面下载一个中文插件即可，基本操作为，在左侧的extension中输入chinese simp就出来了，然后点右侧的install就行了，安装完了重启就显示中文界面了。

第四步，因为听说vscode支持js运行调试，就想着怎么调试，先写了一个js文件，然后看有个运行和调试按钮，去选择nodejs运行，发现报错，没用node运行时runtime环境，看网上说的下去下载nodejs，下载地址：下载 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/zh-cn/download

下载windows环境下的msi，直接安装就行，安装完了默认变量都添加好了，不用太多操作。

第五步，点击“运行和调试”最右侧的按钮，添加一个配置，vscode是默认支持nodejs的，因此安装完了node后，点击配置按钮会自动生成一个launch.json文件。

如果我们默认通过vscode 来调试代码，会生成一个launch.json 配置文件，详细细节可以查看官方文档Debugging in Visual Studio CodeOne of the great things in Visual Studio Code is debugging support. Set breakpoints, step-in, inspect variables and more.https://code.visualstudio.com/docs/editor/debugging关于配置，我们这里只说说我们一般会常用的地方。

launch.json 配置项
必选字段
type：调试器类型。这里是 node(内置的调试器)，如果装了 Go 和 PHP 的扩展后对应的 type 分别为 go 和 php
request：请求的类型，目前只支持 launch 和 attach。launch 就是以 debug 模式启动调试，attach 就是附加到已经启动的进程开启 debug 模式并调试，跟上一篇提到的用 node -e "process._debugProcess(PID)" 作用一样
name：下拉菜单显示的名字

可选字段
program：可执行文件或者调试器要运行的文件 (launch)
args：要传递给调试程序的参数 (launch)
env：环境变量 (launch)
cwd：当前执行目录 (launch)
address：ip 地址 (launch & attach)
port：端口号 (launch & attach)
skipFiles：想要忽略的文件，数组类型 (launch & attach)
processId：进程 PID (attach)
同时目录变量有
${workspaceRoot}：当前打开工程的路径
${file}：当前打开文件的路径
${fileBasename}：当前打开文件的名字，包含后缀名
${fileDirname}：当前打开文件所在的文件夹的路径
${fileExtname}：当前打开文件的后缀名
${cwd}：当前执行目录
通常一个默认的launch.json 默认配置如下
{
"version": "0.2.1",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/index.js"
}
]
}

这个配置会直接运行index.js 我们项目目录下的index.js 文件。我们可以根据上面的配置信息自动的定义我们启动运行的文件。

关于调试js代码，如果用vscode自带的调试，就是左上角的“运行和调试”按钮，快捷键就是F5，这个是vscode软件本身的，不是任何插件的，如果安装了node.js exec，可以通过f8运行js文件，这个是node.js exec的快捷键运行，不是vscode的，vscode这个通用的运行调试按钮，对所有文件能用。