好用到飞起的十款vscode插件🚀（前端篇）
前言
作为一名前端，适当的使用一些插件能让你的开发体验和效率提升数倍；
CSS Navigation
CSS Navigation是一款通过点击类名、id、标签名即可跳转到具体样式定义的插件，以下是简单使用
CSS Navigation.png
点击就可以跳转到对应的样式去
image.png
CodeSnap
CodeSnap可以让你快速保存代码的屏幕截图，以便于你与他人分享代码片段。
image.png
安装完后在代码页右击找到并点击CodeSnap📷，选中你要分享的代码片段，在右侧点击那个小圈圈即可将代码以图片的格式保存到本地。
image.png
Git Graph
image.png
装好以后可以看到；
image.png
在此拓展插件下，你可以查看git的具体的commit信息和分支合并信息等
image.png
JavaScript (ES6) code snippets
JavaScript(ES6)代码片段插件可以帮助开发人员节省时间：开发人员可以在一个地方获取所有的代码，而不需要重复的输入。除此之外，JavaScript(ES6)代码片段插件还可以检查TypeScript/TSLint 的代码。
image.png
Auto Close Tag
Auto Close Tag（自动关闭标签）插件从 VS Code 1.16 开始，实现了对HTML、Handlebars 和 Razor 文件的关闭标记支持。此扩展支持其他语言，如 XML、PHP、Vue、JavaScript、TypeScript、JSX、TSX 等。
image.png
Prettier — Code formatter
Prettier — Code formatter（代码格式化工具）插件可以帮助开发者格式化 JavaScript、HTML、CSS 代码。
image.png
Auto Rename Tag
Auto Rename Tag（自动重命名标签）可以帮助开发人员自动重命名配对的 HTML/XML 标签。
image.png
Path intellisense
Path intellisense（路径感知）插件可以更轻松地识别文件路径，开发者只需要输入文件名的前缀，插件会自动补全该文件夹的全路径;
GitLens
该插件增强了 VS Code 中的 Git，并从每个存储库中释放隐藏数据。可以快速查看代码的编写者、轻松导航和探索 Git 存储库、通过丰富的可视化效果和强大的比较命令获取有效信息，以及执行更多操作，帮助我们更好地理解代码。
image.png
Git History
该插件用于查看 Git 日志和文件历史记录并比较分支或提交;
image.png
CSS Peek
使用该插件，可以直接从 HTML 和 JavaScript 文件快速导航和编辑外部样式表中定义的 CSS 样式。它提供了一个“Peek”功能，在 HTML 中选择某个 class 或者 id 名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置。
该插件有利于处理大型或复杂的 CSS 样式表，因为它可以快速查找和编辑应用于特定元素的样式，而无需浏览多个文件或搜索大量代码。
image.png
image.png
Image preview
通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率
image.png
Colorize
Colorize 会给颜色代码增加一个当前匹配代码颜色的背景。它通过 CSS 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba和argb的彩色背景将 CSS 颜色可视化，帮助开发者快速区分颜色。
image.png
Import Cost
当导入 JavaScript 包时，它会立即显示它们的大小，从而深入了解它们对项目性能的影响。它无缝支持 npm 和 Yarn 等包管理器，简化了优化项目速度的过程。
image.png
image.png
Eslint
可以发现代码中的错误和错误，从而使编码变得更好。它通过显示可能出现错误或警告的位置来帮助您避免错误。
另外，它甚至可以自动修复这些问题。
image.png
