VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。

工具篇（23）

Chinese（Simplified）

vscode 我们都知道是微软的开源软件，对于英文不好的同学呢，使用中文汉化是首先要做的，所以笔者推荐汉化插件。

Chinese（Simplified）（简体中文）Language Pack for Visual Studio Code : 此中文（简体）语言包为 VS Code 提供本地化界面。

• 插件名：Chinese（Simplified）（简体中文）Language Pack for Visual Studio Code
• 官方地址：https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans
• 用法：通过使用“Configure Display Language”命令显式设置 VS Code 显示语言，可以替代默认 UI 语言。 按下“Ctrl+Shift+P”组合键以显示“命令面板”，然后键入“display”以筛选并显示“Configure Display Language”命令。按“Enter”，然后会按区域设置显示安装的语言列表，并突出显示当前语言设置。选择另一个“语言”以切换 UI 语言。 请参阅文档并获取更多信息。

Polacode-2020

Polacode-2020 : 如果你想要一种简单的方法来为你的片段的任何选择提供那些漂亮的视觉效果。

• 插件名：Polacode-2020
• 官方地址：https://marketplace.visualstudio.com/items?itemName=jeff-hykin.polacode-2019
• 特征：

• 选中需要截图的范围即可生成代码块的截图
• 可以设置想要的阴影、背景颜色

• 用法：command+shift+p、fn+F1(Mac) / ctrl+shift+p(Window)，选择Polacode，然后选中需要截图的范围即可

CodeSnap

CodeSnap : 在 VS Code 中为您的代码截取漂亮的屏幕截图！

• 插件名：CodeSnap
• 官方地址：https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
• 特征：

• 快速保存代码的屏幕截图
• 将屏幕截图复制到剪贴板
• 显示行号
• 许多其他配置选项
• 用法：选中需要截取的代码块，然后右键点击 CodeSnap 即可

Image preview

Image preview : 在编辑器的间隙中和鼠标悬停在图片上可预览图像。

• 插件名：Image preview
• 官方地址：https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview
• 特性：无论是在 HTML 标签中还是在 style 中引入的图像都能在编辑器的间隙中和鼠标悬停时预览
• 用法：在编辑器的间隙中和鼠标悬停在图片链接上可预览图像

Image Sprites

在开发某些页面时总会遇到拥有很多小图片的需求，这时使用雪碧图就可以减少服务器请求的数量并节省带宽，在没有UI帮助的情况下，选用该插件是个不错的选择。

Image Sprites : 图像精灵是放入单个图像的图像集合。包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节省带宽。

• 插件名：Image Sprites
• 官方地址：https://marketplace.visualstudio.com/items?itemName=gurayyarar.imagesprites
• 特性：

• 易于创建和更新图像精灵
• 支持 png、jpg 和 bmp 图像
• 配置垂直或水平精灵布局
• 使用 sprite 图像位置生成 LESS、Sass 或 CSS 文件
• 您可以使用不同的设置选项管理所有精灵

• 用法：

• Sprite文件夹中的所有图像
• 右键单击包含图像的文件夹并选择Create Image Sprite

• Sprite一些图像
• 选择图片，右键选择Create Image Sprite

• 这两种方式将生成一个设置.sprite文件以及生成的默认文件。image file.css

Svg Preview

当你找到一个合适的 svg 图像却因为颜色、形态等不合适时，可以使用此插件进行修改。

Svg Preview : VSCode 的 Svg 预览。

• 插件名：Svg Preview
• 官方地址：https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview
• 特征：

• 实时预览 svg 文件和 svg 的内部文件
• 预览的平移和缩放（最高32767%）

file-size

file-size : 一个简单的扩展。在状态栏中显示当前文本文件的大小。保存文件或更改活动选项卡时，状态将更新。

• 插件名：file-size
• 官方地址：https://marketplace.visualstudio.com/items?itemName=zh9528.file-size

Live Server

Live Server : 为静态和动态页面启动具有实时重新加载功能的本地开发服务器。

• 插件名：Live Server
• 官方地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
• 特征：

• 具有实时浏览器重新加载的快速开发实时服务器。
• 从状态栏中单击即可启动或停止服务器。
• 从资源管理器菜单中打开一个 HTML 文件到浏览器。[快速 Gif 演示]。
• 支持排除文件以进行更改检测。
• 热键控制。
• 可定制的端口号、服务器根目录、默认浏览器。
• 使用高级命令行支持任何浏览器（例如：Firefox Nightly） 。
• 支持 Chrome 调试附件（更多信息）。[快速 Gif 演示]。
• 通过 WLAN 远程连接（例如：使用移动设备连接）[需要帮助吗？请参阅常见问题部分]
• 使用首选主机名（localhost 或 127.0.0.1）。
• Live Reload 功能的可定制支持标签。（默认为Body或head）
• SVG 支持
• https支持。
• 支持代理。
• 启用 CORS
• 支持多根工作区。
• 通过Live Server Web Extension支持任何文件甚至是动态页面。

Profile Switcher

Profile Switcher : 此扩展允许您定义许多设置配置文件，您可以轻松地在它们之间切换。这个扩展的最初想法来自于我希望有一种简单的方法让我将我的 VS Code 切换到更好地优化呈现的设置（更改主题、增加字体大小等）。

• 插件名：Profile Switcher
• 官方地址：https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher
• 特征：该扩展引入了四个可以从命令面板使用的新命令。所有命令都以Profile Switcher

Project Manager

当你需要在 vscode 中打开很多不同性质的项目时，Project Manager 是不错的项目管理插件。

Project Manager : 它可以帮助您轻松访问您的项目，无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的项目（也称为收藏夹），或选择自动检测Git、Mercurial或SVN存储库、VSCode文件夹或任何其他文件夹。

• 插件名：Project Manager
• 官方地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
• 特征：可用命令：

• Project Manager: Save Project将当前文件夹/工作区另存为新项目
• Project Manager: Edit Project手动编辑您的项目 ( projects.json)
• Project Manager: List Projects to Open列出所有已保存/检测到的项目并选择一个
• Project Manager: List Projects to Open in New Window列出所有已保存/检测到的项目并选择一个在新窗口中打开
• Project Manager: Filter Projects by Tag按选定标签过滤收藏项目

• 用法：

• Project Manager扩展有自己的Side Bar，带有各种命令来提高您的工作效率
• 您可以定义自定义标签（通过设置），为每个项目projectManager.tags定义多个标签，并过滤标记在其标签上的项目

今天的文章VSCode中值得推荐的常用的23个高效前端插件（工具篇）（一）分享到此就结束了，感谢您的阅读。