JavaWeb-04-VSCode开发工具

VS Code安装使用

• 为啥不用记事本？
  • 想都不用想，如有错误不会有提示、并且降低了开发效率。

---

• Visual Studio Code（简称 VS Code）是 Microsoft 于2015年4月发布的一款代码编辑器。
• VS Code 对前端代码有非常强大的支持，同时也支持其他编程语言（例如：C++、Java、Python、PHP、Go等）。
• VS Code 提供了非常强大的插件库，大大提高了开发效率。
• 官网：https://code.visualstudio.com

---

一、下载

• 打开浏览器，输入网址：https://code.visualstudio.com

• 然后根据自己使用的系统下载对应的程序即可！

  

---

二、安装

• 注意：作为一名开发工程师，建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。

• 在文件夹中打开

  
  
  
  
  
  

---

三、VS Code插件安装

• VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。
• 完成前端开发，常见插件介绍：

1、Chinese（Simplified）Language Pack

• 适用于 VS Code的中文（简体）语言包

  

2、Code Spell Checker

• 拼写检查器：比如banana单词写错成banane，会提示你是否修改成banana，也可以将banane添加至检查器的字典中。

  

3、HTML CSS Support

• 在编写样式表的时候，自动补全功能大大缩减了编写时间。

  

4、JavaScript（ES6）code snippets

• ES6语法智能提示，以及快速输入

  

5、Mithril Emmet

• 一个能大幅提高前端开发效率的一个工具，用于补全代码

  

6、Path Intellisense

• 网络提示插件

  

7、Vue3 Snippets

• 这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

  

8、VueHelper

• vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码

  

9、Auto Close Tag

• 自动闭合HTML/XML标签

  

10、Auto Rename Tag

• 自动完成另一侧标签的同步修改

  

11、Beautify

• 格式化html, js, css

  

12、Bracket Pair Colorizer

• 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

  

13、open in browser

• 把编辑的HTML文件等用浏览器打开，查看效果

  

14、Vetur

• Vetur是一款Vue代码高亮显示的一款插件

  

15、IntelliJ IDEA Keybindings

• 安装VSCode的插件IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA快捷键

  

---

四、VS Code配置

• 打开配置面板，根据自己的喜好，可以修改字体、背景样式等偏好设置

  

---

五、VS Code快捷键

Ctrl+Shift+P，F1：显示命令面板

Ctrl+P：快速打开

Ctrl+Shift+N：新窗口/实例

Ctrl+Shift+W：关闭窗口/实例

Ctrl+X：剪切行

Ctrl+C：复制行

ALT+↑/↓：上下移动

Shift+Alt+↓/↑：向上/向下复制行

Ctrl+Shift+K：删除行

Ctrl+Enter：在下面插入行

Ctrl+Shift+Enter：在上面插入行

Ctrl+Shift+\：跳到匹配的括号

Ctrl+]/[：缩进

Home/End：转到文件的开头/转到文件的末尾

Ctrl+↑/↓：上下滚动

ALT+PgUp/PgDown：上下滚动页面

Ctrl+Shift+[：折叠(折叠)区域

Ctrl+Shift+]：展开(未折叠)区域

Ctrl+K Ctrl+C：添加行注释

Ctrl+K Ctrl+U：删除行注释

Ctrl+/：切换行注释

shift+Alt+A：切换块注释

ALT+Z：切换换行

Ctrl+Tab：显示所有符号

Ctrl + G：转到行

Ctrl + P：转到文件

Ctrl + Shift + O：转到符号

Ctrl + Shift + M：显示问题面板

F8：转到下一个错误或警告

Shift + F8：转到上一个错误或警告

Ctrl + Shift + Tab：导航编辑器组历史记录

Alt + ←/→：返回/前进

Ctrl + M：切换选项卡移动焦点

Ctrl + F：查找

Ctrl + H：替换

F3 / Shift + F3：查找下一个/上一个

Alt + Enter：选择查找匹配的所有出现

Ctrl + D：将选择添加到下一个查找匹配

Ctrl + K Ctrl + D：将最后一个选择移至下一个查找匹配项

Alt + C / R / W：切换区分大小写/正则表达式/整个词

Alt +单击：插入光标

Ctrl + Alt +↑/↓：在上/下插入光标

Ctrl + U：撤消上一个光标操作

Shift + Alt + I：在选定的每一行的末尾插入光标

Ctrl + I：选择当前行

Ctrl + Shift + L：选择当前选择的所有出现

Ctrl + F2：选择当前字的所有出现

Shift + Alt + →：展开选择

Shift + Alt + ←：缩小选择

Shift + Alt + (拖动鼠标)：列(框)选择

Ctrl + Shift + Alt +(箭头键)：列(框)选择

Ctrl + Shift + Alt + PgUp / PgDown：列(框)选择页上/下

Ctrl + 空格：触发建议

Ctrl + Shift + Space：触发器参数提示

Shift + Alt + F：格式化文档

Ctrl + K Ctrl + F：格式选定区域

Alt + F12：Peek定义

Ctrl + K F12：打开定义到边

Ctrl + .：快速解决

Shift + F12：显示引用

F2：重命名符号

Ctrl + Shift + . /，：替换为下一个/上一个值

Ctrl + K Ctrl + X：修剪尾随空格

Ctrl + K M：更改文件语言

Ctrl+F4, Ctrl+W：关闭编辑器

Ctrl+K F：关闭文件夹

Ctrl+\：拆分编辑器

Ctrl+ 1 / 2 / 3：聚焦到第1，第2或第3编辑器组

Ctrl+K Ctrl+ ←/→：聚焦到上一个/下一个编辑器组

Ctrl+Shift+PgUp / PgDown：向左/向右移动编辑器

Ctrl+K ← / →：移动活动编辑器组

Ctrl+N：新文件

Ctrl+O：打开文件

Ctrl+S：保存

Ctrl+Shift+S：另存为

Ctrl+K S：全部保存

Ctrl+F4：关闭

Ctrl+K Ctrl+W：关闭所有

Ctrl+Shift+T：重新打开关闭的编辑器

Ctrl+K：输入保持打开

Ctrl+Tab：打开下一个

Ctrl+Shift+Tab：打开上一个

Ctrl+K P：复制活动文件的路径

Ctrl+K R：显示资源管理器中的活动文件

Ctrl+K O：显示新窗口/实例中的活动文件

F11：切换全屏

Shift+Alt+1：切换编辑器布局

Ctrl+ = / -：放大/缩小

Ctrl+B：切换侧栏可见性

Ctrl+Shift+E：显示浏览器/切换焦点

Ctrl+Shift+F：显示搜索

Ctrl+Shift+G：显示

Ctrl+Shift+D：显示调试

Ctrl+Shift+X：显示扩展

Ctrl+Shift+H：替换文件

Ctrl+Shift+J：切换搜索详细信息

Ctrl+Shift+C：打开新命令提示符/终端

Ctrl+Shift+U：显示输出面板

Ctrl+Shift+V：切换Markdown预览

Ctrl+K V：从旁边打开Markdown预览

F9：切换断点

F5：开始/继续

Shift+F5：停止

F11 / Shift+F11：下一步/上一步

F10：跳过

Ctrl+K Ctrl+I：显示悬停

Ctrl+`：显示集成终端

Ctrl+Shift+`：创建新终端

Ctrl+Shift+C：复制选定

Ctrl+Shift+V：粘贴到活动端子

Ctrl+↑ / ↓：向上/向下滚动

Shift+PgUp / PgDown：向上/向下滚动页面

Ctrl+Home / End：滚动到顶部/底部