VSCode开发环境-常用插件&快捷键

1.什么是Visual Studio Code

Visual Studio Code：是由微软开发的一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码、免费开源的现代化轻量级编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

2.安装VSCode(Visual Studio Code)

官网下载：https://code.visualstudio.com

3.安装插件

a、中文（简体）语言包
插件名：Chinese (Simplified) Language Pack for Visual Studio Code
将界面转换为中文，对英语不好的人，非常友好。

例：配置vscode为中文提示-汉化 (💕所有插件，只要搜索插件名就能找到哦！）

b、浏览器打开
插件名：open in browser(或View In Browser)
把HTML文件用浏览器打开，查看效果。

c、资源目录加上图标
插件名：vscode-icons

d、括号对彩色化
插件名：Bracket Pair Colorizer
成对的彩色括号，让括号拥有独立的颜色，便于区分。

e、高亮匹对标签
插件名：Highlight Matching Tag
高亮显示对应HTML标签以及标识出对应的各种括号。

f、格式化代码工具
插件名：beautify
美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。

g、提供css中使用颜色的相关信息
插件名：Color Info
在颜色上悬停光标，就可以预览色块中色彩模型的相关信息。

h、ES6语法代码段提示
插件名：JavaScript(ES6)code snippets

i、自动闭合HTML标签
插件名：Auto Close Tag

j、自动同步标签名
插件名：Auto Rename Tag
修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改。

k、调试
插件名：Debugger for Chrome
从VS Code调试在Google Chrome中运行的JavaScript代码。

l、特效
插件名：Power Mode
打代码时特效。

• 配置：
  选择菜单：文件-首选项-设置，打开设置窗口，
  选择选项：用户-扩展-power mode，选中“Powermode:Enabled”选项。修改“Powermode:Presets”改变动态效果。

4.常用快捷键

a) 单行注释：Ctrl + /
b) 多行/块注释：Alt + Shift + A
c) 显示/隐藏左侧目录栏：Ctrl + B
d) 控制台终端显示/隐藏：Ctrl + ~
e) 代码格式化：Shift + Ctrl + F
f) 行增加缩减：Ctrl + [
g) 行减少缩减：Ctrl + ]
h) 字体放大/缩小：Ctrl + ( + 或 - ）