VSCode使用—常用插件和快捷键

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