VS Code 常用插件配置

Debugger for Chrome

该扩展可以在两种模式下运行——它可以启动(launch)导航到你的应用程序的Chrome实例，也可以附加(attach)到正在运行的Chrome实例。这两种模式都要求您从本地web服务器(从VS代码任务或命令行启动)提供web应用程序。使用url参数，你只需告诉VS代码在Chrome中打开或启动哪个url。

Launch方式

下面配置文件的两个示例 "request": "launch" 。你必须指定一个文件或一个url来启动Chrome。如果使用url，请将webRoot设置为提供文件的目录。可以是绝对路径，也可以是使用${workspaceFolder}(在代码中打开的文件夹)的路径。webRoot用于将url(如“http://localhost/app.js”)解析为磁盘上的文件(如/Users/me/project/app.js)，因此要注意设置是否正确。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceFolder}/wwwroot"
        },
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

如果你想使用不同的Chrome安装，你也可以设置runtimeExecutable字段与路径的Chrome应用程序。

Attach

在"request": "attach" ，你必须启动Chrome与远程调试启用，以便扩展附加到它。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Attach to url with files served from ./out",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "<url of the open browser tab to connect to>",
            "webRoot": "${workspaceFolder}/out"
        }
    ]
}

Skip files

可以使用skipFiles属性在调试时忽略特定的文件。例如，如果您设置"skipFiles":["jquery"]，然后你将跳过任何名为'jquery '的文件。

支持以下几种格式

• 文件名 (like jquery.js)
• 整个要忽略的目录 (like node_modules)
• 正则匹配的方式 (like node_modules/react/*.min.js)

使用Node调试(直接在vscode里调试)
直接把type对应项改为node

{
    "version": "0.1.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/index.js"
        }
    ]
}

REST Client

创建文件后缀必须为.rest

当输入请求代码时，文章第一行会出去Send Request，单击即可发送请求；
用###分割出不同的请求;
header与body之间需要有一个空行

Get/Post

GET https://example.com/topics/1 HTTP/1.1

###

POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}

GraphQL

通过在头文件中添加自定义请求头文件X-Request-Type: GraphQL来将请求指定为GraphQL请求

POST https://api.github.com/graphql
Content-Type: application/json
Authorization: Bearer xxx
X-REQUEST-TYPE: GraphQL

query ($name: String!, $owner: String!) {
  repository(name: $name, owner: $owner) {
    name
    fullName: nameWithOwner
    description
    diskUsage
    forkCount
    stargazers(first: 5) {
        totalCount
        nodes {
            login
            name
        }
    }
    watchers {
        totalCount
    }
  }
}

{
    "name": "vscode-restclient",
    "owner": "Huachao"
}