项目开发应该知道这些vscode插件（40+个）

前言

以下插件如果安装了未生效，那么应该重启vscode。

公共基础插件：

Svg Preview

在vscode中能实时查看svg图片

Auto Rename Tag

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

Bracket Pair Colorizer

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

EditorConfig for VS Code

让使用不同编辑器的开发者能够轻松惬意的遵守最基本的代码规范

Elm Emmet

根据一定的语法使用，快速生成html代码片段
参考这里

Beautify

格式化 html ,js,css

ESLint

脚本代码规范化检查，语法校验

Highlight Matching Tag

突出显示匹配的开始或结束标签。

JavaScript (ES6) code snippets

ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

DotENV

.env 文件高亮

open in browser

在html文件中能直接鼠标右键，能单击打开浏览器选项启动

Path Intellisense

引入文件路径智能提示

Image preview

在html标签中引入图片，在悬停时显示图像预览，且能左边会有小图片显示，也能快速跳转到图片文件。

TODO Highlight

在代码中突出显示 TODO，FIXME 和其他注释。（一般在项目开发中需要重点做标记时使用）

Version Lens

显示 package.json 文件中每个软件包的最新版本。

HTML CSS Support

智能提示CSS类名以及id

HTML Snippets

智能提示HTML标签，以及标签含义

Color Highlight

颜色值高亮。十六进制颜色值、rgb颜色值都智能显示！更重要的是，使用sass等css扩展语言在引入变量颜色值时，也能高亮显示颜色！！

jQuery Code Snippets （看项目使用）

jQuery代码智能提示

Markdown Preview Enhanced

实时预览markdown，markdown使用者必备

Debugger for Chrome

映射vscode上的断点到chrome上，方便调试
配置参考这里

CSS Peek

使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

Chinese (Simplified) Language Pack for Visual Studio Code

vscode的中文翻译包，安装之后重启vscode会发现原来英文界面变中文界面了。

Npm Intellisense（nodejs必备）

使用require 时的包名提示

Live Server（单独新建html来调测某个功能时很方便）

启动服务运行代码，保存后自动刷新。
在html文件中鼠标右键点击下图中的选项，会自动开启一个服务来运行我们的代码。修改文件后保存会自动刷新页面。

Code Runner（代码运行器）

1、平时写一些测试代码，和一些逻辑库，快捷键 Ctrl+Alt+N, 喝口水就可以看到结果了。
2、可以选中部分代码运行（前提是选中代码逻辑完整），也可以整个文件运行（也需要该文件的代码逻辑完整）。不选中运行就是运行整个文件的代码。
3、一键运行多种语言运行代码片段或代码文件: c，c + + ，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT/CMD，BASH/SH，f # Script，f # (。NET 核心) ，c # 脚本，多到你想不到。