VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。
1. VSCode常用的开发插件
| 序号 | 插件名称 | 插件功能描述 | 功能类型 |
|---|---|---|---|
| 1 | Chinese | VSCode汉化 | VSCode语言切换 |
| 2 | One Monokai Theme | 设置颜色主题 | VSCode主题 |
| 3 | Material Icon Theme | VScode图标主题 | VScode图标主题 |
| 4 | vscode-icons | 实现对各种类型的文件前图标进行优化显示，从而使我们通过文件图标就可快速知道文件类型，而不用去看文件后缀 | 文件图标 |
| 5 | Path Intellisense | 自动提示文件路径 | 文件路径 |
| 6 | Local History | 将文件保存到本地历史记录中 | 文件记录 |
| 7 | Path Intellisence | 自动完成文件名 | 文件名 |
| 8 | GitLens | 方便查看git日志 | Git相关 |
| 9 | npm Intellisense | require 时的包提示 | 包提示 |
| 10 | Markdown Preview Enhanced | 实时预览Markdown | Markdown |
| 11 | markdownlint | markdown语法纠错 | Markdown |
| 12 | Auto Close Tag | 自动闭合HTML/XML标签 | HTML标签闭合 |
| 13 | Auto Rename Tag | 自动完成另一侧标签的同步修改 | HTML标签同步修改 |
| 14 | HTML Snippets | 智能提示HTML标签，以及标签含义 | HTML提示 |
| 15 | Beautify |
格式化 html ,js,css | 代码美化工具 |
| 16 | Bracket Pair Colorizer | 给括号加上不同的颜色，便于区分不同的区块 | 代码美化工具 |
| 17 | Debugger for Chrome |
映射vscode上的断点到chrome上，方便调试 | 调试工具 |
| 18 | open in browser |
右键快速在默认浏览器中打开当前文件（如：html文件） | 效果查看 |
| 19 | HTML CSS Support | 智能提示CSS类名和id | CSS类名和id智能提示 |
| 20 | IntelliSense for CSS class names in HTML |
HTML 中调用 CSS 类名时智能提示已定义的 CSS 类名 | CSS 类名智能提示 |
| 21 | Class autocomplete for HTML | 智能提示HTML class =“”属性 | 类属性智能自动完成 |
| 22 | JavaScript(ES6) code snippets | ES6语法智能提示，以及快速输入 | ES6语法提示 |
| 23 | jQuery Code Snippets | jQuery代码智能提示 | jQuery语法提示 |
| 24 | React/Redux/react-router Snippets | React/Redux/react-router语法智能提示 | React语法提示 |
| 25 | Vetur |
Vue多功能集成插件，错误提示等 | Vue工具 |
| 26 | ESLint |
js语法纠错，可以自定义配置 | 代码检查工具 |
| 27 | Code Runner |
不用搭建各种语言的开发环境，直接通过此插件就可以直接运行对应语言的代码 | 万能语言运行环境 |
| 28 | Code Spell Checker |
源代码拼写检查 | 拼写检查工具 |
| 29 | Document This |
在TypeScript和JavaScript文件中自动生成详细的JSDoc注释 | 快速注释 |
| 30 | TODO Highlight |
帮助标注那些功能需要继续实现或优化的代码 | 备忘插件 |
| 31 | Icon fonts | 流行图标字体的代码片段，如Font Awesome、Ionicons、Glyphicons、Octicons、Material Design图标等等 | 图标字体 |
插件安装步骤：以安装VSCode汉化插件Chinese为例
- 搜索插件
-
点击安装即可（注意：需重启vscode汉化才起效）
插件安装示例.png
Mac系统VScode设置中文：下载安装Chinese之后（和windows系统不同，此时重启vscode汉化不起效）；需要点击快捷键：
command + shift + p，搜索输入configure language，然后选择“配置显示语言”，最后选择zh-cn即可。
command + shift + p.png
zh-cn.png
2. VSCode快捷键
备注：查看VSCode顶部菜单栏，这里不再累赘叙述。
| 操作 | 快捷键 |
|---|---|
| 单行注释 | 【ctrl】+【/】 |
| 多行注释 | 【shift】+【alt】+【a】 |
| 换行 | 【ctrl】+【enter】 |
| 格式化 | 【shift】+【alt】+【f】 |
| 快速生成html | 【 ！】+【tab】 |
| 向上或向下移动当前行 | 【alt】+【up/down】 |
| 复制当前行到下行 | 【shift】+【alt】+【down】 |
| 生成代码的快捷键 | 比如你想快速生成10个tr，每个tr含有两个单元格：tr10>td2 |
