好用到飞起的十款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