VisualStudioCode使⽤指南（vscode技巧）
布局：左侧是⽤于展⽰所要编辑的所有⽂件和⽂件夹的⽂件管理器，依次是`资源管理器`，`搜索`，`GIT`，`调试`，`插件`，右侧是打开⽂件的编辑区域，最多可同时打开三个编辑区域到侧边。
底栏：依次是`Git Branch`，`error&warning`，`编码格式`等
html⽂档中
  1、按tab键快速⽣成⽂档头以及闭合标签，类似sublime text 所安装的插件，快速编辑，提⾼效率
  2、js代码也有⾃动补全功能
  快捷键命令
        ctrl+shift+p 控制⾯板
        ctrl+k、ctrl+o 打开资源管理器选择⽂件夹或⽂件
光标选择指定的⽂件夹，然后ctrl+shift+b 打开浏览器
安装
  VSCode是微软推出的⼀款轻量编辑器，采取了和VS相同的UI界⾯，搭配合适的插件可以优化前端开发的体验。
  HTML Snippets：增强了zen-coding，增加了H5的⾃动补全，安装后每次打开⾃动启⽤（可能与其他插件冲突）。
配置
  Ctrl + Shift + P 或 F1 打开命令⾯板（也可以使⽤查看-》命令⾯板打开）；
  输⼊ user set 后按回车打开⽤户配置；
  使⽤ “editor.fontFamily”：“Consolas， ‘Courier New’， monospace” 选择字体样式，默认为“Consolas， ‘Courier New’， monospace”；使⽤ editor.fontSize“：14 控制字体⼤⼩，默认为14；使⽤ ”editor.wrappingColumn“：0使⽂本⾃动换⾏，默认为300；在左侧的默认配置中会有详细的中⽂描述，配置⽂件是json格式的⽂本⽂档。
插件
  Ctrl + Shift + P 或 F1 打开扩展⾯板，输⼊ install 后按回车打开扩展安装⾯板；或点击侧边栏的最后⼀个按钮；或使⽤ctrl + shift + x命令打开；或使⽤查看-》扩展打开扩展⾯板。
  在对话框中输⼊［string ］@sort:installs可以根据下载量排序查看，选择所需插件，单击安装即可。
  @sort:installs：根据下载量排序查看所有插件，asc 升序排列，desc 降序排列。
  @sort:rang ：分级查看，asc 升序排列，desc 降序排列。
  string可以为空
推荐插件
  C/C++：添加C/C++⽀持，包括但不限于⾃动补全
  Python：⾃动缩进，补全，查错，debug，代码格式化等等
  beaufy：格式化html，css，js
  vscode-icons：⼀款很⽕的图标主题
  HTML Snippets：可以在不输⼊《的情况下提⽰
  View In Browser：在浏览器中打开 HTML ⽂件
  Crane - PHP Intellisense：PHP代码的⾃动补全插件
  jQuery Code Snippets：⼀款jQuery重度患者的插件
  Debugger for Chrome ：调试JavaScript
  Git History：显⽰git log和line history
Git 的使⽤
  需要本机已经安装 Git
  ⽆需安装插件，单机侧边栏的第三个图标即可进⾏ add、commit、push、pull。（或者使⽤ctrl+shift+g打开，或使⽤查看-》Git 打开Git）
主题更换
  图标主题：Ctrl+shift +p 打开命令⾯板，输⼊ icon theme 后回车，选择⼀个即可。
  颜⾊主题：Ctrl+shift +p 打开命令⾯板，输⼊ color theme 后回车，选择⼀个即可。
跳转
  跳转到⽂件：Ctrl+P。
  跳转到符号：Ctrl+shift+o，可以跳转到⽂件中的⽅括号、⼤括号等等。
  跳转到⾏：Ctrl+G，可以跳转到指定⾏。
Debug
  使⽤ctrl+d 打开debug⾯板。
  可以根据需要配置launch.json
常⽤功能
  Emmet：使⽤ Tab ⾃动补全HTML标签
  Markdown Preview：使⽤ Ctrl + shift + v预览markdown⽂件
  使⽤shift + alt + up/down可以向上/下复制选中内容或者当前⾏
常⽤插件
  View In Browser
  - 预览页⾯（ctrl+F1）
  vscode-icons
  - 侧栏的图标，对于⼀个有视觉强迫症的⼈是必须要的
  HTML Snippets
  - ⽀持HTML5的标签提⽰
  HTML CSS support
  - css⾃动补齐
  JS-CSS-HTML Formatter
格式化
  jQuery Code Snippets
  jquery ⾃动提⽰
  Path Autocomplete
  - 路径⾃动补齐
  Npm Intellisense
  - npm包代码提⽰
  ESLint
  - 检测JS必备
  Debugger for Chrome
  - ⽅便调试
  Auto Rename Tag
  - ⾃动同步修改标签
  Bootstrap 3 Snippets
  - bootstrap必备
  Vue 2 Snippets
  - vue必备
  background
  - ⼀个萌萌的插件，可以⾃⼰设置vsc的背景图
常⽤快捷键
  （在快捷键部分，⌘指 Command 键，⇧指 Shift 键，⌃指 Control 键，⌥指 Opon/Alt 键。）
  这⾥主要就是实验F1上的快捷键，⼀些我认为没⽤的我就不列出来了。
  向上（下）复制⾏ shift + alt + top（down）
  向上（下）移动⾏* alt + top（down）*
  新建⼀个窗⼝ ctrl + shift + N
  ⾏增加缩进： ctrl + ［
  ⾏减少缩进 * ctrl + ］**
  裁剪尾随空格（去掉⼀⾏的末尾那些没⽤的空格）： ctrl + shift + x
  强烈建议把这个启⽤，这样保存的时候就会⾃动删掉那些没⽤的空格，在很多公司的代码规范⾥都是不允许存在这些空格的。
  显⽰隐藏侧边栏：ctrl + B
  拆分编辑器（最多拆分成三块）：ctrl + /按ctrl + 1（2，3）就可以在拆分后的编辑器⾥切换
  ⽅法缩⼩ctrl +（-）
  关闭编辑器 ctrl + W（F4）
  切换编辑器 ctrl + shift + left（right）
  也可以⽤ ctrl+1（2，3）
  显⽰和隐藏侧边栏 ctrl + B
  切换全屏 F11
  切换⾃动换⾏ alt + Z
  显⽰Git ctrl + shift + G
  前提是你的项⽬必须是⼀个git项⽬
  这个还是很有⽤的，有时候我们的屏幕不够⼤，可是代码没有⾃动换⾏，所以被遮住的代码就会看不到，但是你⽤这个快捷键就可以换⾏看到了。这个我是在⽤户设置⾥⾯设置成⾃动换⾏的。
修改⽤户设置
  把默认的⽤户设置成适合我们⾃⼰的还是很重要的。
  也很简单，⽂件 – ⾸选项 – ⽤户设置，然后出来左边的默认设置是不能改的，需要在右边setngs.json中覆盖。
修改快捷键
visual studio和vs code的区别  ⽂件 – ⾸选项 – 键盘快捷⽅式，和修改⽤户设置的时候⼀样，到你要修改的快捷键名字，右边覆盖就可以了，⼀些还没有绑定快捷键的功能可以在左边的最下⾯看到，然后快捷键的名字就是这个。
新建⽂件
  右键 – 新建⽂件，⽂件后缀名⾃⼰加上，⾃动识别。
新建.html⽂件后，空⽩页，没有页⾯默认代码结构，此时在编辑区输⼊html，回车第⼆个或者第三个即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。