转载说明：原创不易，未经授权，谢绝任何形式的转载

开发高质量的软件应用程序可能是艰巨的，因为许多组成部分必须协同工作才能创建出一个可运行的解决方案。这就是为什么开发人员需要尽可能获得所有帮助和便利，特别是在保护他们的应用程序时。

Visual Studio Code（VS Code）是最受欢迎的开源代码编辑器之一，有很多原因。它兼容三大主流操作系统（Windows、macOS和Linux），而且我们可以轻松地根据自己的喜好进行配置。最重要的是，我们可以安装扩展来增强其功能。

VS Code有丰富的扩展，从简单的用户界面（UI）更改到高级漏洞检测。本文重点介绍后者，突出了前五个VS Code扩展，帮助我们编写更安全的代码并保持安全最佳实践。

1、1Password

使用1Password来保护密码的安全

在代码中以明文形式包含密码和机密信息是一个重大的安全风险，因为这样很容易泄露敏感信息。最佳实践是将这些值存储在外部保险库中，并使用变量来访问它们。

然而，在编写代码时，不断在代码编辑器和密码保险库之间切换以创建新的秘密和密码，或者检查现有秘密的值变得很繁琐。1Password for VS Code是一个扩展，旨在通过直接从VS Code编辑器访问保险库来解决这个问题。

以下是1Password提供的主要功能概述。

首先，您可以使用命令面板在VS Code中创建一个新密码。您只需将值高亮显示，然后运行命令“1Password: Save in 1Password”。

这样可以让你给定义的变量贴上标签，自动存储到1Password，并替换代码中的引用。

您可以通过自动秘密检测进一步使用此功能。1Password VS Code扩展可以在代码或环境配置文件中检测和突出显示潜在的秘密或密码值。

VS Code的CodeLens功能是一个强大的工具，它在代码编辑器中显示代码元素之间的关系。在上面的图像中，CodeLens会在高亮选项上方显示“在1Password中保存”。如图所示，这个选项可以快速访问“在1Password中保存”的命令。

还可以使用命令`1Password: Get from 1Password`和`1Password: Generate password`从保险库中检索现有项目并创建新项目。同样，这些功能可以减少开发人员在处理机密值时的阻力，因为他们无需离开代码编辑器并中断工作流程。

最后，1Password VS Code 扩展允许您检查和预览存储在保险库中的密码，如果它们在代码中被引用。将光标悬停在密码上将显示其当前值，但仅适用于非敏感密码。为了确保安全，无法预览敏感值，如密码。

2、Decompiler

使用 Decompiler 反编译可执行文件。

Decompiler 有时被用来将编译后的代码转换为源代码，以便开发人员进行检查。反编译在安全领域是一种有价值的工具。它使安全专家能够评估软件的安全性，甚至了解恶意软件的行为。为了做到这一点，通常需要定制的软件，或者根据可执行文件的类型使用不同的软件。

Decompiler 是一款为VS Code提供反编译功能的扩展。您只需在VS Code中右键单击文件，选择“Decompiler”，即可对诸如Windows PE、Linux ELF、IOS、JAR文件和Android APK等二进制可执行文件进行反编译。

反编译后的文件将保存在一个“反编译器”文件夹中。对于JAR文件，这将打开JAR文件并将其解压到其中的文件夹和文件中，从而提供对原始Java文件的访问，如下图所示。

反编译有可能揭示代码中的安全漏洞，例如缓冲区溢出或竞态条件。发现这些漏洞有助于我们确定软件是否安全，并在发布软件之前采取措施修复它们。

我们还可以使用反编译来了解第三方代码的行为，例如库和API，这些通常以编译形式分发。反编译这些组件有助于评估它们在开发项目中的适用性，并识别任何安全漏洞。

3、Cloak

用Cloak隐藏敏感值

在开发应用程序时，如果环境配置文件中包含秘密和密码，开发人员可能希望将这些内容对他人隐藏起来。但是，在协作环境或外部位置（如咖啡馆）工作时，任何人都可以看到你的屏幕，这就变得很困难。通过不断地看守屏幕或不打开文件来保护这些值的安全性是繁琐的，也会影响工作效率。

这是一个包含API密钥和密码的.env文件示例。这些变量的内容可以被任何能看到屏幕的人读取：

