几个不错的 VS Code 必备前端插件

添加图标

图标插件vscode-icons：安装成功后，会根据不同的文件类型添加不同的图标样式。

Auto Close Tag

自动闭合HTML/XML标签

Auto Rename Tag

自动重命名HTML/XML标签

Autoprefixer

解析CSS并自动添加前缀

Bracket Pair Colorizer

用于着色匹配括号，让你的代码分层更清晰

Code Runner

运行代码片段或多种语言的代码文件

Code Spell Checker

源代码拼写检查器，提示代码中单词拼写错误

CSS Peek

允许查看CSS，并从HTML文件定位到CSS文件，文件定义跳转

DotENV

支持.env文件语法，高亮显示

Draw.io Integration

在VS code中绘制流程图

Git History

在VS code中集成git工具，查看git记录，文件历史记录，比较分支及提交代码等

Git Graph

Git Graph是类似于SourceTree的可视化版本控制插件，可以更新、提交代码，查看提交记录，审视代码

GitLens - Git supercharged

便于查看每行代码的提交记录，包括提交人、提交时间等

Highlight Matching Tag

突出显示匹配的标签

Image Preview

当你引入时在左侧会显示图片的缩略图，方便预览

Import Cost

在编辑器中展示引用包的大小，让你更了解你引入的包

Javascript console utils

帮助你更快速的添加console和删除console，确实方便

• 选择变量⌘ + ⇧ + L，将会输出，如console.log(' test ', test )
• ⌘ + ⇧ + D，将删除当前文档中的所有 console.log 语句

koroFileHeader

用于生成文件头部注释和函数注释的插件

• ⌃ + ⌘ + i可生成文件头部注释

<!--
 * @Author: your name
 * @Date: 2021-11-18 18:08:32
 * @LastEditTime: 2021-11-19 11:29:00
 * @LastEditors: your name
 * @Description: 
 * @FilePath: 
-->

• ⌃ + ⌘ + t自动解析函数参数，生成函数参数注释

/**
 * @description: 
 * @param {*} 
 * @return {*}
 */

npm Intellisense

代码插件，在导入语句中自动完成NPM模块

open in browser

允许你在默认浏览器或应用程序中打开当前文件。

Path Intellisense

自动识别文件路径，引用更方便

Svg Preview

方便预览SVG文件

Volar

volar与vetur相同都是一个针对vue的vscode插件，支持.vue文件的语法支持、高亮显示、格式校验、错误检测等，不过volar提供了更为强大的功能。