Visual Studio Code
一、安装
下载地址：https://www.visualstudio.com/
安装属于傻瓜式的，只要注意不要安装在C目录就行。
注意：cscode的配置文件保存在：C:\Users\start\AppData\Roaming\Code目录中，如果页面或者哪些地方调整错误的，可以将这个文件删除，重新启动vscode，在重新设置就可以了。
二、使用
VS Code 使用手册：https://code.visualstudio.com/docs
2.1、界面布局
安装完成后，我们看到的Visual Studio Code界面如下，当然不同的系统界面边框略有不同，基本布局如图：
2.2、插件安装
- open in browser
使用 Alt + B 使用默认浏览器打开当前 html 页面，或 Shift + Alt + B 选择其他浏览器
- Vetur
语法高亮、智能感知、Emmet等
- Auto Rename Tag
自动完成另一侧标签的同步修改
- Path Intellisense
自动路径补全
- HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式，安装后有快捷提示
- liveServer
服务端插件，用于 Ajax 接口调用
- Vetur
识别.vue文件的
- Element UI Snippets
有 element 语法提示
2.3、设置
- 开启自动保存文件（不需要手动按 Ctrl + S 保存）
2.4、搜索
- 全局搜索
- 局部搜索
ctrl+F
- Debug调试
具体参考官方文档： https://code.visualstudio.com/Docs/editor/debugging
2.5、快捷键
因为经常使用
idea工具，所以快捷键也设置和idea工具一样的。
选中想要设置的快捷键，双击，弹出框来直接按下快捷键，如果想输入两个快捷键的可以先按下第一个快捷键全部松开继续按第二个快捷键。确认后，按下enter保存。
- 常用快捷键
| 编号 | 快捷键标识 | 设置后快捷键 | 说明 |
|---|---|---|---|
| 1 | Move line up | Alt+ ↑ | 向上移动 |
| 2 | Move line down | Alt+ ↓ | 向上移动 |
| 3 | Copy line up | Ctrl+ alt+↑ | 向上复制行 |
| 4 | Copy line down | Ctrl+ alt+↓ | 向下复制行 |
| 5 | Delete line | Ctrl+D | 删除行 |
| 6 | Insert line below | Shift+enter | 在下面插入行 |
| 7 | Insert line above | Ctrl+alt+enter | 在上面插入行 |
| 8 | Scroll line up | 向上滚动行 | |
| 9 | Scroll line down | 向下滚动行 | |
| 10 | Toggle line comment | Ctrl+/ | 单行注释 |
| 11 | Toggle block comment | Ctrl+shift+/ | 多行注释 |
| 12 | Close editor | Ctrl+F4 | 关闭编辑器 |
| 13 | Ctrl+shift+S | 随便 | 另存为 |
| 14 | ？ | Ctrl+shift+F | 格式化代码 |
注意：Ctrl+shift+S 另存为这个快捷键我们并不是使用，但是这个快捷键在很多软件中表示保存所有。因为在其他软件中使用习惯，容易这样操作。这里会弹出提示框很烦，所以讲这个快捷键设置为不常用的。
- debug调试
| 编号 | 快捷键标识 | 设置后快捷键 | 说明 |
|---|---|---|---|
| 1 | Toggle breakpoint | F9 | 下一个断点 |
| 2 | Start/Continue | F5 | 开始/继续 |
| 3 | Stop | Shift+F5 | 停止 |
| 4 | Step into | F6 | 下一步 |
| 5 | out | F7 | 上一步 |
| 6 | Step over | F10 | 跳过 |
2.6、git版本控制
有的时候，某个目录下会存在多个项目，这个时候，vscode会将这些项目名变成大写展示在git管理处。需要管理那个项目，找到项目点击就可以操作了。