JavaScript Web 开发人员在 2021 年应该拥有的每个 VS Code 扩展（带有 gif！）

必备扩展（按字母顺序排列）

奖金

我不再使用的扩展程序

还要别的吗？

Visual Studio Code 是一款开箱即用的强大编辑器，但还有许多 VS Code 扩展可以使其更加强大！

如果您是 VS Code 新手或编程新手，我建议您通读这里的所有内容，看看是否有新的方法可以优化您的工作流程。如果您是 VS Code 老手，请查看这里是否有您不了解的内容，如果我遗漏了任何内容，请在评论区告诉我！

VS Code 一直在不断更新，我会定期检查我的扩展程序，看看哪些有价值，哪些没有。我会在添加或删除扩展程序时持续更新此列表。

必备扩展（按字母顺序排列）

1. 更好的评论

   
   Better Comments会根据注释的前缀以不同的颜色显示它们。这有助于快速直观地浏览和识别代码中的重要部分。请注意，只有安装了扩展程序才会显示这些颜色，因此这最适合个人使用。

2. 书签

   
   您是否曾经遇到过这样的情况：开发一个功能时，需要跨越多个文件，包含 10 个函数，结果不得不四处寻找每个函数？书签可以帮助您追踪所有重要的代码。只需添加书签，以后就能轻松找到当前位置！

3. 括号对着色器

   
   查找缺失的括号是我最不喜欢的编程活动。幸运的是，Bracket Pair Colorizer通过对所有对应的括号和方括号进行颜色编码，让这项工作变得简单得多。 （注意：Bracket Pair Colorizer 存在一些已知的性能问题， Bracket Pair Colorizer 2的 Beta 版本已经发布了，可以修复这个问题。感谢@garret_alex提供的提示）

4. 变更案例

   
   change-case提供了一种简单的方法来将单词或变量名称更改为各种情况，包括、、camelCase等等！snake_caseTitleCase

5. 代码拼写检查器

   
   代码拼写检查器可以查找拼写错误，即使它们位于变量名中间。直到我安装它并开始查找我所有的小拼写错误时，我才真正意识到它的价值。事实证明，在代码编辑器中使用拼写检查器和在文字处理器中使用拼写检查器一样有用！

6. ES7 React/Redux/GraphQL/React-Native 代码片段

   
   ES7 Snippets有很多实用的工具可以自动填充样板文本。每当我编写导入代码或 React 组件时，它都能帮我节省大量时间。

7. ESLint

   
   ESLint是一款出色的语法检查器，它可以在代码运行前帮你找出语法错误，从而发现问题。需要在项目中配置 ESLint 。

8. GitLens

   
   GitLens是一个功能丰富的扩展程序，可以让你深入了解仓库的提交历史记录。就我个人而言，我最常使用它来查看谁在内联代码中编写了代码，查看文件的先前版本，以及将 HEAD 与其他提交/分支进行比较。

9. 收集

   
   如果您是 React 开发人员，您可能经常会发现自己将大型组件分解为单独文件中的较小组件，以及在类和功能组件之间切换。glean会为您自动执行所有这些操作，并自动插入所有需要的样板。

10. 进口成本

    
    导入成本 (Import Cost)可帮助您了解导入的大小。它会以内联方式显示每个导入的大小，如果导入量超过正常值，则会以红色和黄色警告颜色显示。

11. 缩进彩虹

    
    indent-rainbow让你一眼就能看到缩进。而且，它超级漂亮，对吧？

12. JavaScript 控制台实用程序

    
    发现自己console.log()经常用 -ing？JavaScript Console Utils 会帮你自动完成这项工作console.log()，它会在代码中插入带有纯文本变量名和变量值的语句。甚至还有一个快捷键，可以console.log()在你使用完所有语句后将其删除！

13. Prettier

    
    这一点很重要。我甚至可以说，任何人都不应该在不使用 Prettier 的情况下编写代码。Prettier可以alt使用++自动格式化你的代码，或者你也可以让它在每次保存时自动格式化。这比记住每个分号和缩进要节省大量的时间。shiftF

14. 相对路径

    
    您是否曾在大型代码库中苦苦思索如何引用另一个文件？究竟../需要多少个 ' 才能返回到正确的目录？返回的路径又是什么？“相对路径”功能可让您搜索所有文件，并自动插入相对于当前文件的路径。无需进行树状图计数！

15. 设置同步

    没有很好的方法来演示这一点，所以这里是我一直以来最喜欢的 gif： 关于扩展：当你在编辑器中完成设置后，Settings Sync会将你的配置保存到 GitHub Gist，从而轻松地跨工作站同步所有 VS Code 设置和扩展。在过去的一年里，他们甚至做了一些改进，使同步/身份验证更加便捷。

16. 切换报价

    
    使用Toggle Quotes，只需使用⌘+ '（或ctrl+ '）即可在使用`、'和"

17. 版本镜头

    
    跟踪 npm 软件包的所有最新版本可能很麻烦。Version Lens可以内联显示已安装版本package.json与当前版本的比较情况。

奖金

这些东西并不能显著提高我的日常工作效率，但是天哪，我确实喜欢它们：

• 德古拉官方– 我喜欢的颜色主题
• file-icons – 提供独特的文件图标，方便在文件浏览器中快速识别文件类型。我发现它最有助于快速区分.ts、.js、.test.ts和.test.js。
• Fira Code – 一款外观精美的字体，包含一些漂亮的连字！这意味着像<=和 这样!==会显示为单个字符。它本身并没有提升我的编码能力，但让我感觉更酷了。ℹ️其他读者推荐的连字字体： JetBrains Mono、Cascadia Code、Recursive Sans 和 Mono

注意：连字在程序员中可能是一个有争议的话题。我之所以使用它们，是因为我觉得它们很性感。至于其他，我就不多说了。

• Vim – 刚开始编程的时候，我就迫不及待地想成为一名Vim 编辑器的高级用户。VS Code 的功能远超 Vim，但有时我会怀念那些老旧的“用 5 个神秘的按键更改 100 行代码”的功能。我通常都禁用这个功能，但偶尔心情好的时候也会打开它。

我不再使用的扩展程序

有时我会停止使用某个扩展，因为该功能已添加到基础 VS Code 中，或者该扩展并不像我曾经想象的那么有用。以下是一些我曾经大量使用但最终卸载的扩展：

• Indenticator – 使用突出显示的垂直线直观地查看缩进。此功能现已成为 VS Code 的标准功能，但仍存在一些差异。VS Code 原生设置editor.renderIndentGuides：editor.highlightActiveIndentGuide
• 自动关闭标签和自动重命名标签——每当您输入开始标签时，都会自动提供关闭 HTML 标签，并保持它们更新以相互匹配。目前，大部分此功能已包含在 VS Code 中，这些插件已知会导致严重的性能问题（感谢 Matt Waler 提供的提示）。原生 VS Code 设置：html.autoClosingTags,html.mirrorCursorOnMatchingTag。
• 颜色高亮– 使用 CSS 颜色值所代表的颜色高亮显示。VS Code 现在会在值旁边原生显示一个彩色框，这对我来说已经足够好了：editor.colorDecorators。

还要别的吗？

我漏掉了什么？还有其他扩展程序能帮助你提高程序员效率吗？请在评论区留言告诉我！