为了克服这个问题，我们可以使用VS Code扩展程序Cloak。Cloak的设计目的是在打开环境配置文件时隐藏屏幕上的秘密值。要激活Cloak，请使用VS Code命令面板并运行“Cloak: Hide Secrets”命令。这将在屏幕上将值变为空白。

这个扩展程序不会以任何方式修改文件。它只是掩盖了秘密的值，以防止它们被显示出来。Cloak可以防止不需要的人在外部环境中查看秘密和密码，使我们能够在保持应用程序安全的同时继续工作。

4、ESLint

使用ESLint扩展的安全最佳实践

在保护JavaScript项目时，大多数现代扩展只能检测安全标志。然而，开发人员经常需要能够集成到软件交付流程中以自动化安全检查的工具。

ESLint扩展是在使用VS Code编写JavaScript时使用的开源代码检查工具。JavaScript的动态和弱类型特性使其容易出现开发者错误。ESLint通过分析代码来确保其语法正确并符合最佳实践和标准，从而减轻了这种倾向。它会在代码中突出显示语法错误，使我们能够快速发现并修复它们。此外，它还有助于检测错误和潜在的代码漏洞，确保更高水平的代码完整性。

ESLint是一种适合于强制执行代码规范的方式，尤其适用于团队项目。借助这个扩展，每个团队成员都遵循相同的自动化的常见样式和规范。

这里，问候常量使用双引号，而`secondGreeting`使用单引号。另外，请注意有些行以分号结尾，而其他行则没有。尽管存在这些细微差异，但这段代码将能够正确运行，因为这些行在语法上是正确的。

然而，在共同项目中工作时，保持团队成员之间的一致约定非常重要。我们可以使用ESLint来强制执行这一点，通过定义规则或使用ESLint软件包的默认linting设置。我们还可以选择自定义这些设置：

ESLint还有自己的一套插件，比如安全插件，可以发现不良的安全实践，包括使用不安全的正则表达式或`eval`函数。我们可以在VS Code中使用这个插件来检查正在开发的代码，确保应用程序是安全的，并在代码通过构建流程之前解决问题。

5、Snyk

检测和修复代码中的漏洞对于构建安全的软件系统至关重要。在恶意行为者利用这些漏洞之前，我们必须迅速解决这些问题。然而，不断在代码编辑器和漏洞扫描器之间切换可能会很繁琐且耗时。

Snyk VSCode 扩展通过在 VSCode 编辑器中提供漏洞扫描和修复功能，解决了这个问题。该扩展会扫描代码中的以下问题类型：

• 开源安全——我们项目中使用的开源依赖中的安全漏洞。
• 代码安全 — 我们代码中的安全漏洞。
• 代码质量 — 我们代码的质量。
• 基础设施即代码（IAC）安全——IAC模板文件中的配置问题，例如Kubernetes和Terraform。

当我们打开一个项目文件夹时，Snyk代码分析会自动运行。我们还可以通过在命令面板中运行`Snyk: Rescan`来轻松执行手动扫描。

Snyk扩展还提供漏洞检测功能，可以在我们编写代码时突出显示潜在的漏洞。它描述了问题及其严重程度，并提供了一些预防的最佳实践。

该扩展还提供了对我们代码进行的各种扫描结果的概述：

通过实时漏洞检测和详细的修复步骤，Snyk VSCode帮助我们在不中断工作流程的情况下优先考虑安全。

结束

最优秀的开发人员的目标是编写安全、清晰和易于维护的代码，而这五个扩展可以帮助我们实现这一目标。1Password可以保护密码免受第三方的侵害，因此它们不会存储在代码中。ESLint帮助我们编写符合语法规范、没有错误并符合最佳实践的代码。Decompiler 允许我们评估可执行文件的源代码，以确保其没有恶意软件。Cloak 可以隐藏屏幕上显示的敏感值。最后，Snyk VSCode扩展可以快速准确地扫描代码中的漏洞。

在安装VSCode扩展之前，重要的是要研究一下扩展和背后的公司。扩展可以帮助提高安全性，但是一个糟糕的扩展可能会危及我们的应用程序的机密信息和密码。

将密码存储的责任委托给第三方本质上是对安全的信任。因此，在安装任何与密码和秘密管理相关的扩展之前，验证第三方的重要性不可忽视。

为创建更安全的应用程序，没有一种适用于所有情况的解决方案。根据项目的不同，其中一些扩展可能比其他扩展更适用或相关。然而，每个扩展都有独特的优势，可以使 VSCode 编辑器更加方便。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。