VS Code Tips and Tricks 官方指南 - 中文翻译版
注：本文由X-hung个人翻译，仅供那些想要使用VSCode但英文却不好或者不想读英文参考的朋友。任何人可自由编辑此文档。版权归Visual Studio Code官方所有。 This Chinese translation version is translated by X-hung, Everybody can edit it if you have better suggestions. Thanks.
- 基础 Basics
- 个性化 Customization
- 扩展 Extensions
- 文件（夹）管理 File and folder management
- 编辑技巧 Editing hacks
- 智能填充 IntelliSense
- 代码片段 Snippets
- Git集成 Git integration
- 调试 Debugging
- 运行 Task runner
- 其他资源 Other Resources
下文所使用的快捷键可能无法与最新版本精准匹配，点击这里查看最新的快捷键参考. The key bindings below may or may not be accurate with the latest build. See here for the latest keyboard shortcut reference.
VS Code团队使用内测版本来测试最新版的功能以及修复Bug。您可以在这里下载相同的测试版 The Visual Studio Code team uses the Insiders version to test the latest features and bug fixes of VS Code. You can use this same version by downloading here.
- 对于早期使用者 - 测试版提供最新更改的代码，这将会导致一些偶然的Build失败。
- 高频率Build - 每天都有新的Build，提供最新的Bug修复和新功能。
- 并排安装 - 测试版发布后，稳定版也会随后发布，使您不至于独立的使用两个版本。
- For Early Adopters - Insiders has the most recent code changes and may lead to the occasional broken build.
- Frequent Builds - New builds everyday with the latest bug fixes and features.
- Side-by-side install - Insiders installs next to the Stable build allowing you to use either independently.
打开欢迎使用页面开始学习VS Code的基本用法。帮助 > 欢迎使用. Open the Welcome page to get started with the basics of VS Code. Help > Welcome.
包括交互式演练场 Includes the Interactive Playground.
根据您当前打开的内容来获取所有可用命令 Access all available commands based on your current context.
Mac: cmd+shift+p or f1
Windows / Linux: ctrl+shift+p or f1
所有命令面板的命令都能使用与之绑定的快捷键操作（如果存在的话）。如果您忘了要使用哪个快捷键，可以打开命令面板找一找。 All of the commands are in the Command Palette with the associated key binding (if it exists). If you forget what the key binding is use the Command Palette to help you out.
快速打开文件。 Quickly open files.
Mac: cmd+p
Windows / Linux: ctrl+p
提示： 输入“？”来查看帮助建议。 Tip: Type "?" to view help suggestions.
重复使用快速打开快捷键在最近打开的文件之间快速循环浏览。 Repeat the Quick Open keyboard shortcut to cycle quickly between recently opened files.
您可以使用快速打开中的右方向键来快速打开多个文件。这将在后台打开当前选定的文件，此时您可以使用快速打开继续选择文件。 You can open multiple files from Quick Open by pressing the Right arrow key. This will open the currently selected file in the background and you can continue selecting files from Quick Open.
Mac系统: 往下看. Mac: see below.
打开命令面板 (F1) 输入“shell command” 敲击回车键执行 Shell Command: Install 'code' command in PATH. Open the Command Palette (F1) and type "shell command". Hit enter to execute Shell Command: Install 'code' command in PATH.
# 在当前目录打开代码 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
# 打开diff编辑器 open diff editor
code --diff <file1> <file2>
# 查看帮助选项 see help options
code --help
# 禁用所有扩展部件 disable all extensions
code --disable-extensions .
工作区的特殊文件都是以.vscode为后缀。比如说，tasks.json 用来设置运行程序，launch.json 用来设置调试程序。
Workspace specific files are in .vscode. For example, tasks.json for the Task Runner and launch.json for the debugger.
错误和警告 Errors and Warnings
Mac: shift+cmd+m
Windows / Linux: ctrl+shift+m
快速跳转至项目中的错误和警告行。 Quickly jump to errors and warnings in the project.
使用f8 或者 shift+f8在错误行中来回浏览。 Cycle through errors with f8 or shift+f8
您可以输入 ('errors', 'warnings') 或者文本匹配来过滤问题信息。 You can filter problems by type ('errors', 'warnings') or text matching.
更改语言模式 Change language mode
Mac: cmd+k m
Windows / Linux: ctrl+k m
如果要保留该文件类型的新语言模式，可以使用关联配置文件... 命令将当前文件扩展名与已安装语言相关联。 If you want to persist the new language mode for that file type, you can use the Configure File Association for ... command to associate the current file extension with an installed language.
这里有许多方法让您个性化定制VS Code。 There are many things you can do to customize VS Code.
- 更改主题 Change your theme
- 更改键盘快捷键 Change your keyboard shortcuts
- 调整设置 Tune your settings
- 添加JSON验证文件 Add JSON validation
- 创建代码片段 Create snippets
- 安装扩展部件 Install extensions
Check out the full documentation.
打开命令面板输入“主题”，您可以从扩展商店获取更多主题。 Open the Command Palette and type "themes". You can install more themes from the extension Marketplace.
此外，您还可以安装或改变文件图标。 Additionally, you can install and change your File Icon themes.
下载适用您的系统的键盘快捷键参考图：(macOS, Windows, Linux)。 Download the keyboard shortcut reference sheet for your platform (macOS, Windows, Linux).
您是否习惯了其他编辑器的快捷键方式？在这里您可以安装一个键盘布局扩展来把您喜爱的编辑器的快捷键方式迁移至VS Code。打开首选项 > 键盘扩展 查看扩展商店里提供的快捷键扩展。 Are you used to keyboard shortcuts from another editor? You can install a Keymap extension that brings the keyboard shortcuts from your favorite editor to VS Code. Go to Preferences > Keymap Extensions to see the current list on the Marketplace.
看一看比较受欢迎的几个： Some of the more popular ones:
打开命令面板 输入“快捷键”。您可以在打开的文件的右侧添加新的快捷键方式。 Open the Command Palette and type "keyboard shortcuts." You can now add your own keybindings in the file on the right.
更多请参见：Key Bindings for Visual Studio Code. See more in Key Bindings for Visual Studio Code.
打开settings.json
Open settings.json
Mac: cmd+,
Windows / Linux: File > Preferences > Settings
粘贴格式 Format on paste
"editor.formatOnPaste": true更改字体大小 Change the font size
"editor.fontSize": 18更改缩放级别 Change the zoom level
"window.zoomLevel": 5英文连字功能 Font ligatures
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true提示: 您可能需要安装支持连字功能的字体。 FiraCode 字体在VS Code团队中是比较受欢迎的。 Tip: You will need to have a font installed that supports font ligatures. FiraCode is a popular font on the VS Code team.
自动存档 Auto Save
"files.autoSave": "afterDelay"您还可以使用顶级菜单中的文件> 自动保存打开自动保存 You can also toggle Auto Save from the top-level menu with the File > Auto Save.
保存格式 Format on save
"editor.formatOnSave": true,改变缩进字符数 Change the size of tab characters
"editor.tabSize": 4缩进改空格 Spaces or tabs
"editor.insertSpaces": true空白渲染 Render whitespace
"editor.renderWhitespace": "all"忽略文件（夹）Ignore files / folders
从编辑窗口里删除这些文件（夹） Removes these files / folders from your editor window.
"files.exclude": {
"somefolder/": true,
"somefile": true
}从搜索结果中删除这些文件（夹） Remove these files / folders from search results.
"search.exclude": {
"someFolder/": true,
"somefile": true
}只给一些特定的语言添加设置 For those settings you only want for specific languages.
"[languageid]": {
}提示: 您可以在命令面板中输入“更改语言特定设置”来获取语言的ID。 Tip: You can find the language ID by typing in the Command Palette "Configure language specific settings"
为大多数文件启用默认设置。您可以在settings.json中添加自己的模式和验证
Enabled by default for many files. Create your own schema and validation in settings.json
"json.schemas": [
{
"fileMatch": [
"/bower.json"
],
"url": "http://json.schemastore.org/bower"
}
]或者在您的工作区中定义的模式 or for a schema defined in your workspace
"json.schemas": [
{
"fileMatch": [
"/foo.json"
],
"url": "./myschema.json"
}
]或者自定义模式 or a custom schema
"json.schemas": [
{
"fileMatch": [
"/.myconfig"
],
"schema": {
"type": "object",
"properties": {
"name" : {
"type": "string",
"description": "The name of the entry"
}
}
}
},在文档中查看更多。 See more in the documentation.
- 在VS Code的扩展商店里查看 In the VS Code Marketplace.
- 在VS Code中直接搜索 Search inside VS Code
- 查看扩展推荐 View extension recommendations
- 社区策划的扩展列表，如awesome-vscode Community curated extension lists, such as awesome-vscode.
打开扩展栏，您可以通过搜索框搜索或者点击更多（...）按钮来根据安装量过滤或排序扩展部件。 Click the Extensions Activity Bar button. You can search via the search bar or click the More (...) button to filter and sort by install count.
打开扩展栏，接着在更多（...）里点击推荐。 Click the Extensions Activity Bar button. Then click Show Recommended Extensions in the More (...) button menu.
您对自建扩展感兴趣吗？您可以在这份文档中学习如何自己创建扩展部件。具体参见documentation on contribution points。 Are you interested in creating your own extension? You can learn how to do this in the documentation, specifically check out the documentation on contribution points.
- 设置 configuration
- 命令 commands
- 快捷键 keybindings
- 语言 languages
- 调试 debuggers
- 语法 grammars
- 主题 themes
- 代码片段 Snippets snippets
- JSON验证 jsonValidation
Windows / Linux / Mac: ctrl+`
查看更多： Further reading:
使用 cmd+, 打开 settings.json
Open settings.json with cmd+,
"files.autoSave": "afterDelay"您还可以使用顶级菜单中的文件> 自动保存打开自动保存 You can also toggle Auto Save from the top-level menu with the File > Auto Save.
Mac: cmd+b
Windows / Linux: ctrl+b
Mac: cmd+k z
Windows / Linux: ctrl+k z
进入不会让您分心的禅模式。 Enter distraction free Zen mode.
Mac: cmd+\ or cmd then click a file from the File Explorer.
Windows / Linux: ctrl+\
Linux: ctrl+2
您可以拖放编辑器来创建新的编辑器组并且在组与组之间移动编辑器。 You can use drag and drop editors to create new editor groups and move editors between groups.
Mac: cmd+1, cmd+2, cmd+3
Windows / Linux: ctrl+1, ctrl+2, ctrl+3
Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e
Mac: cmd+click
Windows / Linux: ctrl+click
Mac: cmd+w
Windows / Linux: ctrl+k f
使用ctrl+tab浏览全部历史纪录 Navigate entire history with ctrl+tab
向下浏览 Navigate back.
Mac: ctrl+-
Windows / Linux: alt+left
向上浏览 Navigate Forward.
Mac: ctrl+shift+-
Windows / Linux: alt+right
Mac: cmd+e or cmd+p
Windows / Linux: ctrl+e or ctrl+p
为没有准确检测到的文件创建语言关联（例如，许多配置文件是JSON格式）。 Create language associations for files that aren't detected accurately (for example, many config files are JSON).
"file.associations": {
".database": "json"
}以下是常见编辑代码的功能选择。如果您觉得这些组合快捷键用得不舒服，可以考虑安装一个Keymap extension。 Here are a selection of common features for editing code. If the keyboard shortcuts aren't comfortable for you, consider installing a Keymap extension for your old editor.
Mac: opt+cmd+up or opt+cmd+down
Windows: ctrl+alt+up or ctrl+alt+down
Linux: alt+shift+up or alt+shift+down
在当前的选择上添加更多光标 Add more cursors to current selection.
Mac: ctrl+j
Windows / Linux: 默认没有绑定快捷键。 打开键盘快捷方式设置，在
editor.action.joinLines中绑定一个您自己的快捷键设置。 Windows / Linux: Not bound by default. Open Keyboard Shortcuts and bindeditor.action.joinLinesto a shortcut of your choice.
Mac: opt+shift+up or opt+shift+down
Windows / Linux(Issue #5363): shift+alt+down or shift+alt+up
更多参见documentation More in documentation
Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right
Windows / Linux: shift+alt+left or shift+alt+right
Mac: cmd+shift+o
Windows / Linux: ctrl+shift+o
您可以通过添加冒号@:来分类符号。
You can group the symbols by kind by adding a colon, @:.
Mac: cmd+t
Windows / Linux: ctrl+t
Mac: ctrl+g or cmd+p, :
Windows / Linux: ctrl+g
Mac: cmd+u
Windows / Linux: ctrl+u
Mac: opt+up or opt+down
Windows / Linux: alt+up or alt+down
Mac: cmd+k cmd+x
Windows / Linux: ctrl+k ctrl+x
Mac: cmd+k, cmd+f
Windows / Linux: ctrl+k, ctrl+f
Windows / Linux: shift+alt+f
Mac: shift+cmd+[ and shift+cmd+]
Windows / Linux: ctrl+shift+[ and ctrl+shift+]
Mac: cmd+i
Windows / Linux: ctrl+i
Mac: cmd+up and cmd+down
Windows: ctrl+up and ctrl+down
Linux: ctrl+home and ctrl+end
在Markdown文件中，使用 In a Markdown file, use
Mac: shift+cmd+v
Windows / Linux: ctrl+shift+v
在Markdown文件中，使用 In a Markdown file, use
Mac: cmd+k v
Windows / Linux: ctrl+k v
彩蛋：预览此时会同步进行 Special bonus: The preview will now sync.
在任何时候，使用ctrl+space来触发建议插件 Anytime, try ctrl+space to trigger the Suggestions widget.
您可以查看可用的方法，参数提示，短文档等。 You can view available methods, parameter hints, short documentation, etc.
选择一个符号，接着按下alt+f12。或者，您可以使用上下文菜单。 Select a symbol then type alt+f12. Alternatively, you can use the context menu.
选择一个符号，接着按下f12。或者，您可以使用上下文菜单。 Select a symbol then type f12. Alternatively, you can use the context menu or ctrl+click (cmd+click on macOS).
您可以使用转到 > 后退 命令或者 alt+left (Mac OS中使用 ctrl+- )返回到之前的位置。 You can go back to your previous location with the Go > Back command or alt+left (ctrl+- on macOS).
选择一个符号，接着按下shift+f12。或者，您可以使用上下文菜单。 Select a symbol then type shift+f12. Alternatively, you can use the context menu.
选择一个符号，接着按下f2。或者，您可以使用上下文菜单。 Select a symbol then type f2. Alternatively, you can use the context menu.
安装ESLint 扩展，按照您喜欢的方式设置。详见这里。 Install the ESLint extension. Configure your linter however you'd like. Specification is here.
下面是使用ES6的配置 Here is configuration to use ES6.
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"classes": true,
"defaultParams": true
}
},
"rules": {
"no-const-assign": 1,
"no-extra-semi": 0,
"semi": 0,
"no-fallthrough": 0,
"no-empty": 0,
"no-mixed-spaces-and-tabs": 0,
"no-redeclare": 0,
"no-this-before-super": 1,
"no-undef": 1,
"no-unreachable": 1,
"no-use-before-define": 0,
"constructor-super": 1,
"curly": 0,
"eqeqeq": 0,
"func-names": 0,
"valid-typeof": 1
}
}在package.json文件中查看智能填充设置
See IntelliSense for your package.json file.
文件 > 首选项 > 用户代码片段，选择一种语言并创建新的代码片段
File > Preferences > User Snippets, select the language, and create a snippet.
"create component": {
"prefix": "component",
"body": [
"class $1 extends React.Component {",
"",
" render() {",
" return ($2);",
" }",
"",
"}"
]
},详情参见Creating your own Snippets。 See more details in Creating your own Snippets.
Git集成带有VS Code中的“in-the-box”。您可以从扩展商店中安装其他SCM提供程序。本节仅介绍Git集成。其他的SCM提供了更多的UI和手势。 Git integration comes with VS Code "in-the-box". You can install other SCM provider from the extension Marketplace. This section describes the Git integration but much of the UI and gestures are shared by other SCM providers.
点击侧边栏的源代码管理按钮，接着选择文件来diff。 Click the Source Control button in the Activity Bar then select the file to diff.
并排窗口 Side by side
默认的是并排Diff。 Default is side by side diff.
在行内查看 Inline view
在窗口顶部右侧点击更多（...） > 切换为行内查看切换至行内查看模式 Toggle inline view by clicking the More (...) button in the top right and selecting Switch to Inline View.
如果您偏好行内查看，可以设置"diffEditor.renderSideBySide": false。
If you prefer the inline view, you can set "diffEditor.renderSideBySide": false.
审查窗格 Review Pane
按F7 和 Shift+F7在diff中导航。这将以统一的补丁格式呈现。使用方向键在行与行之间转换，按下 Enter 键会跳转回diff编辑器并定位到选择的行。
Navigate through diffs with F7 and Shift+F7. This will present them in a unified patch format.
Lines can be navigated with arrow keys and pressing Enter will jump back in the diff editor and the selected line.
编辑待更改的文件 Edit pending changes
您可以在diff模式下直接编辑待更改的文件。 You can make edits directly in the pending changes of the diff view.
通过底部状态栏的按钮轻松地切换Git分支。 Easily switch between Git branches via the Status Bar.
选择全部 Stage all
将鼠标悬停在文件编号上，然后单击加号按钮。 Hover over the number of files and click the plus button.
选择部分 Stage selected
选择该文件（使用方向键），然后从命令面板中选择**Stage Selected Range（部分选择范围）**来选择文件的一部分。 Stage a portion of a file by selecting that file (using the arrows) and then choosing Stage Selected Ranges from the Command Palette.
在VS Code中可以轻松地查看Git实际正在运行的每一条指令。这对正在学习Git或者Debug一个不同源的问题很有用。 VS Code makes it easy to see what Git commands are actually running. This is helpful when learning Git or debugging a difficult source control issue.
Mac: shift+cmd+u
Windows / Linux: ctrl+shift+u
运行toggleOutput. 在下拉菜单中选择Git
to run toggleOutput. Select Git in the drop-down.
查看编辑器中的diff修饰。详情参见该文档 View diff decorations in editor. See documentation for more details.
在合并时，点击侧边栏的源代码管理按钮，在Diff模式下更改。 During a merge, click the Source Control button in the Activity Bar and make changes in the diff view.
git config --global merge.tool codef1 and select Debug: Open launch.json, select the environment. This will generate a launch.json file. Works out of the box as expected for Node.js and other environments. May need some additional configuration for other languages. See documentation for more details.
在行号旁边放置断点， 使用“调试”窗口小部件向下导航。 Place breakpoints next to the line number. Navigate forward with the Debug widget.
在控制台中的调试控制台面板查看数据检查。 Inspect variables in the Debug panels and in the console.
您可以设置"debug.inlineValues": true来在调试器的行内查看变量值。这是一个试验功能，默认是关闭的。
You can set "debug.inlineValues": true to see variable values inline in the debugger. This feature is experimental and disabled by default.
选择顶部菜单栏中的任务 > 配置任务...，接着选择您想要运行的任务类型。此操作会生成一个名为task.json 的配置文件，就像下面显示的内容一样。更多内容参见此文档。
Select Tasks from the top-level menu, run the command Configure Tasks..., then select the type of task you'd like to run.
This will generate a task.json file with content like the following. See the Tasks documentation for more details.
{
// See http://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"showOutput": "always",
"suppressTaskName": true,
"tasks": [
{
"taskName": "install",
"args": ["install"]
},
{
"taskName": "build",
"args": ["run", "build"]
}
]
}此处偶尔会出现有关自动生成的问题。查看文档来获取合适的方法。 There are occasionally issues with auto generation. Check out the documentation for getting things to work properly.
从顶部菜单栏选择任务 > 运行任务...，接着选择您想要运行的任务。此外还可以使用终止任务... 选项来终止任务的运行。 Select Tasks from the top-level menu, run the command Run Task..., and select the task you want to run. Terminate the running task by running the command Terminate Task...
