Visual Studio Code, 真棒!

VSC 快捷键

常用 General

按 Press	功能 Function
Ctrl + Shift + P，F1	显示命令面板 Show Command Palette
Ctrl + P	快速打开 Quick Open
Ctrl + Shift + N	新窗口/实例 New window/instance
Ctrl + Shift + W	关闭窗口/实例 Close window/instance

基础编辑 Basic editing

按 Press	功能 Function
Ctrl+X	剪切行（空选定） Cut line (empty selection)
Ctrl+C	复制行（空选定）Copy line (empty selection)
Alt+ ↑ / ↓	向上/向下移动行 Move line up/down
Shift+Alt + ↓ / ↑	向上/向下复制行 Copy line up/down
Ctrl+Shift+K	删除行 Delete line
Ctrl+Enter	在下面插入行 Insert line below
Ctrl+Shift+Enter	在上面插入行 Insert line above
Ctrl+Shift+\	跳到匹配的括号 Jump to matching bracket
Ctrl+] / [	缩进/缩进行 Indent/outdent line
Home	转到行首 Go to beginning of line
End	转到行尾 Go to end of line
Ctrl+Home	转到文件开头 Go to beginning of file
Ctrl+End	转到文件末尾 Go to end of file
Ctrl+↑ / ↓	向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[	折叠（折叠）区域 Fold (collapse) region
Ctrl+Shift+]	展开（未折叠）区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[	折叠（未折叠）所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+]	展开（未折叠）所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0	折叠（折叠）所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J	展开（未折叠）所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C	添加行注释 Add line comment
Ctrl+K Ctrl+U	删除行注释 Remove line comment
Ctrl+/	切换行注释 Toggle line comment
Shift+Alt+A	切换块注释 Toggle block comment
Alt+Z	切换换行 Toggle word wrap

导航 Navigation

按 Press	功能 Function
Ctrl + T	显示所有符号 Show all Symbols
Ctrl + G	转到行… Go to Line…
Ctrl + P	转到文件… Go to File…
Ctrl + Shift + O	转到符号… Go to Symbol…
Ctrl + Shift + M	显示问题面板 Show Problems panel
F8	转到下一个错误或警告 Go to next error or warning
Shift + F8	转到上一个错误或警告 Go to previous error or warning
Ctrl + Shift + Tab	导航编辑器组历史记录 Navigate editor group history
Alt + ←/→	返回/前进 Go back / forward
Ctrl + M	切换选项卡移动焦点 Toggle Tab moves focus

搜索和替换 Search and replace

按 Press	功能 Function
Ctrl + F	查找 Find
Ctrl + H	替换 Replace
F3 / Shift + F3	查找下一个/上一个 Find next/previous
Alt + Enter	选择查找匹配的所有出现 Select all occurences of Find match
Ctrl + D	将选择添加到下一个查找匹配 Add selection to next Find match
Ctrl + K Ctrl + D	将最后一个选择移至下一个查找匹配项 Move last selection to next Find match
Alt + C / R / W	切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

多光标和选择 Multi-cursor and selection

按 Press	功能 Function
Alt +单击	插入光标 Insert cursor
Ctrl + Alt +↑/↓	在上/下插入光标 Insert cursor above / below
Ctrl + U	撤消上一个光标操作 Undo last cursor operation
Shift + Alt + I	在选定的每一行的末尾插入光标 Insert cursor at end of each line selected
Ctrl + I	选择当前行 Select current line
Ctrl + Shift + L	选择当前选择的所有出现 Select all occurrences of current selection
Ctrl + F2	选择当前字的所有出现 Select all occurrences of current word
Shift + Alt + →	展开选择 Expand selection
Shift + Alt + ←	缩小选择 Shrink selection
Shift + Alt + （拖动鼠标）	列（框）选择 Column (box) selection
Ctrl + Shift + Alt +（箭头键）	列（框）选择 Column (box) selection
Ctrl + Shift + Alt + PgUp / PgDown	列（框）选择页上/下 Column (box) selection page up/down

丰富的语言编辑 Rich languages editing

按 Press	功能 Function
Ctrl + 空格	触发建议 Trigger suggestion
Ctrl + Shift + Space	触发器参数提示 Trigger parameter hints
Tab	Emmet 展开缩写 Emmet expand abbreviation
Shift + Alt + F	格式化文档 Format document
Ctrl + K Ctrl + F	格式选定区域 Format selection
F12	转到定义 Go to Definition
Alt + F12	Peek定义 Peek Definition
Ctrl + K F12	打开定义到边 Open Definition to the side
Ctrl + .	快速解决 Quick Fix
Shift + F12	显示引用 Show References
F2	重命名符号 Rename Symbol
Ctrl + Shift + . /，	替换为下一个/上一个值 Replace with next/previous value
Ctrl + K Ctrl + X	修剪尾随空格 Trim trailing whitespace
Ctrl + K M	更改文件语言 Change file language

编辑器管理 Editor management

按 Press	功能 Function
Ctrl+F4, Ctrl+W	关闭编辑器 Close editor
Ctrl+K F	关闭文件夹 Close folder
Ctrl+\	拆分编辑器 Split editor
Ctrl+ 1 / 2 / 3	聚焦到第1，第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor group
Ctrl+K Ctrl+ ←/→	聚焦到上一个/下一个编辑器组 Focus into previous/next editor group
Ctrl+Shift+PgUp / PgDown	向左/向右移动编辑器 Move editor left/right
Ctrl+K ← / →	移动活动编辑器组 Move active editor group

文件管理 File management

按 Press	功能 Function
Ctrl+N	新文件 New File
Ctrl+O	打开文件… Open File…
Ctrl+S	保存 Save
Ctrl+Shift+S	另存为… Save As…
Ctrl+K S	全部保存 Save All
Ctrl+F4	关闭 Close
Ctrl+K Ctrl+W	关闭所有 Close All
Ctrl+Shift+T	重新打开关闭的编辑器 Reopen closed editor
Ctrl+K	输入保持打开 Enter Keep Open
Ctrl+Tab	打开下一个 Open next
Ctrl+Shift+Tab	打开上一个 Open previous
Ctrl+K P	复制活动文件的路径 Copy path of active file
Ctrl+K R	显示资源管理器中的活动文件 Reveal active file in Explorer
Ctrl+K O	显示新窗口/实例中的活动文件 Show active file in new window/instance

显示 Display

按 Press	功能 Function
F11	切换全屏 Toggle full screen
Shift+Alt+1	切换编辑器布局 Toggle editor layout
Ctrl+ = / –	放大/缩小 Zoom in/out
Ctrl+B	切换侧栏可见性 Toggle Sidebar visibility
Ctrl+Shift+E	显示浏览器/切换焦点 Show Explorer / Toggle focus
Ctrl+Shift+F	显示搜索 Show Search
Ctrl+Shift+G	显示Git Show Git
Ctrl+Shift+D	显示调试 Show Debug
Ctrl+Shift+X	显示扩展 Show Extensions
Ctrl+Shift+H	替换文件 Replace in files
Ctrl+Shift+J	切换搜索详细信息 Toggle Search details
Ctrl+Shift+C	打开新命令提示符/终端 Open new command prompt/terminal
Ctrl+Shift+U	显示输出面板 Show Output panel
Ctrl+Shift+V	切换Markdown预览 Toggle Markdown preview
Ctrl+K V	从旁边打开Markdown预览 Open Markdown preview to the side

调试 Debug

按 Press	功能 Function
F9	切换断点 Toggle breakpoint
F5	开始/继续 Start/Continue
Shift+F5	停止 Stop
F11 / Shift+F11	下一步/上一步 Step into/out
F10	跳过 Step over
Ctrl+K Ctrl+I	显示悬停 Show hover

集成终端 Integrated terminal

按 Press	功能 Function
Ctrl+`	显示集成终端 Show integrated terminal
Ctrl+Shift+`	创建新终端 Create new terminal
Ctrl+Shift+C	复制选定 Copy selection
Ctrl+Shift+V	粘贴到活动端子 Paste into active terminal
Ctrl+↑ / ↓	向上/向下滚动 Scroll up/down
Shift+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+Home / End	滚动到顶部/底部 Scroll to top/bottom

自用插件

• Auto Close Tag

  自动闭合HTML标签

• Auto Rename Tag

  修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些bug

• AutoFileName

  自动补全路径提示

• background

  修改背景，设置编辑器界面的背景图片。但是好像现在会出错，具体设置内容在vsc找到插件看详细信息。

• Beautify

  代码格式化插件

• Bookmarks

  书签工具,可以在代码上标注书签,可快速定位代码段,从而提高开发效率

• Bootstrap 3 Snippets

  Bootstrap 重度用户首选, 快速引用和代码生成。

• Bracket Pair Colorizer

  让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

• Chinese (Simplified) Language Pack for Visual Studio Code

  设置VScode语言为中文, 英文盲人用户必备

• Color Highlight

  颜色值在代码中高亮显示

• Color Info

  这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

• CSS Peek

  使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

• Code Blue

  一个精心调制的黑暗主题微妙的蓝色和明亮的色彩，很容易在眼睛集中编码。

• Code Runner

  在使用VSCode编译时，有的时候需要执行某段代码，这个时候就需要用到Code Runner，Code Runner可以跑C/C++/JAVA/JS/PHP等编程语言

• ESLint

  ESlint 接管原生 js 提示，可以自定制提示规则。这个比较高玩

• Dracula Official

  个人觉得接近完美的一款主题

• HTML Snippets

  超级实用且初级的 H5代码片段以及提示

• HTML CSS Support

  让 html 标签上写class 智能提示当前项目所支持的样式 新版已经支持scss文件检索

• HTML Boilerplate

  通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

• JavaScript Snippet Pack

  js代码段快速生成

• jQuery Code Snippets

  jq代码段提示。

• Live Sass Compiler

  提供sass文件编译, 另外安装此插件默认自带Live Server插件

• Markdown Preview Enhanced

  在编辑器中对markdown进行预览

• open in browser

  由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。

• Path Intellisense

  另一个文件路径提示。，默认不带这个功能的

• Project Manager

  快速切换项目, 免去多开窗口, 优秀的项目切换插件

• Prettier - Code formatter

  自用一款代码格式化插件,可配合Vetur与ESlint使用

• Settings Sync

  编辑器设置同步，包括插件，配置等。

• vscode-icons

  使您的编辑更具吸引力的图标！让 vscode 资源树目录加上图标，必备良品！

• Vetur

  目前 VSCode 上面最好用的 Vue 插件。能够实现在 .vue 文件中：

  • 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript
  • 语法高亮，包括 html/jade/pug css/sass/scss/less/stylus js/ts
  • emmet 支持
  • 代码自动补全（目前还是初级阶段），包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript

  配合 ESLint 插件食用效果更佳。

• Vue VSCode Snippets

  Vue语法片段, 个人觉得相对其它更好用

• VueHelper

  另一款Vue语法片段

---

常用快捷键

同时打开多个窗口（查看多个项目）

• 打开一个新窗口： Ctrl+Shift+N
• 关闭窗口： Ctrl+Shift+W

同时打开多个编辑器（查看多个文件）

• 新建文件 Ctrl+N
• 历史打开文件之间切换 Ctrl+Tab，Alt+Left，Alt+Right
• 切出一个新的编辑器（最多3个）Ctrl+\，也可以按住Ctrl鼠标点击Explorer里的文件名
• 左中右3个编辑器的快捷键Ctrl+1 Ctrl+2 Ctrl+3
• 3个编辑器之间循环切换 Ctrl+`
• 编辑器换位置，Ctrl+k然后按Left或Right

格式调整

• 代码行缩进Ctrl+[， Ctrl+]
• 折叠打开代码块 Ctrl+Shift+[， Ctrl+Shift+]
• Ctrl+C Ctrl+V如果不选中，默认复制或剪切一整行
• 代码格式化：Shift+Alt+F，或Ctrl+Shift+P后输入format code
• 修剪空格Ctrl+Shift+X
• 上下移动一行： Alt+Up 或 Alt+Down
• 向上向下复制一行： Shift+Alt+Up或Shift+Alt+Down
• 在当前行下边插入一行Ctrl+Enter
• 在当前行上方插入一行Ctrl+Shift+Enter

光标相关

• 移动到行首：Home
• 移动到行尾：End
• 移动到文件结尾：Ctrl+End
• 移动到文件开头：Ctrl+Home
• 移动到后半个括号 Ctrl+Shift+]
• 选中当前行Ctrl+i（双击）
• 选择从光标到行尾Shift+End
• 选择从行首到光标处Shift+Home
• 删除光标右侧的所有字Ctrl+Delete
• Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right
• Multi-Cursor：可以连续选择多处，然后一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
• 同时选中所有匹配的Ctrl+Shift+L
• Ctrl+D下一个匹配的也被选中(被我自定义成删除当前行了，见下边Ctrl+Shift+K)
• 回退上一个光标操作Ctrl+U

重构代码

• 跳转到定义处：F12
• 定义处缩略图：只看一眼而不跳转过去Alt+F12
• 列出所有的引用：Shift+F12
• 同时修改本文件中所有匹配的：Ctrl+F12
• 重命名：比如要修改一个方法名，可以选中后按F2，输入新的名字，回车，会发现所有的文件都修改过了。
• 跳转到下一个Error或Warning：当有多个错误时可以按F8逐个跳转
• 查看diff 在explorer里选择文件右键 Set file to compare，然后需要对比的文件上右键选择Compare with 'file_name_you_chose'.

查找替换

• 查找 Ctrl+F
• 查找替换 Ctrl+H
• 整个文件夹中查找 Ctrl+Shift+F

显示相关

• 全屏：F11
• zoomIn/zoomOut：Ctrl + =/Ctrl + -
• 侧边栏显/隐：Ctrl+B
• 预览markdown Ctrl+Shift+V

其他

• 自动保存：File -> AutoSave ，或者Ctrl+Shift+P，输入 auto

自用用户配置文件

{
  "editor.minimap.enabled": true,
  "workbench.sideBar.location": "left",
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "Dracula",
  "editor.renderWhitespace": "none",
  "editor.wordWrap": "on",
  // 用户配置同步gist
  "sync.gist": "7a2308588e6303c06308ed436292ee62",
  "git.autofetch": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "background.enabled": false,

  //======================================================================
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    // "javascript": "jsx",
    "javascript": "html"
  },
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    "wxml": "html"
  },

  //======================================================================
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": false,

  //======================================================================
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // eslint 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    // "vue-html",
    {
      "language": "vue",
      "autoFix": true
    },
    // "html",
    "vue"
  ],
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },

  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用单引号替代双引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  // #让vetur中的html按prettyhtml格式进行格式化
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // #让vetur中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript"
  //  // 格式化插件的配置
  // "vetur.format.defaultFormatterOptions": {
  //   "js-beautify-html": {
  //     // #vue组件中html属性强制折行对齐
  //     "wrap_attributes": "force-aligned"
  //   }
  // }
}