{"id":20708364,"url":"https://github.com/weakknight/vscode-tips-and-tricks-cn","last_synced_at":"2025-07-01T18:03:36.236Z","repository":{"id":132492375,"uuid":"55671935","full_name":"WeakKnight/vscode-tips-and-tricks-cn","owner":"WeakKnight","description":"chinese version of vscode tips and tricks","archived":false,"fork":false,"pushed_at":"2018-06-23T11:28:28.000Z","size":12547,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-11T05:30:03.527Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WeakKnight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-07T07:07:53.000Z","updated_at":"2018-06-23T11:28:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"92c33321-697f-48b1-846f-e1065f9c4344","html_url":"https://github.com/WeakKnight/vscode-tips-and-tricks-cn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WeakKnight/vscode-tips-and-tricks-cn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeakKnight%2Fvscode-tips-and-tricks-cn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeakKnight%2Fvscode-tips-and-tricks-cn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeakKnight%2Fvscode-tips-and-tricks-cn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeakKnight%2Fvscode-tips-and-tricks-cn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WeakKnight","download_url":"https://codeload.github.com/WeakKnight/vscode-tips-and-tricks-cn/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeakKnight%2Fvscode-tips-and-tricks-cn/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263013703,"owners_count":23399812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T01:30:49.353Z","updated_at":"2025-07-01T18:03:36.208Z","avatar_url":"https://github.com/WeakKnight.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# [VS Code](https://code.visualstudio.com) 小贴士\n\n# 内容目录\n\n1. \u003ca href=\"#basics\"\u003e基本\u003c/a\u003e\n2. \u003ca href=\"#customization\"\u003e个性化\u003c/a\u003e\n3. \u003ca href=\"#extensions\"\u003e插件扩展\u003c/a\u003e\n4. \u003ca href=\"#file-and-folder-management\"\u003e文件及文件夹管理\u003c/a\u003e\n5. \u003ca href=\"#editing-hacks\"\u003e高级编辑操作\u003c/a\u003e\n6. \u003ca href=\"#intellisense\"\u003e智能提示\u003c/a\u003e\n7. \u003ca href=\"#snippets\"\u003e代码片段生成\u003c/a\u003e\n8. \u003ca href=\"#git-integration\"\u003eGit集成\u003c/a\u003e\n9. \u003ca href=\"#debugging\"\u003e调试\u003c/a\u003e\n10. \u003ca href=\"#task-runner\"\u003eTask runner\u003c/a\u003e\n11. \u003ca href=\"#other-resources\"\u003e其他资源\u003c/a\u003e\n\n\u003e 文中提到的快捷键操作可能会和最新版本的软体有所不同。请查看默认的快捷键配置文件。\n\n# 基本\n\n## 打开命令面板\n\n通过命令面板可以很方便的访问到VS Code所有的可用命令\n\n\u003e Mac: \u003ckbd\u003ecmd+shift+p\u003c/kbd\u003e or \u003ckbd\u003ef1\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+p\u003c/kbd\u003e 或 \u003ckbd\u003ef1\u003c/kbd\u003e\n\n![command palette](/media/command_p.png)\n\n## Reference keybindings\n\n在命令面板中的所有命令都有与之对应的快捷键。如果你忘记快捷键是什么，可以打开命令面板来查看。\n\n## 快捷开启\n\n快速的打开文件和运行相关命令(操作如下)\n\n\u003e Mac: \u003ckbd\u003ecmd+p\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+p\u003c/kbd\u003e\n\n在快捷开启输入框中键入“?”来浏览相关帮助信息。\n\n## 将命令复制并粘贴在快速打开输入框中\n\n先按\u003ckbd\u003ecmd+p\u003c/kbd\u003e唤出快速打开输入框然后将命令粘贴进去。这一技巧在使用插件商城时尤为有用 。\n\n![marketplace copy and paste](/media/mp_copy_paste.png)\n\n## 命令行操作\n\n打开命令面板 (\u003ckbd\u003eF1\u003c/kbd\u003e) 然后键入\"shell command\"。运行\"Shell Command: Install 'code' command in PATH\"这一命令。 \n\n![shell command](/media/setup_shell-command.png)\n\n\n```bash\n# 创建新窗口\ncode -n\n\n# 改变语言\ncode --locale=es\n\n# 创建一个比对编辑器\ncode --diff \u003cfile1\u003e \u003cfile2\u003e\n\n# 浏览帮助选项\ncode --help\n```\n\n## .vscode 文件夹\n\n工作空间的文件都在 `.vscode`文件夹中。比如 `tasks.json` 是关于task runner的配置文件， `launch.json` 是关于debugger的配置文件。\n\n## 状态条Status bar decorations\n\n**错误和警告**\n\n\u003e Mac: \u003ckbd\u003eshift+cmd+m\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+m\u003c/kbd\u003e\n\n快速跳转到项目中的报错位置。\n\n按 \u003ckbd\u003ef8\u003c/kbd\u003e 或 \u003ckbd\u003eshift+f8\u003c/kbd\u003e跳转到下一个报错位置\n\n![status errors and warnings](/media/status_errors_warnings.png)\n\n**更新扩展插件**\n\n相关标识会出现在状态条的左下位置。\n\n![extension actions](/media/extension_actions.png)\n\n**改变语言模式**\n\n\u003e Mac: \u003ckbd\u003ecmd+k m\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+k m\u003c/kbd\u003e\n\n![change syntax](/media/change_syntax.gif)\n\n# 个性化\n\n关于个性化有非常多的内容，如果想了解更多请查阅[文档](http://code.visualstudio.com/docs/customization/overview)。\n\n## 定制编辑器\n\n打开 `settings.json` \n\n\u003e Mac: \u003ckbd\u003ecmd+,\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linxu: File -\u003e Preferences -\u003e User Settings\n\n*改变字体大小*\n\n```json\n\"editor.fontSize\": 18\n```\n\n*改变缩进的字符长度*\n\n```json\n\"editor.tabSize\": 4\n```\n\n*Spaces or tabs*\n\n```json\n\"editor.insertSpaces\": true\n```\n\n*文件或者文件夹忽略*\n\n把这些文件或者文件夹从你的编辑器窗口移除。 \n\n```json\n\"files.exclude\": {\n\t\t\"somefolder/\": true, \n\t\t\"somefile\": true\n}\n```\n\n把这些文件或者文件夹从搜索结果中移除。\n\n```json\n\"search.exclude\": {\n    \"someFolder/\": true,\n    \"somefile\": true\n}\n```\n\n以及许多其他功能，[详情点击此处](http://code.visualstudio.com/docs/customization/userandworkspace)。\n\n## 预览主题\n\n![Preview themes](/media/preview_themes.gif)\n\n## json 合法性校验\n\n更多类型的json配置文件的合法性检验默认开启,你也可以在`settings.json`里指定你自己的规则(JSON Schema)，如果想进一步了解这种检验规则的规则，[请点击此处](https://spacetelescope.github.io/understanding-json-schema/)。\n\n```json\n\"json.schemas\": [\n    {\n        \"fileMatch\": [\n            \"/bower.json\"\n        ],\n        \"url\": \"http://json.schemastore.org/bower\"\n    }\n]\n```\n\n这个规则也可以引用你的工作空间\n\n```json\n\"json.schemas\": [\n    {\n        \"fileMatch\": [\n            \"/foo.json\"\n        ],\n        \"url\": \"./myschema.json\"\n    }\n]\n```\n\n或者一个自定义的规则\n\n```json\n\"json.schemas\": [\n    {\n        \"fileMatch\": [\n            \"/.myconfig\"\n        ],\n        \"schema\": {\n            \"type\": \"object\",\n            \"properties\": {\n                \"name\" : {\n                    \"type\": \"string\",\n                    \"description\": \"The name of the entry\"\n                }\n            }\n        }\n    },\n```\n\n在[文档](http://code.visualstudio.com/docs/languages/json)中了解更多.\n\n# 插件扩展\n\n## Contribution points\n\n[Documentation on contribution points](http://code.visualstudio.com/docs/extensionAPI/extension-points).\n\n* configuration\n* commands\n* keybindings\n* languages\n* debuggers\n* grammars\n* themes\n* snippets\n* jsonValidation\n\n## Find extensions\n\n1. The official VS Code [marketplace](https://marketplace.visualstudio.com/vscode).\n2. Search in product (see below)\n3. View extension recommendations (see below)\n4. Community curated extensions like [awesome-vscode](https://github.com/viatsko/awesome-vscode).\n\n## Install extensions\n\n\u003e Mac: \u003ckbd\u003ecmd+shift+p\u003c/kbd\u003e \n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+p\u003c/kbd\u003e\n\nthen type \"ext install\". Select the extension you want and hit \u003ckbd\u003eenter\u003c/kbd\u003e\n\n![install extension](/media/install_extension.gif)\n\n## Extension recommendations\n\n\u003e Mac: \u003ckbd\u003ecmd+shift+p\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+p\u003c/kbd\u003e\n\nthen type \"ext\", then select \"Show Extension Recommendations\"\n\n![extension recommendations](/media/extension_recommendations.gif)\n\n## Uninstall an extension\n\n\u003e Mac: \u003ckbd\u003ecmd+shift+p\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+p\u003c/kbd\u003e\n\nthen type \"ext\", then select \"Show Installed Extensions\". \nClick the \"x\" on the bottom right of the extension card. \n\n![uninstall extension](/media/uninstall_extension.gif)\n\n# File and folder management\n\n## OS X layout\n\nUsing mission control, put a terminal window on the same screen as VS Code. Wala! You know have an integrated terminal. \n\n![OS X layout](/media/osx_layout.png)\n\n## Autosave\n\nOpen `settings.json` with \u003ckbd\u003ecmd+,\u003c/kbd\u003e\n\n```json\n\"files.autoSave\": \"afterDelay\"\n```\n\n## Toggle sidebar\n\n\u003e Mac: \u003ckbd\u003ecmd+b\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+b\u003c/kbd\u003e\n\n![toggle side bar](/media/toggle_side_bar.gif)\n\n## Side by side editing\n\n\u003e Mac: \u003ckbd\u003ecmd+\\\\\u003c/kbd\u003e or \u003ckbd\u003ecmd\u003c/kbd\u003e then click a file from the file browser. \n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+\\\\\u003c/kbd\u003e\n\n![split editors](/media/split_editor.gif)\n\n## Switch between editors\n\n\u003e Mac: \u003ckbd\u003ecmd+1\u003c/kbd\u003e, \u003ckbd\u003ecmd+2\u003c/kbd\u003e, \u003ckbd\u003ecmd+3\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+1\u003c/kbd\u003e, \u003ckbd\u003ectrl+2\u003c/kbd\u003e, \u003ckbd\u003ectrl+3\u003c/kbd\u003e\n\n![navigate editors](/media/navigate_editors.gif)\n\n## History\n\nNavigate entire history with \u003ckbd\u003ectrl+tab\u003c/kbd\u003e\n\nNavigate back.\n\n\u003e Mac: \u003ckbd\u003ectrl+-\u003c/kdbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ealt+left\u003c/kbd\u003e\n\nNavigate Forward.\n\n\u003e Mac: \u003ckbd\u003ectrl+shift+up\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ealt+right\u003c/kbd\u003e\n\n![navigate history](/media/navigate_history.gif)\n\n## Navigate to a file\n\n\u003e Mac: \u003ckbd\u003ecmd+e\u003c/kbd\u003e or \u003ckbd\u003ecmd+p\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+e\u003c/kbd\u003e or \u003ckbd\u003ectrl+p\u003c/kbd\u003e\n\n![navigate to file](/media/navigate_to_file.gif)\n\n## File associations\n\nSetup language associations for files that aren't detected accurately (i.e. many config files). \n\n```json\n\"file.associations\": {\n    \".eslintrc\": \"json\"\n}\n```\n\n# Editing hacks\n\n## Bracket matching\n\nMore in [documentation](http://code.visualstudio.com/docs/editor/editingevolved#_bracket-matching).\n\n\u003e Mac: \u003ckbd\u003eup+cmd+\\\\\u003ckbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+\\\\\u003c/kbd\u003e\n\n![bracket matching](/media/bracket_matching.gif)\n\n## Multi cursor selection\n\nMore in [documentation](http://code.visualstudio.com/docs/editor/editingevolved#_selection-multicursor).\n\n\u003e Mac: \u003ckbd\u003eopt+cmd+up\u003c/kbd\u003e or \u003ckbd\u003eopt+cmd+down\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003e\u003c/kbd\u003e\n\n![multi cursor](/media/multi_cursor.gif)\n\n![multi cursor second example](/media/editingevolved_multicursor.gif)\n\nAdd more cursors to current selection.\n\n![add cursor to all occurrences of current selection](/media/add_cursor_current_selection.gif)\n\n## Copy line\n\n\u003e Mac: \u003ckbd\u003eopt+shift+up\u003c/kbd\u003e or \u003ckbd\u003eopt+shift+down\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003eshift+alt+down\u003c/kbd\u003e or \u003ckbd\u003eshift+alt+up\u003c/kbd\u003e\n\n![copy line down](/media/copy_line_down.gif)\n\n## Shrink / expand selection\n\nMore in [documentation](http://code.visualstudio.com/docs/editor/editingevolved#_selection-multicursor)\n\n\u003e Mac: \u003ckbd\u003ectrl+shift+cmd+left\u003c/kbd\u003e or \u003ckbd\u003ectrl+shift+cmd+right\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003eshift+alt+left\u003c/kbd\u003e or \u003ckbd\u003eshift+alt+right\u003c/kbd\u003e\n\n![shrink expand selection](/media/shrink_expand_selection.gif)\n\n## Find by symbol\n\n\u003e Mac: \u003ckbd\u003ecmd+shift+o\u003c/kbd\u003e\n\n\n\n\u003e Windows: \u003ckbd\u003ectrl+shift+o\u003c/kbd\u003e\n\n![Find by symbol](/media/find_by_symbol.gif)\n\n## Navigate to a specific line\n\n\u003e Mac: \u003ckbd\u003ectrl+g\u003c/kbd\u003e or \u003ckbd\u003ecmd+p, :\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+g\u003c/kbd\u003e\n\n![navigate to line](/media/navigate_to_line.gif)\n\n## Undo cursor position\n\n\u003e Mac: \u003ckbd\u003ecmd+u\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+u\u003c/kbd\u003e\n\n![undo cursor position](/media/undo_cursor_position.gif)\n\n## Move line up and down\n\n\u003e Mac: \u003ckbd\u003eopt+up\u003c/kbd\u003e or \u003ckbd\u003eopt+down\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ealt+up\u003c/kbd\u003e or \u003ckbd\u003ealt+down\u003c/kbd\u003e\n\n![move line up and down](/media/move_line.gif)\n\n## Trim trailing whitespace\n\n\u003e Mac: \u003ckbd\u003eshift+up+x\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+x\u003c/kbd\u003e\n\n![trailing whitespace](/media/trim_whitespace.gif)\n\n## Code formatting\n\n\u003e Mac / Windows / Linux: \u003ckbd\u003eshift+alt+f\u003c/kbd\u003e\n\n![code formatting](/media/code_formatting.gif)\n\n## Code folding\n\n\u003e Mac: \u003ckbd\u003eshift+cmd+\\[\u003c/kbd\u003e and \u003ckbd\u003eshift+cmd+\\]\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+\\[\u003c/kbd\u003e and \u003ckbd\u003ectrl+shift+\\]\u003c/kbd\u003e\n\n![code folding](/media/code_folding.gif)\n\n## Select current line\n\n\u003e Mac: \u003ckbd\u003ecmd+i\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+i\u003c/kbd\u003e\n\n![select current line](/media/select_current_line.gif)\n\n## Navigate to beginning and end of file\n\n\u003e Mac: \u003ckbd\u003ecmd+up\u003c/kbd\u003e and \u003ckbd\u003ecmd+down\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+up\u003c/kbd\u003e and \u003ckbd\u003ectrl+down\u003c/kbd\u003e\n\n![navigate to beginning and end of file](/media/beginning_end_file.gif)\n\n## Toggle README preview\n\nIn a markdown file use \n\n\u003e Mac: \u003ckbd\u003eshift+cmd+v\u003c/kbd\u003e\n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+v\u003c/kbd\u003e\n\n![toggle readme preview](/media/toggle_preview.gif)\n\n# Intellisense\n\nAnytime, try \u003ckbd\u003ectrl+space\u003c/kbd\u003e to trigger the suggest widget. This might be the most important tip of them all. \n\n![intellisense](/media/intellisense.gif)\n\nYou can view available methods, parameter hints, short documentation, etc. \n\n## Peek\n\nSelect a symbol then type \u003ckbd\u003ealt+f12\u003c/kbd\u003e. Alternatively, you can use the context menu. \n\n![peek](/media/peek.gif)\n\n## Go to definition\n\nSelect a symbol then type \u003ckbd\u003ef12\u003c/kbd\u003e. Alternatively, you can use the context menu. \n\n![go to definition](/media/goto_definition.gif)\n\n## Find all references\n\nSelect a symbol then type \u003ckbd\u003eshift+f12\u003c/kbd\u003e. Alternatively, you can use the context menu. \n\n![find all references](/media/find_all_references.gif)\n\n## Rename symbol\n\nSelect a symbol then type \u003ckbd\u003ef2\u003c/kbd\u003e. Alternatively, you can use the context menu. \n\n![rename symbol](/media/rename_symbol.gif)\n\n\n## jsconfig.json\n\nUse ES6 by configuring jsconfig.json in the root of your javascript source files. \n\n```json\n{\n    \"compilerOptions\": {\n        \"target\": \"ES6\",\n        \"module\": \"commonjs\"\n    }, \"exclude\": [\n        \"npm_modules\"\n    ]\n}\n```\n\n## .eslintrc.json\n\nInstall [eslint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). Configure \nyour linter however you'd like. Specification is [here](http://eslint.org/docs/user-guide/configuring). \n\nHere is configuration to use es6. \n\n```json\n{\n    \"env\": {\n        \"browser\": true,\n        \"commonjs\": true,\n        \"es6\": true,\n        \"node\": true\n    },\n    \"parserOptions\": {\n        \"ecmaVersion\": 6,\n        \"sourceType\": \"module\",\n        \"ecmaFeatures\": {\n            \"jsx\": true,\n            \"classes\": true,\n            \"defaultParams\": true\n        }\n    },\n    \"rules\": {\n        \"no-const-assign\": 1,\n        \"no-extra-semi\": 0,\n        \"semi\": 0,\n        \"no-fallthrough\": 0,\n        \"no-empty\": 0,\n        \"no-mixed-spaces-and-tabs\": 0,\n        \"no-redeclare\": 0,\n        \"no-this-before-super\": 1,\n        \"no-undef\": 1,\n        \"no-unreachable\": 1,\n        \"no-use-before-define\": 0,\n        \"constructor-super\": 1,\n        \"curly\": 0,\n        \"eqeqeq\": 0,\n        \"func-names\": 0,\n        \"valid-typeof\": 1\n    }\n}\n```\n\n## package.json\n\nSee intellisense for your package.json file. \n\n![package json intellisense](/media/package_json_intellisense.gif)\n\n## Install typings\n\nInstall [typings](https://github.com/typings/typings) to bring in the `.d.ts` files which power javascript intellisense. \n\n```bash\nnpm install typings --global\n\n# Search for definitions.\ntypings search tape\n\n# Find an available definition (by name).\ntypings search --name react\n\n# Install typings (DT is \"ambient\", make sure to enable the flag and persist the selection in `typings.json`).\ntypings install react --ambient --save\n```\n\n`install` will create a typings folder. VS Code will reference the `.d.ts` files for intellisense. \n\n## Emmet syntax\n\n[Support for Emmet syntax](http://code.visualstudio.com/docs/languages/html#_emmet-snippets).  \n\n![emmet syntax](/media/emmet_syntax.gif)\n\n# Snippets\n\n## Create custom snippets\n\n`File -\u003e Preferences -\u003e User Snippets`, select the language, and create a shippet. \n\n```json\n\"create component\": {\n    \"prefix\": \"component\",\n    \"body\": [\n        \"class $1 extends React.Component {\",\n        \"\",\n        \"\trender() {\",\n        \"\t\treturn ($2);\",\n        \" \t}\",\n        \"\",\n        \"}\"\n    ]\n},\n```\n\nSee more details in [documentation](http://code.visualstudio.com/docs/customization/userdefinedsnippets#_creating-your-own-snippets). \n\n# Git Integration\n\nExcellent integration for entire Git workflow. \n\n## Diffs\n\nClick Git icon then select the file to diff. \n\n![git icon](/media/git_icon.png)\n\n**Side by side**\n\nDefault is side by side diff. \n\n![git diff side by side](/media/git_side_by_side.png)\n\n**Inline view**\n\n\nToggle inline view by clicking more button in the top right. \n\n![more git button](/media/more_button.png)\n\n![git inline](/media/git_inline.png)\n\n## Branches\n\nEasily switch between branches via the status bar. \n\n![switch branches](/media/switch_branches.gif)\n\n## Staging\n\n**Stage all**\n\nHover over the number of files and click the plus button. \n\n![git stage all](/media/git_stage_all.gif)\n\n**Stage selected**\n\nStage a portion of a file by selecting that file (using the arrows) and then staging \n\"selected lines\" via the more button. \n\n![git stage selected](/media/git_stage_selected.gif)\n\n## Undo last commit\n\n![undo last commit](/media/undo_last_commit.gif)\n\n## See Git output\n\nSometimes I want to see what my tool is doing. Visual Studio Code makes it easy to see \nwhat git commands are running. This is helpful when learning git or debugging a difficult \nsource control issue. \n\n\u003e Mac: \u003ckbd\u003eshift+cmd+u\u003c/kbd\u003e \n\n\n\n\u003e Windows / Linux: \u003ckbd\u003ectrl+shift+u\u003c/kbd\u003e\n\nto run `toggleOutput`. Select Git in the dropdown.\n\n## Gutter indicators\n\nView diff decorations in editor. See [documentation](http://code.visualstudio.com/docs/editor/editingevolved#_gutter-indicators) for more details. \n\n![git gutter indicators](/media/editingevolved_gutter.png)\n\n## Resolve merge conflicts\n\nDuring a merge click the git icon and make changes in the diff view. \n\n![git icon](/media/git_icon.png)\n\n## Setup VS Code as default merge tool\n\n```bash\ngit config --global merge.tool code\n```\n\n# Debugging\n\n## Configure debugger\n\n\u003ckdb\u003ef1\u003c/kdb\u003e and select \"Debug: Open Launch.json\", select the environment. \nThis will generate a `launch.json` file. Works out of the box as expected for\nNode and other environments. May need some additional configuration for other languages.\nSee [documentation](http://code.visualstudio.com/docs/editor/debugging) for more details. \n\n![configure debugging](/media/configure_debug.gif)\n\n## Breakpoints and stepping through\n\nPlace breakpoints next to the line number. Navigate forward with the debug widget. \n\n![debug](/media/node_debug.gif)\n\n## Data inspection\n\nInspect variables in the debug panels and in the console. \n\n![data inspection](/media/debug_data_inspection.gif)\n\n# Task Runner\n\n## Auto detect tasks\n\n\u003ckbd\u003ef1\u003c/kbd\u003e, type \"Configure Task\", then select \"Configure Task Runner\". \nThis will generate a task.json file with content like the following. See \n[documentation](http://go.microsoft.com/fwlink/?LinkId=733558) for more details.\n\n```json\n{\n\t// See http://go.microsoft.com/fwlink/?LinkId=733558\n\t// for the documentation about the tasks.json format\n\t\"version\": \"0.1.0\",\n\t\"command\": \"npm\",\n\t\"isShellCommand\": true,\n\t\"showOutput\": \"always\",\n\t\"suppressTaskName\": true,\n\t\"tasks\": [\n\t\t{\n\t\t\t\"taskName\": \"install\",\n\t\t\t\"args\": [\"install\"]\n\t\t},\n\t\t{\n\t\t\t\"taskName\": \"build\",\n\t\t\t\"args\": [\"run\", \"build\"]\n\t\t}\n\t]\n}\n```\n\nThere are occasionally issues with auto generation. Check out the documentation\nfor getting things to work properly. \n\n## Run tasks from command palette\n\n\u003ckbd\u003ef1\u003c/kdb\u003e, run the command \"Run Task\", and select the task you want to run. Terminate the running\ntask by running the command \"Terminate Running Task\"\n\n![task runner](/media/task_runner.gif)\n\n\n## Other Resources\n\n* [vscode official docs](https://code.visualstudio.com/docs)\n* [react sample app](https://github.com/Microsoft/vscode-react-sample)\n* [vscode-tips](https://github.com/tstringer/vscode-tips)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweakknight%2Fvscode-tips-and-tricks-cn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweakknight%2Fvscode-tips-and-tricks-cn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweakknight%2Fvscode-tips-and-tricks-cn/lists"}