提升效率和质量：必备的 VS Code 扩展

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

Visual Studio Code 是目前市场上非常流行且易于使用的代码编辑器。如果您专注于使用 JavaScript 框架进行前端开发，这些扩展程序可以极大地提高您的工作效率并节省时间。

在众多类似文章中，这篇文章有何独特之处？它源于我个人的开发经验。同事们经常询问我使用的扩展程序，本文将分享他们的心得体会。如果您正在寻找经过实践检验、能够提升编码体验的扩展程序，那么这篇文章正是您所需要的。

文本格式和可读性

Prettier — 代码格式化程序

这款扩展程序会自动格式化您的代码，使其看起来整洁统一。它就像一个代码整理的私人助理，可以为您节省大量时间和精力。您可以根据项目需求对其进行配置。

颜色高亮

这款扩展程序是一款被低估但非常实用的工具，尤其适用于 UI 开发。它可以在代码编辑器中高亮显示颜色，让您轻松处理颜色代码，并确保视觉呈现效果完美。在下面的截图中，颜色#43feee已被高亮显示，从而降低了出错的几率。

缩进彩虹

它通过使用缩进颜色来可视化缩进级别，从而提高代码可读性。此扩展程序为每个缩进级别添加了细微的颜色变化，使嵌套代码结构更容易一目了然地理解。

更改大小写

它提供了在驼峰式命名法、常量式命名法或蛇形式命名法之间进行转换的直观快捷方式，使大小写转换变得无缝且毫不费力。

代码拼写检查器

它有助于发现代码中的拼写错误和打字错误，确保代码更简洁、更易读。它是维护代码质量和避免意外错误的实用工具。

代码质量和改进

ESLint

ESLint 是一个强大的工具，可以确保你的 JavaScript 代码质量。它会扫描你的代码，查找错误、风格不一致之处和常见错误，帮助你编写更简洁、更可靠的代码。你可以通过在配置文件中创建自定义规则集来配置 ESLint，使其适用于你的项目。

例如，如果您的项目禁止嵌套三元表达式，ESLint 会在编辑器中标记它们。同样，如果像 DDMMYYYY 这样的变量未定义，ESLint 也会高亮显示。您甚至可以为每种问题类型指定严重级别，从而可以对其进行优先级排序并相应地处理。这种积极主动的代码质量管理方法有助于预防错误，并在整个项目中保持一致性。

误差透镜

这是一个 VS Code 扩展，可以增强代码编辑器中的错误高亮显示功能。它能针对常见错误和警告提供即时反馈，使开发人员能够在编写代码的同时快速解决问题。

JS重构助手

对于使用 JavaScript、TypeScript、React 和 Vue.js 的开发者来说，这是一款必不可少的工具。它提供了超过 120 种代码操作，可以高效地编辑、现代化和重构代码，从而简化代码维护和优化。

SonarLint

它提供的分析功能远不止简单的代码检查。SonarLint 不仅能检测代码问题，还能深入分析代码质量、安全漏洞和潜在的性能瓶颈。

它利用基于行业最佳实践的规则集，并可与 SonarQube 或 SonarCloud 集成，实现集中式代码质量管理。强烈建议大型项目使用此方案。

开发工具和实用程序

控制台忍者

它通过在代码旁边直接显示 console.log 输出和运行时错误，改进了 JS 开发工作流程。此扩展程序提供了便捷的调试信息访问方式，增强了代码理解和问题解决能力。

Turbo 控制台日志

它能加快编写有效日志信息的速度。此扩展程序可自动插入 console.log 语句，从而节省调试和故障排除的时间和精力。这是我使用频率最高的扩展程序之一，也经常有人问起它。

1. 选择或悬停在正在调试的变量上（手动选择始终会覆盖悬停选择）
2. 按下ctrl + alt + L（Windows）或ctrl + option + L（Mac）

日志消息将插入到与所选变量相关的下一行。

GitLens

对于依赖 Git 进行版本控制的开发者来说，GitLens 是一款必备的扩展程序。借助 GitLens，您可以轻松地可视化代码作者信息、浏览 Git 仓库，并深入了解项目的历史和演变过程。

GitLens 的一项关键特性是能够直接在代码中显示详细的注释，也就是所谓的“责任归属”信息。这样，您可以清楚地看到每行代码的最后修改者以及修改时间。通过提供这种级别的代码作者信息可见性，GitLens 可以帮助您理解每行代码背后的上下文，从而更有效地与团队协作。

Mintlify Doc Writer

它是一款基于人工智能的 VS Code 文档编写工具。它提供智能建议和自动补全功能，帮助用户使用各种编程语言编写文档。

它支持 Markdown 格式，并与 VS Code 无缝集成，帮助开发人员轻松创建专业文档。

进口成本

此扩展程序会在编辑器中直接显示导入包的大小。它利用 webpack 来检测导入包的大小。

它可以通过识别项目中使用的大型库来帮助提高性能。

特定语言工具

自动关闭标签

当您输入开始标签的结束括号时，它会自动添加 HTML/XML 结束标签。这项省时功能减少了手动操作，简化了编码流程，从而提高了开发速度和效率。

自动重命名标签

当我们重命名一个标签时，它会自动重命名配对的 HTML/XML 标签。这个虽小但实用的功能可以节省时间，让编码更高效、更轻松。

CSS转换器

它可以将 HTML CSS 转换为 JS CSS，用于样式组件，反之亦然。

1. 选择要转换的 CSS 文本

2. 输入Shift + Command + V（mac）、Shift + Ctrl + V（windows/linux）

测试和测试覆盖率

笑话

它帮助开发者直接在编辑器内运行和调试 Jest 测试。凭借内联测试结果和直观的导航，它简化了 JavaScript 项目的测试工作流程。

覆盖式排水沟

它能直接在代码编辑器中显示由 lcov 或 xml 报告生成的测试覆盖率数据，并提供代码覆盖率方面的深入分析，帮助您评估测试套件的有效性。它无需切换到其他窗口，从而节省了时间。

奖金

WakaTime

它会自动跟踪您使用不同编程语言的编码时间，提供有价值的见解来优化您的工作效率。

VS Code 自动保存设置

我发现一个非常实用的省时技巧：将 VS Code 的自动保存设置设为 onFocusChange。这样，每当我切换到其他文件或应用程序时，我的更改都会自动保存。这避免了手动保存文件，也避免了丢失修改的风险。此外，对于移动或 Web 应用程序，此设置允许我在切换到浏览器或模拟器时立即看到更新后的更改，从而加快开发速度。

结语

上述工具通过自动化任务和简化工作流程，显著提升了开发体验。它们在代码编辑器中提供代码格式化、错误检测和版本控制集成等功能，从而为开发人员节省了大量时间和精力。