├── media ├── peek.gif ├── JoinLines.gif ├── QuickOpen.gif ├── command_p.png ├── git_icon.png ├── move_line.gif ├── zen_mode.gif ├── code_folding.gif ├── emmet_syntax.gif ├── git_inline.png ├── intellisense.gif ├── more_button.png ├── multi_cursor.gif ├── node_debug.gif ├── split_editor.gif ├── task_runner.gif ├── welcome_page.png ├── PreviewThemes.gif ├── change_syntax.gif ├── copy_line_down.gif ├── copy_paste_mp.gif ├── find_by_symbol.gif ├── font-ligatures.png ├── git_stage_all.gif ├── mp_copy_paste.png ├── preview_themes.gif ├── rename_symbol.gif ├── toggle_preview.gif ├── Errors_Warnings.gif ├── InstallExtensions.gif ├── KeyboardShortcuts.gif ├── bracket_matching.gif ├── code_formatting.gif ├── configure_debug.gif ├── create_open_file.gif ├── diff_review_pane.png ├── extension_actions.png ├── git_side_by_side.png ├── goto_definition.gif ├── install_extension.gif ├── navigate_editors.gif ├── navigate_history.gif ├── navigate_to_file.gif ├── navigate_to_line.gif ├── switch_branches.gif ├── toggle_side_bar.gif ├── trim_whitespace.gif ├── undo_last_commit.gif ├── OpenCommandPalatte.gif ├── beginning_end_file.gif ├── find_all_references.gif ├── git_stage_selected.gif ├── integrated_terminal.png ├── keyboard-references.png ├── lang-based-settings.png ├── select_current_line.gif ├── setup_shell-command.png ├── uninstall_extension.gif ├── vscode-cli-commands.png ├── KeyboardReferenceSheet.png ├── PreviewFileIconThemes.gif ├── debug_data_inspection.gif ├── editingevolved_gutter.png ├── group_symbols_by_kind.png ├── interactive_playground.png ├── markdown-preview-sync.gif ├── open-command-palatte.gif ├── side-by-side-install.png ├── status_errors_warnings.png ├── undo_cursor_position.gif ├── font-ligatures-annotated.png ├── shrink_expand_selection.gif ├── ShowRecommendedExtensions.gif ├── editingevolved_multicursor.gif ├── go_to_symbol_in_workspace.png ├── package_json_intellisense.gif └── add_cursor_current_selection.gif ├── LICENSE ├── README.md └── README_EN.md /media/peek.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/peek.gif -------------------------------------------------------------------------------- /media/JoinLines.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/JoinLines.gif -------------------------------------------------------------------------------- /media/QuickOpen.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/QuickOpen.gif -------------------------------------------------------------------------------- /media/command_p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/command_p.png -------------------------------------------------------------------------------- /media/git_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/git_icon.png -------------------------------------------------------------------------------- /media/move_line.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/move_line.gif -------------------------------------------------------------------------------- /media/zen_mode.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/zen_mode.gif -------------------------------------------------------------------------------- /media/code_folding.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/code_folding.gif -------------------------------------------------------------------------------- /media/emmet_syntax.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/emmet_syntax.gif -------------------------------------------------------------------------------- /media/git_inline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/git_inline.png -------------------------------------------------------------------------------- /media/intellisense.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/intellisense.gif -------------------------------------------------------------------------------- /media/more_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/more_button.png -------------------------------------------------------------------------------- /media/multi_cursor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/multi_cursor.gif -------------------------------------------------------------------------------- /media/node_debug.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/node_debug.gif -------------------------------------------------------------------------------- /media/split_editor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/split_editor.gif -------------------------------------------------------------------------------- /media/task_runner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/task_runner.gif -------------------------------------------------------------------------------- /media/welcome_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/welcome_page.png -------------------------------------------------------------------------------- /media/PreviewThemes.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/PreviewThemes.gif -------------------------------------------------------------------------------- /media/change_syntax.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/change_syntax.gif -------------------------------------------------------------------------------- /media/copy_line_down.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/copy_line_down.gif -------------------------------------------------------------------------------- /media/copy_paste_mp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/copy_paste_mp.gif -------------------------------------------------------------------------------- /media/find_by_symbol.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/find_by_symbol.gif -------------------------------------------------------------------------------- /media/font-ligatures.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/font-ligatures.png -------------------------------------------------------------------------------- /media/git_stage_all.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/git_stage_all.gif -------------------------------------------------------------------------------- /media/mp_copy_paste.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/mp_copy_paste.png -------------------------------------------------------------------------------- /media/preview_themes.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/preview_themes.gif -------------------------------------------------------------------------------- /media/rename_symbol.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/rename_symbol.gif -------------------------------------------------------------------------------- /media/toggle_preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/toggle_preview.gif -------------------------------------------------------------------------------- /media/Errors_Warnings.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/Errors_Warnings.gif -------------------------------------------------------------------------------- /media/InstallExtensions.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/InstallExtensions.gif -------------------------------------------------------------------------------- /media/KeyboardShortcuts.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/KeyboardShortcuts.gif -------------------------------------------------------------------------------- /media/bracket_matching.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/bracket_matching.gif -------------------------------------------------------------------------------- /media/code_formatting.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/code_formatting.gif -------------------------------------------------------------------------------- /media/configure_debug.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/configure_debug.gif -------------------------------------------------------------------------------- /media/create_open_file.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/create_open_file.gif -------------------------------------------------------------------------------- /media/diff_review_pane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/diff_review_pane.png -------------------------------------------------------------------------------- /media/extension_actions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/extension_actions.png -------------------------------------------------------------------------------- /media/git_side_by_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/git_side_by_side.png -------------------------------------------------------------------------------- /media/goto_definition.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/goto_definition.gif -------------------------------------------------------------------------------- /media/install_extension.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/install_extension.gif -------------------------------------------------------------------------------- /media/navigate_editors.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/navigate_editors.gif -------------------------------------------------------------------------------- /media/navigate_history.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/navigate_history.gif -------------------------------------------------------------------------------- /media/navigate_to_file.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/navigate_to_file.gif -------------------------------------------------------------------------------- /media/navigate_to_line.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/navigate_to_line.gif -------------------------------------------------------------------------------- /media/switch_branches.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/switch_branches.gif -------------------------------------------------------------------------------- /media/toggle_side_bar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/toggle_side_bar.gif -------------------------------------------------------------------------------- /media/trim_whitespace.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/trim_whitespace.gif -------------------------------------------------------------------------------- /media/undo_last_commit.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/undo_last_commit.gif -------------------------------------------------------------------------------- /media/OpenCommandPalatte.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/OpenCommandPalatte.gif -------------------------------------------------------------------------------- /media/beginning_end_file.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/beginning_end_file.gif -------------------------------------------------------------------------------- /media/find_all_references.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/find_all_references.gif -------------------------------------------------------------------------------- /media/git_stage_selected.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/git_stage_selected.gif -------------------------------------------------------------------------------- /media/integrated_terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/integrated_terminal.png -------------------------------------------------------------------------------- /media/keyboard-references.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/keyboard-references.png -------------------------------------------------------------------------------- /media/lang-based-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/lang-based-settings.png -------------------------------------------------------------------------------- /media/select_current_line.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/select_current_line.gif -------------------------------------------------------------------------------- /media/setup_shell-command.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/setup_shell-command.png -------------------------------------------------------------------------------- /media/uninstall_extension.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/uninstall_extension.gif -------------------------------------------------------------------------------- /media/vscode-cli-commands.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/vscode-cli-commands.png -------------------------------------------------------------------------------- /media/KeyboardReferenceSheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/KeyboardReferenceSheet.png -------------------------------------------------------------------------------- /media/PreviewFileIconThemes.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/PreviewFileIconThemes.gif -------------------------------------------------------------------------------- /media/debug_data_inspection.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/debug_data_inspection.gif -------------------------------------------------------------------------------- /media/editingevolved_gutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/editingevolved_gutter.png -------------------------------------------------------------------------------- /media/group_symbols_by_kind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/group_symbols_by_kind.png -------------------------------------------------------------------------------- /media/interactive_playground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/interactive_playground.png -------------------------------------------------------------------------------- /media/markdown-preview-sync.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/markdown-preview-sync.gif -------------------------------------------------------------------------------- /media/open-command-palatte.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/open-command-palatte.gif -------------------------------------------------------------------------------- /media/side-by-side-install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/side-by-side-install.png -------------------------------------------------------------------------------- /media/status_errors_warnings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/status_errors_warnings.png -------------------------------------------------------------------------------- /media/undo_cursor_position.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/undo_cursor_position.gif -------------------------------------------------------------------------------- /media/font-ligatures-annotated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/font-ligatures-annotated.png -------------------------------------------------------------------------------- /media/shrink_expand_selection.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/shrink_expand_selection.gif -------------------------------------------------------------------------------- /media/ShowRecommendedExtensions.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/ShowRecommendedExtensions.gif -------------------------------------------------------------------------------- /media/editingevolved_multicursor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/editingevolved_multicursor.gif -------------------------------------------------------------------------------- /media/go_to_symbol_in_workspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/go_to_symbol_in_workspace.png -------------------------------------------------------------------------------- /media/package_json_intellisense.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/package_json_intellisense.gif -------------------------------------------------------------------------------- /media/add_cursor_current_selection.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auspbro/vscode-tips-and-tricks-cn/HEAD/media/add_cursor_current_selection.gif -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Xiang Xue 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # [VS Code](https://code.visualstudio.com) 提升编码效率的技巧集 3 | 4 | > 英文版请参考 [VS Code Tips and Tricks](https://github.com/auspbro/vscode-tips-and-tricks-cn/blob/master/README_EN.md) 5 | 6 | > 文中内容提到的快捷键操作有可能和最新版本有所出入，最新版本的键盘快捷键请参考[这里](https://code.visualstudio.com/docs/getstarted/keybindings) 7 | 8 | # 内容目录 9 | 10 | 1. 基本 11 | 2. 自定义 12 | 3. 插件扩展 13 | 4. 文件及文件夹管理 14 | 5. 进阶编辑 15 | 6. 智能提示 16 | 7. 创建代码片段 17 | 8. Git 集成 18 | 9. 调试 19 | 10. 运行任务 20 | 11. 其他资源 21 | 22 | 23 | # 基本 24 | 25 | ## VS Code 内部测试版本 26 | 27 | Visual Studio Code 开发团队使用内测版用于测试 VS Code 最新功能及便于 bug 修复。内测版可以在[这里](https://code.visualstudio.com/insiders)下载。 28 | 29 | * 对早期使用者而言 - 内测版的代码更新比较快可能会导致各种 bug。 30 | * 频繁的版本更新 - 频繁更新开发版会修复最近的 bug 和提供新的功能尝鲜。 31 | * 多版本共存安装 - 内测版和稳定版可以同步安装到系统并且独立使用互不影响。 32 | 33 | ![多版本共存安装](/media/side-by-side-install.png) 34 | 35 | ## 准备开始 36 | 37 | 打开**欢迎**页面进入 VS Code 大门。 **帮助** > **欢迎**。 38 | 39 | ![欢迎页面](/media/welcome_page.png) 40 | 41 | 欢迎页面有**交互式演练场**用于互动演示 VS Code 的一些功能 42 | 43 | ![interactive playground](/media/interactive_playground.png) 44 | 45 | ## 命令面板 46 | 47 | 命令面板可以基于当前输入的内容访问所有提供的命令入口 48 | 49 | > Mac: cmd+shift+p or f1 50 | 51 | > Windows / Linux: ctrl+shift+p or f1 52 | 53 | ![命令面板](/media/OpenCommandPalatte.gif) 54 | 55 | ## 组合键参考 56 | 57 | 在**命令面板**中的所有命令都有与之对应的快捷键（如果有的话）。如果你忘记快捷键是什么，可以打开**命令面板**来查看。 58 | 59 | ![keyboard references](/media/keyboard-references.png) 60 | 61 | ## 快捷开启 62 | 63 | 快速的打开文件和运行相关命令(操作如下) 64 | > Mac: cmd+p 65 | 66 | > Windows / Linux: ctrl+p 67 | 68 | ![Quick Open](/media/QuickOpen.gif) 69 | 70 | > **提示:** 输入 "?" 查看帮助 71 | 72 | ### 在最近打开过的文件之间切换 73 | 74 | 重复按下**快捷开启**快捷键会重复在最近打开过的文件之间切换 75 | 76 | ### 使用快捷开启打开多个文件 77 | 78 | 你可以通过**快捷开启**方式按下键盘右键在后台打开当前项目的多个文件。 79 | 80 | ## CLI 工具 81 | 82 | > Linux: 请参考[这里](https://code.visualstudio.com/docs/editor/setup#_linux)。 83 | 84 | > Windows: 请参考[这里](https://code.visualstudio.com/docs/editor/setup#_windows)。 85 | 86 | > Mac: 请参考以下 87 | 88 | 打开 **命令面板** (F1) 输入 "shell command". 敲回车执行 **Shell 指令: 安装 'code' 指令到环境变量**. 89 | 90 | ![shell 指令](/media/setup_shell-command.png) 91 | 92 | 93 | ```bash 94 | # 在 VS Code 中打开当前目录 95 | code . 96 | 97 | # 在最近使用过的 VS Code 窗口打开当前目录 98 | code -r . 99 | 100 | # 创建新的窗口 101 | code -n 102 | 103 | # 更改语言 104 | code --locale=es 105 | 106 | # 打开 diff 编辑器比较文件 107 | code --diff 108 | 109 | # 查看帮助选项 110 | code --help 111 | 112 | # 禁用所有扩展 113 | code --disable-extensions . 114 | ``` 115 | 116 | ![all cli commands](/media/vscode-cli-commands.png) 117 | 118 | ## .vscode 文件夹 119 | 120 | 工作区 `.vscode` 中的特殊文件。例如：Task Runner 的 `tasks.json` 和 debugger 的 `launch.json`。 121 | 122 | ## 状态栏 123 | 124 | **错误和警告** 125 | 126 | > Mac: shift+cmd+m 127 | 128 | > Windows / Linux: ctrl+shift+m 129 | 130 | 快速跳转到项目出错和警告的位置,如果是 Markdown 文件按下 ctrl+shift+m 默认是把编辑器拆分成预览窗口。 131 | 132 | 重复切换定位错误 f8 或 shift+f8 133 | 134 | ![errors and warnings](/media/Errors_Warnings.gif) 135 | 136 | 你可以通过输入（'errors','warnings'）或匹配的文本来过滤筛选问题。 137 | 138 | **更换语言模式** 139 | 140 | > Mac: cmd+k m 141 | 142 | > Windows / Linux: ctrl+k m 143 | 144 | ![change syntax](/media/change_syntax.gif) 145 | 146 | 如果你想给文件存留成新的语言模式，可以在编辑器右下角通过**选择语言模式...**命令来关联一个已经安装好的语言到当前文件。 147 | 148 | # 自定义 149 | 150 | 通过自定义 VS Code,你可以做更多事情 151 | 152 | * 更换主题 153 | * 更换键盘快捷键 154 | * 调整设定 155 | * 添加 Json 许可 156 | * 创建代码片段 157 | * 安装扩展 158 | 159 | 查看完整 [文档](https://code.visualstudio.com/docs/getstarted/settings). 160 | 161 | ## 更改主题 162 | 163 | 打开 **命令面板** 输入"themes",你可以在扩展商店安装更多主题。 164 | 165 | ![Preview themes](/media/PreviewThemes.gif) 166 | 167 | 另外你可以安装更改文件图标的主题插件 168 | 169 | ![File icon themes](/media/PreviewFileIconThemes.gif) 170 | 171 | ## 更换键盘快捷键 172 | 173 | ### 键盘快捷键参考文档 174 | 175 | 对应·平台的快捷键参考文档 ([macOS](https://go.microsoft.com/fwlink/?linkid=832143), [Windows](https://go.microsoft.com/fwlink/?linkid=832145), [Linux](https://go.microsoft.com/fwlink/?linkid=832144)). 176 | 177 | ![Keyboard Reference Sheet](/media/KeyboardReferenceSheet.png) 178 | 179 | ### 键映射 180 | 181 | 如果你习惯于某种编辑器的快捷键，可以安装快捷键扩展到 VS Code 来导入你常用的编辑器的快捷键。 选择 **首选项** > **键映射扩展** 去 [扩展商店](https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Downloads) 查看当前列表。 比较流行的一些键迎神插件如下: 182 | 183 | - [Vim](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim) 184 | - [Sublime Text 键映射](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings) 185 | - [Emacs 键映射](https://marketplace.visualstudio.com/items?itemName=hiro-sun.vscode-emacs) 186 | - [Atom 键映射](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings) 187 | 188 | ### 自定义键盘快捷键 189 | 190 | 打开 **命令面板** 输入"keyboard shortcuts" 现在可以在文件的右侧添加你自己的组合键了。 191 | 192 | ![customize keyboard shortcuts](/media/KeyboardShortcuts.gif) 193 | 194 | 查看更多关于 [Visual Studio Code](https://code.visualstudio.com/docs/getstarted/keybindings) 自定义快捷键内容。 195 | 196 | ## 自定义设置· 197 | 198 | 打开 `settings.json` 199 | 200 | > Mac: cmd+, 201 | 202 | > Windows / Linux: **文件** > **首选项** > **设置** 203 | 204 | *Format on paste* 205 | 206 | ```json 207 | "editor.formatOnPaste": true 208 | ``` 209 | 210 | *更改字体大小* 211 | 212 | ```json 213 | "editor.fontSize": 18 214 | ``` 215 | 216 | *更改缩放等级* 217 | 218 | ```json 219 | "window.zoomLevel": 5 220 | ``` 221 | 222 | *font ligatures* 223 | 224 | ```json 225 | "editor.fontFamily": "Fira Code", 226 | "editor.fontLigatures": true 227 | ``` 228 | 229 | > **提示:** 你需要安装一个支持 font ligatures 的字体。 [FiraCode](https://github.com/tonsky/FiraCode) 在 VS Code team 是一个比较受欢迎的字体。 230 | 231 | ![font ligatures](/media/font-ligatures-annotated.png) 232 | 233 | *自动保存* 234 | 235 | ```json 236 | "files.autoSave": "afterDelay" 237 | ``` 238 | 239 | 你也可以在最高级菜单 **文件** > **自动保存** 开启自动保存。 240 | 241 | *Format on save* 242 | 243 | ```json 244 | "editor.formatOnSave": true, 245 | ``` 246 | 247 | *改变缩进的字符长度* 248 | 249 | ```json 250 | "editor.tabSize": 4 251 | ``` 252 | 253 | *空格还是缩进* 254 | 255 | ```json 256 | "editor.insertSpaces": true 257 | ``` 258 | 259 | *Render whitespace* 260 | 261 | ```json 262 | "editor.renderWhitespace": "all" 263 | ``` 264 | 265 | *忽略文件或者文件夹* 266 | 267 | 从编辑器窗口移除这些文件或者文件夹 268 | 269 | ```json 270 | "files.exclude": { 271 | "somefolder/": true, 272 | "somefile": true· 273 | } 274 | ``` 275 | 276 | 从搜索结果中移除这些文件或者文件夹。 277 | 278 | ```json 279 | "search.exclude": { 280 | "someFolder/": true, 281 | "somefile": true 282 | } 283 | ``` 284 | 285 | 还有许多[其他的功能](https://code.visualstudio.com/docs/getstarted/settings)。 286 | 287 | ## 特定的语言设置 288 | 289 | 你可以只为某些特定的语言设置 290 | 291 | ```json 292 | "[languageid]": { 293 | 294 | } 295 | ``` 296 | 297 | > **提示:** 你可以在 **命令面板** 输入 "Configure language specific settings" 找到 language id 298 | 299 | ![language based settings](/media/lang-based-settings.png) 300 | 301 | ## 添加 JSON 认可 302 | 303 | 多数文件默认是启用的，在 `settings.json` 创建你自己的 schema 和 validation。 304 | 305 | ```json 306 | "json.schemas": [ 307 | { 308 | "fileMatch": [ 309 | "/bower.json" 310 | ], 311 | "url": "http://json.schemastore.org/bower" 312 | } 313 | ] 314 | ``` 315 | 316 | 或者在你的工作区定义一个 schema 317 | 318 | ```json 319 | "json.schemas": [ 320 | { 321 | "fileMatch": [ 322 | "/foo.json" 323 | ], 324 | "url": "./myschema.json" 325 | } 326 | ] 327 | ``` 328 | 329 | 或者自定义一个 schema 330 | 331 | ```json 332 | "json.schemas": [ 333 | { 334 | "fileMatch": [ 335 | "/.myconfig" 336 | ], 337 | "schema": { 338 | "type": "object", 339 | "properties": { 340 | "name" : { 341 | "type": "string", 342 | "description": "The name of the entry" 343 | } 344 | } 345 | } 346 | }, 347 | ``` 348 | 349 | 查看更多 [文档](https://code.visualstudio.com/docs/languages/json). 350 | 351 | # 插件扩展 352 | 353 | ## 查找扩展 354 | 355 | 1. 在 VS Code [商店](https://marketplace.visualstudio.com/vscode). 356 | 2. 在 VS Code 内搜索 357 | 3. 查看推荐的扩展 358 | 4. 社区创建的扩张列表，例如 [awesome-vscode](https://github.com/viatsko/awesome-vscode). 359 | 360 | ## 安装扩展 361 | 362 | 点击编辑器左侧活动栏的扩展按钮，然后你可以通过搜索窗口或者点击**更多** (...) 按钮来选择过滤和通过安装计数的排序方式安装想要的扩展。 363 | 364 | ![install extensions](/media/InstallExtensions.gif) 365 | 366 | ## 扩展推荐 367 | 368 | 点击活动栏的扩展按钮，然后点击**更多** (...) 按钮菜单选中**显示推荐的扩展**即可 369 | 370 | ![show recommended extensions](/media/ShowRecommendedExtensions.gif) 371 | 372 | ## 创建自己扩展 373 | 374 | 如果你对创建自己的扩展感兴趣，可以看看这个[文档](https://code.visualstudio.com/docs/extensionAPI/extension-points)。 375 | 376 | * configuration 377 | * commands 378 | * keybindings 379 | * languages 380 | * debuggers 381 | * grammars 382 | * themes 383 | * snippets 384 | * jsonValidation 385 | 386 | # 文件及文件夹管理 387 | 388 | ## 集成终端 389 | 390 | > Windows / Linux / Mac: ctrl+` 391 | 392 | ![Integrated terminal](/media/integrated_terminal.png) 393 | 394 | 进一步了解： 395 | 396 | - [官方文档](https://code.visualstudio.com/docs/editor/integrated-terminal) 397 | - [精通 VS Code 终端的文章](http://www.growingwiththeweb.com/2017/03/mastering-vscodes-terminal.html) 398 | 399 | 400 | ## 自动保存 401 | 402 | 使用 cmd+, 打开 `settings.json` 403 | 404 | ```json 405 | "files.autoSave": "afterDelay" 406 | ``` 407 | 408 | 你也可以在顶层菜单栏通过 **文件** > **自动保存** 来触发自动保存功能。 409 | 410 | ## 触发侧边栏 411 | 412 | > Mac: cmd+b 413 | 414 | > Windows / Linux: ctrl+b 415 | 416 | ![toggle side bar](/media/toggle_side_bar.gif) 417 | 418 | ## 免打扰模式 419 | 420 | > Mac: cmd+k z 421 | 422 | > Windows / Linux: ctrl+k z 423 | 424 | ![zen mode](/media/zen_mode.gif) 425 | 426 | 开启免打扰模式。 427 | 428 | 429 | ## 拆分编辑器 430 | 431 | > Mac: cmd+\\ 或者 cmd 然后从文件管理器点击一个文件 432 | 433 | > Windows / Linux: ctrl+\\ 434 | 435 | > Linux: ctrl+2 436 | 437 | ![split editors](/media/split_editor.gif) 438 | 439 | 你可以使用拖拽的方式来创建新的编辑器组以及在编辑器组之间移动 440 | 441 | ## 在编辑器标签页之间切换 442 | 443 | > Mac: cmd+1, cmd+2, cmd+3 444 | 445 | > Windows / Linux: ctrl+1, ctrl+2, ctrl+3 446 | 447 | ![navigate editors](/media/navigate_editors.gif) 448 | 449 | ## 切换到资源管理窗口 450 | 451 | > Mac: cmd+shift+e 452 | 453 | > Windows / Linux: ctrl+shift+e 454 | 455 | ## 创建并打开一个文件 456 | 457 | > Mac: cmd+click 458 | 459 | > Windows / Linux: ctrl+click 460 | 461 | ![create and open file](/media/create_open_file.gif) 462 | 463 | ## 关闭当前打开的标签页。 464 | 465 | > Mac: cmd+w 466 | 467 | > Windows / Linux: ctrl+k f 468 | 469 | ## 回溯操作历史 470 | 471 | 回溯上一个编辑过的文件 ctrl+tab 472 | 473 | 474 | 回溯历史操作。 475 | 476 | > Mac: ctrl+- 477 | 478 | > Windows / Linux: alt+left 479 | 480 | 向前回溯历史操作。 481 | 482 | > Mac: ctrl+shift+- 483 | 484 | > Windows / Linux: alt+right 485 | 486 | ![navigate history](/media/navigate_history.gif) 487 | 488 | ## 回顾并切换到历史的某个文件 489 | 490 | > Mac: cmd+e 或 cmd+p 491 | 492 | > Windows / Linux: ctrl+e 或 ctrl+p 493 | 494 | ![navigate to file](/media/navigate_to_file.gif) 495 | 496 | ## 文件关联 497 | 498 | 为一些无法准确识别的文件创建语言关联（例如许多 JSON 配置文件）。 499 | 500 | ```json 501 | "file.associations": { 502 | ".database": "json" 503 | } 504 | ``` 505 | 506 | # 进阶编辑 507 | 508 | 这里挑选了一些常见的提高编辑效率的技巧。如果键盘快捷键跟你习惯有冲突，可以考虑安装[键映射](https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Downloads) 扩展。 509 | 510 | ## snippets 提示上下选择 511 | 512 | > Mac: control+n/control+p 或 up/down key 513 | 514 | > Windows: ctrl+n/ctrl+p 或 up/down key 515 | 516 | > Linux: ctrl+n/ctrl+p 或 up/down key 517 | 518 | 519 | ## 插入多光标编辑 520 | 521 | > Mac: opt+cmd+up 或 opt+cmd+down 522 | 523 | > Windows: alt+鼠标左键点选 或 shift+alt+鼠标左键拖动 524 | 525 | > Linux: alt+shift+up 或 alt+shift+down 526 | 527 | ![multi cursor](/media/multi_cursor.gif) 528 | 529 | ![multi cursor second example](/media/editingevolved_multicursor.gif) 530 | 531 | 同时选中所有匹配 532 | > Mac: shift+cmd+l 533 | 534 | > Windows: ctrl+shift+l 535 | 536 | > Linux: ctrl+shift+l 537 | 538 | 选中下一个匹配 539 | > Mac: cmd+d 540 | 541 | > Windows: ctrl+d 542 | 543 | > Linux: ctrl+d 544 | 545 | ![add cursor to all occurrences of current selection](/media/add_cursor_current_selection.gif) 546 | 547 | ## 合并行 548 | 549 | > Mac: ctrl+j 550 | 551 | > Windows / Linux: 默认没有绑定。 打开快捷方式绑定 `editor.action.joinLines` 到你选择的一个快捷键。 552 | 553 | ![Join lines](/media/JoinLines.gif) 554 | 555 | ## 复制当前行到上/下一行 556 | 557 | > Mac: opt+shift+up 或 opt+shift+down 558 | 559 | > Windows / Linux([Issue #5363](https://github.com/Microsoft/vscode/issues/5363)): shift+alt+down or shift+alt+up 560 | 561 | ![copy line down](/media/copy_line_down.gif) 562 | 563 | ## 收缩/展开选择区域 564 | 565 | 更多[文档](https://code.visualstudio.com/docs/editor/editingevolved#_selection-multicursor) 566 | 567 | > Mac: ctrl+shift+cmd+left 或 ctrl+shift+cmd+right 568 | 569 | > Windows / Linux: shift+alt+left 或 shift+alt+right 570 | 571 | ![shrink expand selection](/media/shrink_expand_selection.gif) 572 | 573 | ## 转到文件中的符号 574 | 575 | > Mac: cmd+shift+o 576 | 577 | > Windows / Linux: ctrl+shift+o 578 | 579 | ![Find by symbol](/media/find_by_symbol.gif) 580 | 581 | 你可以添加一个冒号`@:`来分组符号 582 | 583 | ![group symbols by kind](/media/group_symbols_by_kind.png) 584 | 585 | ## 转到工作区中的符号 586 | 587 | > Mac: cmd+t 588 | 589 | > Windows / Linux: ctrl+t 590 | 591 | ![go to symbol in workspace](/media/go_to_symbol_in_workspace.png) 592 | 593 | ## 转到行 594 | 595 | > Mac: ctrl+g or cmd+p, : 596 | 597 | > Windows / Linux: ctrl+g 598 | 599 | ![navigate to line](/media/navigate_to_line.gif) 600 | 601 | ## 撤销光标位 602 | 603 | > Mac: cmd+u 604 | 605 | > Windows / Linux: ctrl+u 606 | 607 | ![undo cursor position](/media/undo_cursor_position.gif) 608 | 609 | ## 当前行向上或下移动 610 | 611 | > Mac: opt+up or opt+down 612 | 613 | > Windows / Linux: alt+up or alt+down 614 | 615 | ![move line up and down](/media/move_line.gif) 616 | 617 | ## 去除行尾空白 618 | 619 | > Mac: cmd+k cmd+x 620 | 621 | > Windows / Linux: ctrl+k ctrl+x 622 | 623 | ![trailing whitespace](/media/trim_whitespace.gif) 624 | 625 | ## 格式化代码 626 | 627 | ### 格式化当前选中的源代码 628 | 629 | > Mac: cmd+k, cmd+f 630 | 631 | > Windows / Linux: ctrl+k, ctrl+f 632 | 633 | ### 格式化当前文档代码 634 | 635 | > Windows / Linux: shift+alt+f 636 | 637 | ![code formatting](/media/code_formatting.gif) 638 | 639 | ## 代码折叠 640 | 641 | > Mac: shift+cmd+\[ 和 shift+cmd+\] 642 | 643 | > Windows / Linux: ctrl+shift+\[ 和 ctrl+shift+\] 644 | 645 | ![code folding](/media/code_folding.gif) 646 | 647 | ## 选中当前行 648 | 649 | > Mac: cmd+i 650 | 651 | > Windows / Linux: ctrl+i 652 | 653 | ![select current line](/media/select_current_line.gif) 654 | 655 | ## 光标跳至行尾 656 | 657 | > Mac: cmd+up 和 cmd+down 658 | 659 | > Windows: ctrl+up 和 ctrl+down 660 | 661 | > Linux: ctrl+home 和 ctrl+end 662 | 663 | ![navigate to beginning and end of file](/media/beginning_end_file.gif) 664 | 665 | ## 开启 Markdown 预览 666 | 667 | 在 Markdown 文件中使用 668 | 669 | > Mac: shift+cmd+v 670 | 671 | > Windows / Linux: ctrl+shift+v 672 | 673 | ![toggle readme preview](/media/toggle_preview.gif) 674 | 675 | ## Markdown 预览 676 | 677 | 在 Markdown 文件中使用 678 | 679 | > Mac: cmd+k v 680 | 681 | > Windows / Linux: ctrl+k v 682 | 683 | 684 | ![markdown sync](/media/markdown-preview-sync.gif) 685 | 686 | # 智能感知 687 | 688 | 一个非常有用的语法高亮和自动完成功能，提供了基于变量类型、函数定义和导入模块的自动补全功能。无论何时，尝试按下 ctrl+space 来触发智能感知小部件功能。 689 | 690 | ![intellisense](/media/intellisense.gif) 691 | 692 | 你可以查看提供的方法，参数提示及短文档等。 693 | 694 | ## 一瞥 695 | 696 | 选择一个符号然后按下 alt+f12，或者你可以使用上下文菜单（Windows 右键菜单）。 697 | 698 | ![peek](/media/peek.gif) 699 | 700 | ## 转到定义 701 | 702 | 选择一个符号然后按下 f12，另外你也可以使用上下文菜单或者 ctrl+click (cmd+click on macOS)。 703 | 704 | 705 | ![go to definition](/media/goto_definition.gif) 706 | 707 | 你可以返回到上一个的位置操作**转到** > **后退** 指令或 alt+left (ctrl+- on macOS)。 708 | 709 | ## 查找所有申明 710 | 711 | 选择一个符号然后按下 shift+f12，或者可以使用环境菜单。 712 | 713 | ![find all references](/media/find_all_references.gif) 714 | 715 | ## 重命名 Symbol 716 | 717 | 选择一个 symbol 然后按下 f2，你也可以使用环境菜单。 718 | 719 | ![rename symbol](/media/rename_symbol.gif) 720 | 721 | ## .eslintrc.json 722 | 723 | 安装 [ESLint 插件](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)。配置你喜欢的 linter，具体请参考[这里](http://eslint.org/docs/user-guide/configuring). 724 | 725 | 下面是使用 ES6 的配置 726 | 727 | ```json 728 | { 729 | "env": { 730 | "browser": true, 731 | "commonjs": true, 732 | "es6": true, 733 | "node": true 734 | }, 735 | "parserOptions": { 736 | "ecmaVersion": 6, 737 | "sourceType": "module", 738 | "ecmaFeatures": { 739 | "jsx": true, 740 | "classes": true, 741 | "defaultParams": true 742 | } 743 | }, 744 | "rules": { 745 | "no-const-assign": 1, 746 | "no-extra-semi": 0, 747 | "semi": 0, 748 | "no-fallthrough": 0, 749 | "no-empty": 0, 750 | "no-mixed-spaces-and-tabs": 0, 751 | "no-redeclare": 0, 752 | "no-this-before-super": 1, 753 | "no-undef": 1, 754 | "no-unreachable": 1, 755 | "no-use-before-define": 0, 756 | "constructor-super": 1, 757 | "curly": 0, 758 | "eqeqeq": 0, 759 | "func-names": 0, 760 | "valid-typeof": 1 761 | } 762 | } 763 | ``` 764 | 765 | ## package.json 766 | 767 | 查看你 `package.json` 文件的智能提示 768 | 769 | ![package json intellisense](/media/package_json_intellisense.gif) 770 | 771 | ## Emmet 语法 772 | 773 | [更多支持 Emmt 的语法](https://code.visualstudio.com/docs/languages/html#_emmet-snippets). 774 | 775 | ![emmet syntax](/media/emmet_syntax.gif) 776 | 777 | # 代码片段 778 | 779 | ## 建立自定义代码片段 780 | 781 | **文件** > **首选项** > **用户代码片段**，选择相关语言建立代码片段。 782 | 783 | ```json 784 | "create component": { 785 | "prefix": "component", 786 | "body": [ 787 | "class $1 extends React.Component {", 788 | "", 789 | " render() {", 790 | " return ($2);", 791 | " }", 792 | "", 793 | "}" 794 | ] 795 | }, 796 | ``` 797 | 798 | 查看更多详细内容关于 [建立用户代码片段](https://code.visualstudio.com/docs/editor/userdefinedsnippets)。 799 | 800 | # Git 集成 801 | 802 | VS Code 默认内部集成 Git ，你也可以在扩展商店安装其他的源码版本管理系统。这一部分只作 VS Code 内部集成的 Git 介绍，其他源码版本管理工具也可参考，大同小异而已。 803 | 804 | ## Diffs 代码差异比较 805 | 806 | 点击编辑器左侧活动栏上的源代码管理按钮(ctrl+shift+G)，然后点击列表上的 M 按钮可以并排查看文件修改的对比。 807 | 808 | ![git icon](/media/git_icon.png) 809 | 810 | **并排视图** 811 | 812 | 默认是纵向并排比较代码差异 813 | 814 | ![git diff side by side](/media/git_side_by_side.png) 815 | 816 | **内联视图** 817 | 818 | 在并排对比视图状态下可以通过点击右上角**更多**按钮选择**切换到内联视图*·* 819 | 820 | ![more git button](/media/more_button.png) 821 | 822 | ![git inline](/media/git_inline.png) 823 | 824 | 如果你更喜欢内联视图，可以设置 `"diffEditor.renderSideBySide": false`。 825 | 826 | **Review Pane** 827 | 828 | 在对比视图中通过 `F7` 和 `Shift+F7` 来切换到不同的代码区块，通过箭头键和 `Enter` 键可以定位行. 829 | 830 | ![diff_review_pane](/media/diff_review_pane.png) 831 | 832 | 833 | **编辑暂存变更** 834 | 835 | 你可以在比较视图中直接编辑暂存变更 836 | 837 | 838 | ## 分支 839 | 840 | 通过状态栏可以方便的切换 Git 分支。 841 | 842 | ![switch branches](/media/switch_branches.gif) 843 | 844 | ## 暂存 845 | 846 | **暂存所有文件** 847 | 848 | 鼠标悬停在有数字的文件上点击加号按钮。 849 | 850 | 851 | ![git stage all](/media/git_stage_all.gif) 852 | 853 | **暂存某个文件** 854 | 855 | 在**命令面板**选择**暂存所选范围**暂存文件的一部分 856 | 857 | 858 | ![git stage selected](https://cloud.githubusercontent.com/assets/1926584/23407797/ebeefbb4-fdc5-11e6-8ca1-c4c6c056a8fd.png) 859 | 860 | ## 撤消上次提交 861 | 862 | ![undo last commit](/media/undo_last_commit.gif) 863 | 864 | ## 查看 Git 输出 865 | 866 | VS Code 可以方便的查看 Git 指令是否有效的执行，这对学习 Git 或调试困难的 issue 很有帮助。 867 | 868 | > Mac: shift+cmd+u 869 | 870 | > Windows / Linux: ctrl+shift+u 871 | 872 | 在输出窗口下拉菜单选择 **Git** 运行 `toggleOutput`。 873 | 874 | ## Gutter 指示器 875 | 876 | Gutter 指示器功能可以让你在编辑器编辑区看到源码被改动过的一些痕迹，详细内容请看[这里](https://code.visualstudio.com/docs/editor/versioncontrol#_gutter-indicators)。 877 | 878 | * 一个红色三角形表示被删除的行 879 | * 一个绿色的竖条表示新增的行 880 | * 一个蓝色竖条表示修改过的行 881 | 882 | ![git gutter indicators](/media/editingevolved_gutter.png) 883 | 884 | ## 解决合并冲突 885 | 886 | 在合并分支时，在活动栏点击源代码管理按钮 887 | 888 | ![git icon](/media/git_icon.png) 889 | 890 | ## 设置 VS Code 为默认合并分支工具 891 | 892 | ```bash 893 | git config --global merge.tool code 894 | ``` 895 | 896 | # 调试 897 | 898 | 内置调试器可以通过添加断点和观察器进行调试，以帮助你加快编辑，编译等。 899 | 900 | ## 配置调试器 901 | 902 | 默认情况下，它支持 NodeJS ，并且可以调试任何可以被转换为 JavaScript （比如 TypeScript 等），但像 C++ 或 Python 这样的其他运行时则需要安装扩展才能进行调试。 903 | 按 f1 选择 **Debug: Open launch.json** 环境，会产生一个 `lanch.json` 文件。具体内容请参考[文档](https://code.visualstudio.com/docs/editor/debugging) 904 | 905 | ![configure debugging](/media/configure_debug.gif) 906 | 907 | ## 断点和单步调试 908 | 909 | 紧挨着行号放置断点，点击调试小部件窗口的绿色前进三角按钮开始调试。 910 | 911 | ![debug](/media/node_debug.gif) 912 | 913 | ## 数据审查 914 | 915 | 在调试面板和调试控制台中检查变量 916 | 917 | ![data inspection](/media/debug_data_inspection.gif) 918 | 919 | ## 内联值 920 | 921 | 你可以通过设置 `"debug.inlineValues": true` 打开在调试器中来查看提供的值这个功能，这个功能还处于实验阶段所以默认是关闭的。 922 | 923 | # 运行任务 924 | 925 | ## 自动获取任务 926 | 927 | 从顶部菜单栏选择**任务** > **运行任务(R)...**,然后选择你想运行的任务类型。 928 | 这会产生一个如下内容的 `task.json` 文件，更多细节请参考任务[文档](https://go.microsoft.com/fwlink/?LinkId=733558)。 929 | 930 | ```json 931 | { 932 | // See http://go.microsoft.com/fwlink/?LinkId=733558 933 | // for the documentation about the tasks.json format 934 | "version": "0.1.0", 935 | "command": "npm", 936 | "isShellCommand": true, 937 | "showOutput": "always", 938 | "suppressTaskName": true, 939 | "tasks": [ 940 | { 941 | "taskName": "install", 942 | "args": ["install"] 943 | }, 944 | { 945 | "taskName": "build", 946 | "args": ["run", "build"] 947 | } 948 | ] 949 | } 950 | ``` 951 | 952 | 有一些偶然的 issue 会自动产生，查阅文档可以让你事半功倍哦。 953 | 954 | 955 | ## 从任务菜单运行任务 956 | 957 | 从菜单栏选择**任务**，选择**运行任务...**命令，接着选择你想运行的任务。选择**终止任务...** 停止运行任务·。 958 | 959 | ![task runner](/media/task_runner.gif) 960 | 961 | 962 | ## 其他资源 963 | 964 | * [vscode 官方文档](https://code.visualstudio.com/docs) 965 | * [react sample app](https://github.com/Microsoft/vscode-react-sample) 966 | * [awesome vscode](https://github.com/viatsko/awesome-vscode) 967 | -------------------------------------------------------------------------------- /README_EN.md: -------------------------------------------------------------------------------- 1 | # [VS Code](https://code.visualstudio.com) Tips and Tricks 2 | 3 | > The Chinese version please refer [VS Code 提升编码效率的技巧集](https://github.com/auspbro/vscode-tips-and-tricks-cn/blob/master/README.md) 4 | 5 | > The key bindings below may or may not be accurate with the latest build. See [here](https://code.visualstudio.com/docs/getstarted/keybindings) for the latest keyboard shortcut reference. 6 | 7 | # Table of Contents 8 | 9 | 1. Basics 10 | 2. Customization 11 | 3. Extensions 12 | 4. File and folder management 13 | 5. Editing hacks 14 | 6. IntelliSense 15 | 7. Snippets 16 | 8. Git integration 17 | 9. Debugging 18 | 10. Task runner 19 | 11. Other Resources 20 | 21 | 22 | # Basics 23 | 24 | ## Insider Version of VS Code 25 | 26 | 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](https://code.visualstudio.com/insiders). 27 | 28 | * For Early Adopters - Insiders has the most recent code changes and may lead to the occasional broken build. 29 | * Frequent Builds - New builds everyday with the latest bug fixes and features. 30 | * Side-by-side install - Insiders installs next to the Stable build allowing you to use either independently. 31 | 32 | ![side by side install](/media/side-by-side-install.png) 33 | 34 | ## Getting Started 35 | 36 | Open the **Welcome** page to get started with the basics of VS Code. **Help** > **Welcome**. 37 | 38 | ![welcome page](/media/welcome_page.png) 39 | 40 | Includes the **Interactive Playground**. 41 | 42 | ![interactive playground](/media/interactive_playground.png) 43 | 44 | ## Command Palette 45 | 46 | Access all available commands based on your current context. 47 | 48 | > Mac: cmd+shift+p or f1 49 | 50 | > Windows / Linux: ctrl+shift+p or f1 51 | 52 | ![command palette](/media/OpenCommandPalatte.gif) 53 | 54 | ## Reference keybindings 55 | 56 | 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. 57 | 58 | ![keyboard references](/media/keyboard-references.png) 59 | 60 | ## Quick open 61 | 62 | Quickly open files. 63 | 64 | > Mac: cmd+p 65 | 66 | > Windows / Linux: ctrl+p 67 | 68 | ![Quick Open](/media/QuickOpen.gif) 69 | 70 | > **Tip:** Type "?" to view help suggestions. 71 | 72 | ### Navigate between recently opened files 73 | 74 | Repeat the **Quick Open** keyboard shortcut to cycle quickly between recently opened files. 75 | 76 | ### Open multiple files from Quick Open 77 | 78 | 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**. 79 | 80 | ## CLI tool 81 | 82 | > Linux: Follow instructions [here](https://code.visualstudio.com/docs/editor/setup#_linux). 83 | 84 | > Windows: Follow instructions [here](https://code.visualstudio.com/docs/editor/setup#_windows). 85 | 86 | > Mac: see below. 87 | 88 | Open the **Command Palette** (F1) and type "shell command". Hit enter to execute **Shell Command: Install 'code' command in PATH**. 89 | 90 | ![shell command](/media/setup_shell-command.png) 91 | 92 | 93 | ```bash 94 | # open code with current directory 95 | code . 96 | 97 | # open the current directory in the most recently used code window 98 | code -r . 99 | 100 | # create a new window 101 | code -n 102 | 103 | # change the language 104 | code --locale=es 105 | 106 | # open diff editor 107 | code --diff 108 | 109 | # see help options 110 | code --help 111 | 112 | # disable all extensions 113 | code --disable-extensions . 114 | ``` 115 | 116 | ![all cli commands](/media/vscode-cli-commands.png) 117 | 118 | ## .vscode folder 119 | 120 | Workspace specific files are in `.vscode`. For example, `tasks.json` for the Task Runner and `launch.json` for the debugger. 121 | 122 | ## Status Bar decorations 123 | 124 | **Errors and Warnings** 125 | 126 | > Mac: shift+cmd+m 127 | 128 | > Windows / Linux: ctrl+shift+m 129 | 130 | Quickly jump to errors and warnings in the project. 131 | 132 | Cycle through errors with f8 or shift+f8 133 | 134 | ![errors and warnings](/media/Errors_Warnings.gif) 135 | 136 | You can filter problems by type ('errors', 'warnings') or text matching. 137 | 138 | **Change language mode** 139 | 140 | > Mac: cmd+k m 141 | 142 | > Windows / Linux: ctrl+k m 143 | 144 | ![change syntax](/media/change_syntax.gif) 145 | 146 | 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. 147 | 148 | # Customization 149 | 150 | There are many things you can do to customize VS Code. 151 | 152 | * Change your theme 153 | * Change your keyboard shortcuts 154 | * Tune your settings 155 | * Add JSON validation 156 | * Create snippets 157 | * Install extensions 158 | 159 | Check out the full [documentation](https://code.visualstudio.com/docs/getstarted/settings). 160 | 161 | ## Change your theme 162 | 163 | Open the **Command Palette** and type "themes". You can install more themes from the extension Marketplace. 164 | 165 | ![Preview themes](/media/PreviewThemes.gif) 166 | 167 | Additionally, you can install and change your File Icon themes. 168 | 169 | ![File icon themes](/media/PreviewFileIconThemes.gif) 170 | 171 | ## Change your keyboard shortcuts 172 | 173 | ### Keyboard Reference Sheets 174 | 175 | Download the keyboard shortcut reference sheet for your platform ([macOS](https://go.microsoft.com/fwlink/?linkid=832143), [Windows](https://go.microsoft.com/fwlink/?linkid=832145), [Linux](https://go.microsoft.com/fwlink/?linkid=832144)). 176 | 177 | ![Keyboard Reference Sheet](/media/KeyboardReferenceSheet.png) 178 | 179 | ### Keymaps 180 | 181 | 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](https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Downloads). Some of the more popular ones: 182 | 183 | - [Vim](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim) 184 | - [Sublime Text Keymap](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings) 185 | - [Emacs Keymap](https://marketplace.visualstudio.com/items?itemName=hiro-sun.vscode-emacs) 186 | - [Atom Keymap](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings) 187 | 188 | ### Customize your keyboard shortcuts 189 | 190 | Open the **Command Palette** and type "keyboard shortcuts." You can now add your own keybindings in the file on the right. 191 | 192 | ![customize keyboard shortcuts](/media/KeyboardShortcuts.gif) 193 | 194 | See more in [Key Bindings for Visual Studio Code](https://code.visualstudio.com/docs/getstarted/keybindings). 195 | 196 | ## Tune your settings 197 | 198 | Open `settings.json` 199 | 200 | > Mac: cmd+, 201 | 202 | > Windows / Linux: **File** > **Preferences** > **Settings** 203 | 204 | *Format on paste* 205 | 206 | ```json 207 | "editor.formatOnPaste": true 208 | ``` 209 | 210 | *Change the font size* 211 | 212 | ```json 213 | "editor.fontSize": 18 214 | ``` 215 | 216 | *Change the zoom level* 217 | 218 | ```json 219 | "window.zoomLevel": 5 220 | ``` 221 | 222 | *Font ligatures* 223 | 224 | ```json 225 | "editor.fontFamily": "Fira Code", 226 | "editor.fontLigatures": true 227 | ``` 228 | 229 | > **Tip:** You will need to have a font installed that supports font ligatures. [FiraCode](https://github.com/tonsky/FiraCode) is a popular font on the VS Code team. 230 | 231 | ![font ligatures](/media/font-ligatures-annotated.png) 232 | 233 | *Auto Save* 234 | 235 | ```json 236 | "files.autoSave": "afterDelay" 237 | ``` 238 | 239 | You can also toggle Auto Save from the top-level menu with the **File** > **Auto Save**. 240 | 241 | *Format on save* 242 | 243 | ```json 244 | "editor.formatOnSave": true, 245 | ``` 246 | 247 | *Change the size of tab characters* 248 | 249 | ```json 250 | "editor.tabSize": 4 251 | ``` 252 | 253 | *Spaces or tabs* 254 | 255 | ```json 256 | "editor.insertSpaces": true 257 | ``` 258 | 259 | *Render whitespace* 260 | 261 | ```json 262 | "editor.renderWhitespace": "all" 263 | ``` 264 | 265 | *Ignore files / folders* 266 | 267 | Removes these files / folders from your editor window. 268 | 269 | ```json 270 | "files.exclude": { 271 | "somefolder/": true, 272 | "somefile": true 273 | } 274 | ``` 275 | 276 | Remove these files / folders from search results. 277 | 278 | ```json 279 | "search.exclude": { 280 | "someFolder/": true, 281 | "somefile": true 282 | } 283 | ``` 284 | 285 | And many, many [others](https://code.visualstudio.com/docs/getstarted/settings). 286 | 287 | ## Language specific settings 288 | 289 | For those settings you only want for specific languages. 290 | 291 | ```json 292 | "[languageid]": { 293 | 294 | } 295 | ``` 296 | 297 | > **Tip:** You can find the language ID by typing in the **Command Palette** "Configure language specific settings" 298 | 299 | ![language based settings](/media/lang-based-settings.png) 300 | 301 | ## Add JSON Validation 302 | 303 | Enabled by default for many files. Create your own schema and validation in `settings.json` 304 | 305 | ```json 306 | "json.schemas": [ 307 | { 308 | "fileMatch": [ 309 | "/bower.json" 310 | ], 311 | "url": "http://json.schemastore.org/bower" 312 | } 313 | ] 314 | ``` 315 | 316 | or for a schema defined in your workspace 317 | 318 | ```json 319 | "json.schemas": [ 320 | { 321 | "fileMatch": [ 322 | "/foo.json" 323 | ], 324 | "url": "./myschema.json" 325 | } 326 | ] 327 | ``` 328 | 329 | or a custom schema 330 | 331 | ```json 332 | "json.schemas": [ 333 | { 334 | "fileMatch": [ 335 | "/.myconfig" 336 | ], 337 | "schema": { 338 | "type": "object", 339 | "properties": { 340 | "name" : { 341 | "type": "string", 342 | "description": "The name of the entry" 343 | } 344 | } 345 | } 346 | }, 347 | ``` 348 | 349 | See more in the [documentation](https://code.visualstudio.com/docs/languages/json). 350 | 351 | # Extensions 352 | 353 | ## Find extensions 354 | 355 | 1. In the VS Code [Marketplace](https://marketplace.visualstudio.com/vscode). 356 | 2. Search inside VS Code 357 | 3. View extension recommendations 358 | 4. Community curated extension lists, such as [awesome-vscode](https://github.com/viatsko/awesome-vscode). 359 | 360 | ## Install extensions 361 | 362 | 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. 363 | 364 | ![install extensions](/media/InstallExtensions.gif) 365 | 366 | ## Extension recommendations 367 | 368 | Click the Extensions Activity Bar button. Then click **Show Recommended Extensions** in the **More** (...) button menu. 369 | 370 | ![show recommended extensions](/media/ShowRecommendedExtensions.gif) 371 | 372 | ## Creating my own extension 373 | 374 | 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](https://code.visualstudio.com/docs/extensionAPI/extension-points). 375 | 376 | * configuration 377 | * commands 378 | * keybindings 379 | * languages 380 | * debuggers 381 | * grammars 382 | * themes 383 | * snippets 384 | * jsonValidation 385 | 386 | # File and folder management 387 | 388 | ## Integrated terminal 389 | 390 | > Windows / Linux / Mac: ctrl+` 391 | 392 | ![Integrated terminal](/media/integrated_terminal.png) 393 | 394 | Further reading: 395 | 396 | - [Official documentation](https://code.visualstudio.com/docs/editor/integrated-terminal) 397 | - [Mastering VS Code's Terminal article](http://www.growingwiththeweb.com/2017/03/mastering-vscodes-terminal.html) 398 | 399 | 400 | ## Auto Save 401 | 402 | Open `settings.json` with cmd+, 403 | 404 | ```json 405 | "files.autoSave": "afterDelay" 406 | ``` 407 | 408 | You can also toggle Auto Save from the top-level menu with the **File** > **Auto Save**. 409 | 410 | ## Toggle Sidebar 411 | 412 | > Mac: cmd+b 413 | 414 | > Windows / Linux: ctrl+b 415 | 416 | ![toggle side bar](/media/toggle_side_bar.gif) 417 | 418 | ## Zen Mode 419 | 420 | > Mac: cmd+k z 421 | 422 | > Windows / Linux: ctrl+k z 423 | 424 | ![zen mode](/media/zen_mode.gif) 425 | 426 | Enter distraction free Zen mode. 427 | 428 | ## Side by side editing 429 | 430 | > Mac: cmd+\\ or cmd then click a file from the File Explorer. 431 | 432 | > Windows / Linux: ctrl+\\ 433 | 434 | > Linux: ctrl+2 435 | 436 | ![split editors](/media/split_editor.gif) 437 | 438 | You can use drag and drop editors to create new editor groups and move editors between groups. 439 | 440 | ## Switch between editors 441 | 442 | > Mac: cmd+1, cmd+2, cmd+3 443 | 444 | > Windows / Linux: ctrl+1, ctrl+2, ctrl+3 445 | 446 | ![navigate editors](/media/navigate_editors.gif) 447 | 448 | ## Move to Explorer window 449 | 450 | > Mac: cmd+shift+e 451 | 452 | > Windows / Linux: ctrl+shift+e 453 | 454 | ## Create and open a file 455 | 456 | > Mac: cmd+click 457 | 458 | > Windows / Linux: ctrl+click 459 | 460 | ![create and open file](/media/create_open_file.gif) 461 | 462 | ## Close the currently opened folder 463 | 464 | > Mac: cmd+w 465 | 466 | > Windows / Linux: ctrl+k f 467 | 468 | ## History 469 | 470 | Navigate entire history with ctrl+tab 471 | 472 | Navigate back. 473 | 474 | > Mac: ctrl+- 475 | 476 | > Windows / Linux: alt+left 477 | 478 | Navigate Forward. 479 | 480 | > Mac: ctrl+shift+- 481 | 482 | > Windows / Linux: alt+right 483 | 484 | ![navigate history](/media/navigate_history.gif) 485 | 486 | ## Navigate to a file 487 | 488 | > Mac: cmd+e or cmd+p 489 | 490 | > Windows / Linux: ctrl+e or ctrl+p 491 | 492 | ![navigate to file](/media/navigate_to_file.gif) 493 | 494 | ## File associations 495 | 496 | Create language associations for files that aren't detected accurately (for example, many config files are JSON). 497 | 498 | ```json 499 | "file.associations": { 500 | ".database": "json" 501 | } 502 | ``` 503 | 504 | # Editing hacks 505 | 506 | Here are a selection of common features for editing code. If the keyboard shortcuts aren't comfortable for you, consider installing a [Keymap extension](https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Downloads) for your old editor. 507 | 508 | ## Multi cursor selection 509 | 510 | > Mac: opt+cmd+up or opt+cmd+down 511 | 512 | > Windows: ctrl+alt+up or ctrl+alt+down 513 | 514 | > Linux: alt+shift+up or alt+shift+down 515 | 516 | ![multi cursor](/media/multi_cursor.gif) 517 | 518 | ![multi cursor second example](/media/editingevolved_multicursor.gif) 519 | 520 | Add more cursors to current selection. 521 | 522 | ![add cursor to all occurrences of current selection](/media/add_cursor_current_selection.gif) 523 | 524 | ## Join line 525 | 526 | > Mac: ctrl+j 527 | 528 | > Windows / Linux: Not bound by default. Open Keyboard Shortcuts and bind `editor.action.joinLines` to a shortcut of your choice. 529 | 530 | ![Join lines](/media/JoinLines.gif) 531 | 532 | ## Copy line up / down 533 | 534 | > Mac: opt+shift+up or opt+shift+down 535 | 536 | > Windows / Linux([Issue #5363](https://github.com/Microsoft/vscode/issues/5363)): shift+alt+down or shift+alt+up 537 | 538 | ![copy line down](/media/copy_line_down.gif) 539 | 540 | ## Shrink / expand selection 541 | 542 | More in [documentation](https://code.visualstudio.com/docs/editor/editingevolved#_selection-multicursor) 543 | 544 | > Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right 545 | 546 | > Windows / Linux: shift+alt+left or shift+alt+right 547 | 548 | ![shrink expand selection](/media/shrink_expand_selection.gif) 549 | 550 | ## Go to Symbol in File 551 | 552 | > Mac: cmd+shift+o 553 | 554 | > Windows / Linux: ctrl+shift+o 555 | 556 | ![Find by symbol](/media/find_by_symbol.gif) 557 | 558 | You can group the symbols by kind by adding a colon, `@:`. 559 | 560 | ![group symbols by kind](/media/group_symbols_by_kind.png) 561 | 562 | ## Go to Symbol in Workspace 563 | 564 | > Mac: cmd+t 565 | 566 | > Windows / Linux: ctrl+t 567 | 568 | ![go to symbol in workspace](/media/go_to_symbol_in_workspace.png) 569 | 570 | ## Navigate to a specific line 571 | 572 | > Mac: ctrl+g or cmd+p, : 573 | 574 | > Windows / Linux: ctrl+g 575 | 576 | ![navigate to line](/media/navigate_to_line.gif) 577 | 578 | ## Undo cursor position 579 | 580 | > Mac: cmd+u 581 | 582 | > Windows / Linux: ctrl+u 583 | 584 | ![undo cursor position](/media/undo_cursor_position.gif) 585 | 586 | ## Move line up and down 587 | 588 | > Mac: opt+up or opt+down 589 | 590 | > Windows / Linux: alt+up or alt+down 591 | 592 | ![move line up and down](/media/move_line.gif) 593 | 594 | ## Trim trailing whitespace 595 | 596 | > Mac: cmd+k cmd+x 597 | 598 | > Windows / Linux: ctrl+k ctrl+x 599 | 600 | ![trailing whitespace](/media/trim_whitespace.gif) 601 | 602 | ## Code formatting 603 | 604 | ### Currently selected source code 605 | 606 | > Mac: cmd+k, cmd+f 607 | 608 | > Windows / Linux: ctrl+k, ctrl+f 609 | 610 | ### Whole document format 611 | 612 | > Windows / Linux: shift+alt+f 613 | 614 | ![code formatting](/media/code_formatting.gif) 615 | 616 | ## Code folding 617 | 618 | > Mac: shift+cmd+\[ and shift+cmd+\] 619 | 620 | > Windows / Linux: ctrl+shift+\[ and ctrl+shift+\] 621 | 622 | ![code folding](/media/code_folding.gif) 623 | 624 | ## Select current line 625 | 626 | > Mac: cmd+i 627 | 628 | > Windows / Linux: ctrl+i 629 | 630 | ![select current line](/media/select_current_line.gif) 631 | 632 | ## Navigate to beginning and end of file 633 | 634 | > Mac: cmd+up and cmd+down 635 | 636 | > Windows: ctrl+up and ctrl+down 637 | 638 | > Linux: ctrl+home and ctrl+end 639 | 640 | ![navigate to beginning and end of file](/media/beginning_end_file.gif) 641 | 642 | ## Open Markdown Preview 643 | 644 | In a Markdown file, use 645 | 646 | > Mac: shift+cmd+v 647 | 648 | > Windows / Linux: ctrl+shift+v 649 | 650 | ![toggle readme preview](/media/toggle_preview.gif) 651 | 652 | ## Side by Side Markdown Edit and Preview 653 | 654 | In a Markdown file, use 655 | 656 | > Mac: cmd+k v 657 | 658 | > Windows / Linux: ctrl+k v 659 | 660 | Special bonus: The preview will now sync. 661 | 662 | ![markdown sync](/media/markdown-preview-sync.gif) 663 | 664 | # IntelliSense 665 | 666 | Anytime, try ctrl+space to trigger the Suggestions widget. 667 | 668 | ![intellisense](/media/intellisense.gif) 669 | 670 | You can view available methods, parameter hints, short documentation, etc. 671 | 672 | ## Peek 673 | 674 | Select a symbol then type alt+f12. Alternatively, you can use the context menu. 675 | 676 | ![peek](/media/peek.gif) 677 | 678 | ## Go to Definition 679 | 680 | Select a symbol then type f12. Alternatively, you can use the context menu or ctrl+click (cmd+click on macOS). 681 | 682 | ![go to definition](/media/goto_definition.gif) 683 | 684 | You can go back to your previous location with the **Go** > **Back** command or alt+left (ctrl+- on macOS). 685 | 686 | ## Find All References 687 | 688 | Select a symbol then type shift+f12. Alternatively, you can use the context menu. 689 | 690 | ![find all references](/media/find_all_references.gif) 691 | 692 | ## Rename Symbol 693 | 694 | Select a symbol then type f2. Alternatively, you can use the context menu. 695 | 696 | ![rename symbol](/media/rename_symbol.gif) 697 | 698 | ## .eslintrc.json 699 | 700 | Install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). Configure 701 | your linter however you'd like. Specification is [here](http://eslint.org/docs/user-guide/configuring). 702 | 703 | Here is configuration to use ES6. 704 | 705 | ```json 706 | { 707 | "env": { 708 | "browser": true, 709 | "commonjs": true, 710 | "es6": true, 711 | "node": true 712 | }, 713 | "parserOptions": { 714 | "ecmaVersion": 6, 715 | "sourceType": "module", 716 | "ecmaFeatures": { 717 | "jsx": true, 718 | "classes": true, 719 | "defaultParams": true 720 | } 721 | }, 722 | "rules": { 723 | "no-const-assign": 1, 724 | "no-extra-semi": 0, 725 | "semi": 0, 726 | "no-fallthrough": 0, 727 | "no-empty": 0, 728 | "no-mixed-spaces-and-tabs": 0, 729 | "no-redeclare": 0, 730 | "no-this-before-super": 1, 731 | "no-undef": 1, 732 | "no-unreachable": 1, 733 | "no-use-before-define": 0, 734 | "constructor-super": 1, 735 | "curly": 0, 736 | "eqeqeq": 0, 737 | "func-names": 0, 738 | "valid-typeof": 1 739 | } 740 | } 741 | ``` 742 | 743 | ## package.json 744 | 745 | See IntelliSense for your `package.json` file. 746 | 747 | ![package json intellisense](/media/package_json_intellisense.gif) 748 | 749 | ## Emmet syntax 750 | 751 | [Support for Emmet syntax](https://code.visualstudio.com/docs/languages/html#_emmet-snippets). 752 | 753 | ![emmet syntax](/media/emmet_syntax.gif) 754 | 755 | # Snippets 756 | 757 | ## Create custom snippets 758 | 759 | **File** > **Preferences** > **User Snippets**, select the language, and create a snippet. 760 | 761 | ```json 762 | "create component": { 763 | "prefix": "component", 764 | "body": [ 765 | "class $1 extends React.Component {", 766 | "", 767 | " render() {", 768 | " return ($2);", 769 | " }", 770 | "", 771 | "}" 772 | ] 773 | }, 774 | ``` 775 | 776 | See more details in [Creating your own Snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets). 777 | 778 | # Git Integration 779 | 780 | 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. 781 | 782 | ## Diffs 783 | 784 | Click the Source Control button in the Activity Bar then select the file to diff. 785 | 786 | ![git icon](/media/git_icon.png) 787 | 788 | **Side by side** 789 | 790 | Default is side by side diff. 791 | 792 | ![git diff side by side](/media/git_side_by_side.png) 793 | 794 | **Inline view** 795 | 796 | Toggle inline view by clicking the **More** (...) button in the top right and selecting **Switch to Inline View**. 797 | 798 | ![more git button](/media/more_button.png) 799 | 800 | ![git inline](/media/git_inline.png) 801 | 802 | If you prefer the inline view, you can set `"diffEditor.renderSideBySide": false`. 803 | 804 | 805 | **Review Pane** 806 | 807 | Navigate through diffs with `F7` and `Shift+F7`. This will present them in a unified patch format. 808 | Lines can be navigated with arrow keys and pressing `Enter` will jump back in the diff editor and the selected line. 809 | 810 | ![diff_review_pane](/media/diff_review_pane.png) 811 | 812 | 813 | **Edit pending changes** 814 | 815 | You can make edits directly in the pending changes of the diff view. 816 | 817 | 818 | ## Branches 819 | 820 | Easily switch between Git branches via the Status Bar. 821 | 822 | ![switch branches](/media/switch_branches.gif) 823 | 824 | ## Staging 825 | 826 | **Stage all** 827 | 828 | Hover over the number of files and click the plus button. 829 | 830 | ![git stage all](/media/git_stage_all.gif) 831 | 832 | **Stage selected** 833 | 834 | Stage a portion of a file by selecting that file (using the arrows) and then choosing **Stage Selected Ranges** from the **Command Palette**. 835 | 836 | ![git stage selected](https://cloud.githubusercontent.com/assets/1926584/23407797/ebeefbb4-fdc5-11e6-8ca1-c4c6c056a8fd.png) 837 | 838 | ## Undo last commit 839 | 840 | ![undo last commit](/media/undo_last_commit.gif) 841 | 842 | ## See Git output 843 | 844 | 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. 845 | 846 | > Mac: shift+cmd+u 847 | 848 | > Windows / Linux: ctrl+shift+u 849 | 850 | to run `toggleOutput`. Select **Git** in the drop-down. 851 | 852 | ## Gutter indicators 853 | 854 | View diff decorations in editor. See [documentation](https://code.visualstudio.com/docs/editor/versioncontrol#_gutter-indicators) for more details. 855 | 856 | ![git gutter indicators](/media/editingevolved_gutter.png) 857 | 858 | ## Resolve merge conflicts 859 | 860 | During a merge, click the Source Control button in the Activity Bar and make changes in the diff view. 861 | 862 | ![git icon](/media/git_icon.png) 863 | 864 | ## Setup VS Code as default merge tool 865 | 866 | ```bash 867 | git config --global merge.tool code 868 | ``` 869 | 870 | # Debugging 871 | 872 | ## Configure debugger 873 | 874 | f1 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](https://code.visualstudio.com/docs/editor/debugging) for more details. 875 | 876 | ![configure debugging](/media/configure_debug.gif) 877 | 878 | ## Breakpoints and stepping through 879 | 880 | Place breakpoints next to the line number. Navigate forward with the Debug widget. 881 | 882 | ![debug](/media/node_debug.gif) 883 | 884 | ## Data inspection 885 | 886 | Inspect variables in the Debug panels and in the console. 887 | 888 | ![data inspection](/media/debug_data_inspection.gif) 889 | 890 | ## Inline values 891 | 892 | You can set `"debug.inlineValues": true` to see variable values inline in the debugger. This feature is experimental and disabled by default. 893 | 894 | # Task Runner 895 | 896 | ## Auto detect tasks 897 | 898 | Select **Tasks** from the top-level menu, run the command **Configure Tasks...**, then select the type of task you'd like to run. 899 | This will generate a `task.json` file with content like the following. See the Tasks [documentation](https://go.microsoft.com/fwlink/?LinkId=733558) for more details. 900 | 901 | ```json 902 | { 903 | // See http://go.microsoft.com/fwlink/?LinkId=733558 904 | // for the documentation about the tasks.json format 905 | "version": "0.1.0", 906 | "command": "npm", 907 | "isShellCommand": true, 908 | "showOutput": "always", 909 | "suppressTaskName": true, 910 | "tasks": [ 911 | { 912 | "taskName": "install", 913 | "args": ["install"] 914 | }, 915 | { 916 | "taskName": "build", 917 | "args": ["run", "build"] 918 | } 919 | ] 920 | } 921 | ``` 922 | 923 | There are occasionally issues with auto generation. Check out the documentation for getting things to work properly. 924 | 925 | ## Run tasks from the Tasks menu 926 | 927 | 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...** 928 | 929 | ![task runner](/media/task_runner.gif) 930 | 931 | 932 | ## Other Resources 933 | 934 | * [vscode official docs](https://code.visualstudio.com/docs) 935 | * [react sample app](https://github.com/Microsoft/vscode-react-sample) 936 | * [awesome vscode](https://github.com/viatsko/awesome-vscode) 937 | --------------------------------------------------------------------------------