VSCode 技巧 - 基础

发表于 2023-05-29 更新于 2023-06-07 分类于 VSCode 技巧阅读次数：

声明：本文档信息来源于VSCode官方文档。

命令行

# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions .

查看切换

窗口

切换: ⌃W
新建: ⇧⌘N

侧栏

主侧栏: ⌘B
辅侧栏: ⌥⌘B
资源管理器: ⇧⌘E
扩展: ⇧⌘X
搜索: ⇧⌘F
源代码管理: ⌃⇧G
运行和调试: ⇧⌘D

底栏

终端: ⌃`
输出: ⇧⌘U
调试控制台: ⇧⌘Y
问题: ⇧⌘M

禅模式

⌘M Z

配置

@ext: 配置一个扩展。例如: @ext:ms-python.python
@feature: 配置一个特性。例如：**@feature:explorer**
@id: 根据配置 ID 搜索。例如：**@id:workbench.activityBar.visible**
@lang: 根据语言 ID 搜索。例如：**@lang:typescript**
@tag: 根据 VSCode 系统搜索。例如：**@tag:workspaceTrust**

配置文件路径

Windows: %APPDATA%\Code\User\settings.json
macOS: $HOME/Library/Application\ Support/Code/User/settings.json
Linux: $HOME/.config/Code/User/settings.json

重制所有配置

打开配置文件 settings.json , 清空 {} 之间的内容。

设置优先级

后一个层级覆盖前前一个层级：

Default settings
User settings
Remote settings
Workspace settings
Workspace Folder settings
Language-specific default settings
Language-specific user settings
Language-specific remote settings
Language-specific workspace settings
Language-specific workspace folder settings
Policy settings

显示修改过的按键绑定

设置显示语言

搜索

高级搜索

在 包含的文件 和 排除的文件 中，如果输入 example ，则会匹配工作区内的名字包含 example 的目录和文件。如果输入 ./example ，则会匹配工作区顶级的目录 example/ 。使用 , 分隔多个匹配条件。

更多匹配语法：

* 零或多个字符
? 一个字符
** 任意长度的路径，包括空路径
{} 分组条件。例如 {**/*.html,**/*.txt} 匹配所有 html 和 text 文件。
[] 声明一个字符范围。例如 example.[0-9] 匹配 example.0 , example.1, …
[!…] 否定一个字符范围。例如 example.[!0-9] 匹配 example.a, example.b, 但不匹配 example.0 。

排除的文件 的小齿轮点亮后会自动排除配置中 files.exclude 和 search.exclude 指定的文件。

扩展

工作区推荐扩展

在 .vscode 目录中添加 extensions.json 文件：

1
2
3

{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

扩展安装路径

Windows: %USERPROFILE%.vscode\extensions
macOS: ~/.vscode/extensions
Linux: ~/.vscode/extensions

调试

调试记录点

debug的时候显示日志信息。不用console.log了。

引用变量

VSCode提供引用变量，供debugging 和 task 配置文件使用。

调试平台指定参数

launch.json 可以针对 “windows”，“linux”，“osx” 设置指定参数:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

调试时自动打开URI

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

查看切换

窗口

侧栏

底栏

禅模式

配置

搜索

扩展

调试

任务

代码片段