# Visual Studio Code, 真香!

# VSC 快捷键

# 常用 General

# 基础编辑 Basic editing

# 导航 Navigation

# 搜索和替换 Search and replace

# 多光标和选择 Multi-cursor and selection

# 丰富的语言编辑 Rich languages editing

# 编辑器管理 Editor management

# 文件管理 File management

# 显示 Display

# 调试 Debug

# 集成终端 Integrated terminal

# 自用插件

• 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"
  //   }
  // }
}