6.1 命令行
6.2 IntelliSense
6.2.4 自定义IntelliSense
// 控制是否在键入代码时自动显示建议
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": false
},
// 控制除Tab键外,Enter是否可以同样来接受建议
// on / off / smart (仅当建议中包含文本改动时才可使用 Enter 接受建议)
"editor.acceptSuggestionOnEnter": "on",
"editor.quickSuggestionsDelay": "10",
"editor.suggestOnTriggerCharacters": true,
// 启用Tab补全
// on / off / onlySnippets (在前缀匹配时进行Tab补全,"quickSuggestions")
"editor.tabCompletion": "on",
// 控制排序时是否提高靠近光标的词语的优先级
"editor.suggest.localityBonus": true,
// 控制在建议列表中如何预选建议
// first / recentlyUsed (选择最近的建议除非进一步键入其他项) / recentlyUsedByPrefix (根据之前补全过的建议的前缀来进行选择)
"editor.suggestSelection": "recentlyUsed",
// 是否根据文档中的文字提供建议列表
"editor.wordBasedSuggestions": true,
// 是否在输入时显示含有参数文档和类型信息的小面板
"editor.parameterHints.enabled": true,
6.3 代码导航
6.3.1 文件快速导航
6.3.2 面包屑(Breadcrumbs)导航
"breadcrumbs.enabled": true,
// 控制是否及如何在导航路径视图中显示文件路径
// on / off / last (在导航路径视图中仅显示文件路径的最后一个元素)
"breadcrumbs.filePath": "on",
"breadcrumbs.icons": true,
"breadcrumbs.showArrays": true,
"breadcrumbs.showBooleams": true,
"breadcrumbs.showClasses": true,
"breadcrumbs.showConstants": true,
"breadcrumbs.showConstructors": true,
"breadcrumbs.showEnumMembers": true,
"breadcrumbs.showEnums": true,
"breadcrumbs.showEvents": true,
"breadcrumbs.showFields": true,
"breadcrumbs.showFiles": true,
"breadcrumbs.showFunctions": true,
"breadcrumbs.showInterfaces": true,
"breadcrumbs.showKeys": true,
"breadcrumbs.showMethods": true,
"breadcrumbs.showModules": true,
"breadcrumbs.showNamespaces": true,
"breadcrumbs.showNull": true,
"breadcrumbs.showNumbers": true,
"breadcrumbs.showObjects": true,
"breadcrumbs.showOperators": true,
"breadcrumbs.showPackages": true,
"breadcrumbs.showProperties": true,
"breadcrumbs.showStrings": true,
"breadcrumbs.showStructs": true,
"breadcrumbs.showTypeParameters": true,
"breadcrumbs.showVariables": true,
// 控制如何在导航路径视图中显示符号
// on / off / last (在导航路径视图中仅显示当前符号)
"breadcrumbs.symbolPath": "on",
// 控制导航路径大纲视图中符号的排序方式
// position / name / type
"breadcrumbs.symbolSortOrder": "position",
6.3.3 代码导航右键菜单
6.3.4 跳转到定义
- F12 或右键菜单中 Go to Definition
- 按下Ctrl并悬停鼠标在一个符号上,会出现相应的声明预览
- Ctrl 按住并单击符号,可以跳转到定义
- Ctrl+Alt 按住并单击,可以把包含定义的文件在另一侧打开000
6.3.5 跳转到类型定义
6.3.6 查找所有引用
6.3.7 通过内联编辑器查看定义和引用
6.3.8 引用信息
6.3.9 跳转到实现
Ctrl+F12,跳转到一个符号的相应实现
如果该符号是一个接口,则会显示接口的所有实现
如果该符号是一个抽象函数,则会显示这个函数的所有具体实现
6.3.10 跳转到文件中的符号
6.3.11 跳转到工作区中的符号
Ctrl+T
6.3.12 括号匹配
Ctrl+Shift+\
6.3.13 错误与警告
如果当前工作区中的文件有错误或警告:
- 左下角状态栏会显示错误和警告的概况信息
- 单击状态栏的概况或通过使用 Ctrl+Shift+M,可以调出 PROBLEMS 面板,显示所有的错误和警告
- 当前文件中,会在有错误或警告的文本下方显示红色的波浪线
- F8 或 Shift+F8,可以在当前文件的错误和警告之间循环跳转,并查看错误详情
6.4 玩转Git
6.5 打造自己的主题
6.6 快速创建可复用的代码片段
6.6.2 使用代码片段
- 打开命令面板,输入并执行 Insert Snippet
- 通过智能提示使用 Enter 或 Tab 选择语句片段
6.6.3 创建自定义的代码片段
- Preference菜单下使用 User Snippets
- 命令面板使用 Preferences: Configure User Snippets
代码片段文件 ***.code-snippets,JSON格式的,并且支持C语言风格的注释。
下面是 JavaScript 的 for 循环语句的代码片段的一个例子:
// in file 'Code/User/snippets/javascript.json'
{
"For Loop": { // 代码片段名字
"prefix": ["for", "for-const"], // IntelliSense 中触发的单词,字符串的子串也可以作为出发条件,如 "fc" 也会匹配上 for-const
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"], // 定义了要被插入的代码片段,这里一共有3个占位符
"description": "A for loop." // 可选项,定义了在 IntelliSense 中显示的描述性文本
}
}
6.6.4 代码片段的生效范围
- 语言维度
- 项目维度
6.6.5 代码片段的语法
- Tabstops
可以使用$1
、$2
、$3
等代码片段中的字符来指定光标的位置
比较特殊的是$0
,它是光标抵达的最后一个位置 - 占位符
包含默认值的 tabstops,如${1:foo}
占位符可以嵌套使用,如${1:another ${2:placeholder}}
- 选择
占位符可以把多个值作为文本内容,多个值以逗号分隔,并用管道字符包围。
如${1|one,two,three|}
,当代码片段被插入时,会跳转到相应的占位符,然后出现 one, two, three 下拉列表 - 变量
通过$name
或${name:default}
可以插入变量的值。
当变量为空时,会插入默认值或空字符串。
可以使用的变量如下所示:
-
TM_SELECTED_TEXT
: 当前被选中的文本 -
TM_CURRENT_LINE
: 当前光标所在行的文本 -
TM_CURRENT_WORD
: 当前光标所在的单词 -
TM_LINE_INDEX
: 从0开始计数的行号 -
TM_LINE_NUMBER
: 从1开始计数的行号 -
TM_FILENAME
: 当前文件的文件名 -
TM_FILENAME_BASE
: 当前文件的文件名,不包含扩展名 -
TM_DIRECTORY
: 当前文件的目录名 -
TM_FILEPATH
: 当前文件的完整路径 -
CLIPBOARD
: 当前剪贴板的文本 -
WORKSPACE_NAME
: 当前工作区的目录名
下面的变量可以用来插入日期和时间:
-
CURRENT_YEAR
: 当前的年份 -
CURRENT_YEAR_SHORT
: 当前年份和后两位数字 -
CURRENT_MONTH
: 当前月份的两位数字 -
CURRENT_MONTH_NAME
: 当前月份的全称 -
CURRENT_MONTH_NAME_SHORT
: 当前月份的简称 -
CURRENT_DATE
: 当前月份的某一天 -
CURRENT_DAY_NAME
: 当前是星期几 -
CURRENT_DAY_NAME_SHORT
: 当前星期几的简称 -
CURRENT_HOUR
: 当前的小时数 -
CURRENT_MINUTE
: 当前的分钟数 -
CURRENT_SECOND
: 当前的秒数 -
CURRENT_SECONDS_UNIX
: Unix时间
下面的变量可以用来插入注释,并且会根据不同的语言插入相应的注释:
-
BLOCK_COMMENT_START
: 块注释的开始字符 -
BLOCK_COMMENT_END
: 块注释的结束字符 -
LINE_COMMENT
: 行注释
6.6.6 为代码片段添加快捷键
在命令面板执行 Preference: Open Keyboard Shortcuts (JSON),打开定义快捷键的 keybindings.json 文件
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
// 引用已有的代码片段
"langId": "csharp",
"name": "myFavSnippet",
// 直接定义代码片段
"snippet": "console.log($1) $0",
}
}
6.7 Task, 把重复的工作自动化
可以使用任务自动化的工具:
- 编译:Typescript 编译器、Java编译器等
- 静态检查:ESLint、TSLint等
- 代码构建:Make、Ant、Gulp、Jake、Rake、MSBuild等
Task只能配置在有文件夹打开的项目中
6.7.2 配置一个更复杂的 Task
{
"version": "2.0.0",
"tasks": [
{
"label": "Run tasks",
"type": "shell", // or "process" 作为一个进程运行
"command": "./scripts/test.sh",
"windows": { // windows下的配置,相应配置会在windows下覆盖默认定义
"command": "scripts\\test.bat"
},
"args": [ // 当参数包含空格时非常有用
"arg1",
"arg2"
],
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "always",
"panel": "dedicated"
}
}
]
}
6.7.5 问题匹配器
在 tasks.json 文件中使用 problemMatcher 属性来定义相应的问题匹配器
6.7.7 输出行为
- reveal:控制集成终端是否显示。always / never / silent (当输出不是错误和警告时,集成终端才会显示)
- focus:集成终端显示时是否取得焦点。默认是 false
- echo:被执行的命令是否在集成终端中输出。默认值是 true
- showReuseMessage:是否显示 "Terminal will be reused by tasks, press any key to close it." 提示信息。默认 true
- panel:控制不同的Task运行时是否共享同一个集成终端。shared (默认值) / dedicated / new
- clear:每次 Task 运行前是否清除集成终端的输出。默认 false
- group:控制Task是否在同一个集成终端运行。不同 Task 的 group 属性相同则会复用一个集成终端
6.7.8 运行行为
- reevaluateOnRerun:执行 Rerun Last Task 时,控制是否重新计算变量。默认 true
- runOn:指定何时运行 Task。default / folderOpen
6.7.9 变量替换
- 预定义的变量
-
${workspaceFolder}
:打开的文件夹的完整路径 -
${workspaceFolderBasename}
:打开的文件夹名 -
${file}
:当前打开的文件的完整路径 -
${relativeFile}
:当前打开的文件的相对 workspaceFolder 路径 -
${relativeFileDirname}
:当前打开的文件所在目录相对于 workspaceFolder 的路径 -
${fileBasename}
:当前打开的文件的文件名 -
${fileBasenameNoExternsion}
:当前打开的文件的文件名,不包含扩展名 -
${fileDirname}
:当前打开的文件所在目录的完整路径 -
${fileExtname}
:当前打开文件的扩展名 -
${cwd}
:Task 启动时的工作目录 -
${lineNumber}
:当前光标所在行号 -
${selectedText}
:当前打开的文件中选中的文本 -
${execPath}
:Visual Studio Code 可执行文件的完整路径 -
${defaultBuildTask}
:默认的 Build Task 的名字
-
环境变量
${env:NAME}
可以引用环境变量,如${env:USERNAME}
-
配置变量
${config:NAME}
可以引用 Visual Studio Code 的设置项。
如${config:python.pythonPath}
将会引用 Python插件的 pythonPath 设置值 -
输入变量
${input:variableID}
,variableID 引用了 tasks.json 文件中的 inputs 部分的配置内容
{
"version": "2.0.0",
"tasks": [
{
"label": "Run tasks",
"type": "shell",
"command": "${input:id}"
}
],
"inputs": [
{
"id": "id",
"type": "pickString",
"description": "Select a task to run",
"options": [
"echo hello",
"echo world"
]
}
]
}
Visual Studio Code 支持以下3种类型的输入变量:
- promptString:展示输入框,并获得用户输入的字符串。
- "description":在文本输入框中展示的描述信息
- "default":输入的默认值
- pickString:展示一个下拉列表
- "description":在文本输入框中展示的描述信息
- "options":选项数组
- "default":输入的默认值,值必须是下拉列表选项中的一个
- command:运行任意的命令
- "command":要运行的命令
- "args":运行命令的参数(可选)
6.8 Multi-root Workspaces
6.9 调试与运行
6.9.5 launch.json调试配置
{
"version": "2.0.0",
"configurations": [
{
"type": "node",
"request": "launch", // or "attach" 附加到一个正在运行的进程中调试
"name": "Launch Program",
// 可选属性
"presentation": "order", // 用于控制调试视图的排列顺序
"preLaunchTask": "npm: build", // 在调试之前运行的任务
"postDebugTask": "npm: test", // 在调试之后运行的任务
"internalConsoleOptions": "neverOpen", // 控制调试控制台的行为
"serverReadyAction": { // 用于控制调试器何时开始调试
"action": "openExternally", // 打开一个外部浏览器
"pattern": "http://localhost:8080", // 用于匹配的正则表达式
"uriFormat": "http://localhost:8080", // 用于打开的URL
"matchIsRegex": true // 是否使用正则表达式
},
// 绝大多数调试器插件支持以下属性
"program": "${workspaceFolder}/index.js",
"args": ["--color"],
"cwd": "${workspaceFolder}", // 工作目录,默认为${workspaceFolder}
"env": { "NODE_ENV": "development" },
"port": 9229,
"stopOnEntry": false,
"console": "integratedTerminal", // 控制调试控制台的行为,可选值:integratedTerminal、externalTerminal、internalConsole、none
}
]
}
6.9.7 变量替换
类似 6.7.9节
6.9.10 多目标调试
在 launch.json 文件中,可以通过 compound 属性配置多目标调试
{
"version": "2.0.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 and Client",
"configurations": ["Server", "Client"],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
网友评论