首页 > web前端 > js教程 > 正文

超越拼写检查:静态分析工具如何增强编码协作

Barbara Streisand
发布: 2024-11-01 07:12:02
原创
974 人浏览过

本周,我扩展了对软件开发中代码格式化重要性的了解。正如我们依靠具有拼写检查功能的文字处理软件来识别和纠正拼写错误一样,开发人员应该利用提供格式化和 linting 功能的代码编辑器来维护代码质量。

为什么使用静态分析工具

为了提高代码质量减少开发时间,程序员使用静态分析工具至关重要。当与多个贡献者合作项目时,遵守编码标准变得至关重要,因为它可以让其他人更轻松地阅读和理解代码。这种必要性导致了针对不同编程语言定制的各种工具的出现。对于本周的项目,我选择为我的 JavaScript 代码库实现 Prettier。除了格式化工具之外,linter 也是必不可少的。 linter 可帮助开发人员识别被忽视的错误,这些错误可能不会影响程序的执行,但如果不加以检查,可能会导致代码中出现重大问题。为此,我选择了 ESLint。

更漂亮

为了使用 Prettier,我使用以下命令将其本地安装在我的项目中:

npm install --save-dev --save-exact prettier

接下来,我创建了两个配置文件:.prettierrc 和 .prettierignore:

  • .prettierrc:此配置文件包含格式化规则。

Beyond Spellcheck: How Static Analysis Tools Enhance Collaboration in Coding

我将其保留为空对象,因为我想使用默认的 Prettier 设置而不覆盖任何规则。

  • .prettierignore:此文件列出了 Prettier 不应格式化的文件或目录。

Beyond Spellcheck: How Static Analysis Tools Enhance Collaboration in Coding

我包含了所有我不希望 Prettier 接近的文件和文件夹。其中大部分是配置文件和自行生成的文件。

注释

  • 这两个文件都必须放在项目的根目录下。
  • 安装后,我可以通过运行来测试 Prettier 的功能:

npx 更漂亮。 --写

  • 为了更轻松地运行该命令,我制作了一个将在命令行中运行的脚本。在 package.json 文件中,我添加了一个名为 format 的新脚本。

Beyond Spellcheck: How Static Analysis Tools Enhance Collaboration in Coding

要使用它,您只需输入以下命令:

npm 运行格式

除了本地安装和命令行使用之外,Prettier 还可以通过扩展集成到代码编辑器(例如 VSCode)中。安装后,它会在保存文件时自动格式化代码。

短绒

ESLint 是一款旨在识别和报告 ECMAScript/JavaScript 代码中的模式的工具,旨在增强代码一致性并最大限度地减少错误。您可以使用以下命令安装和配置 ESLint:

npm init @eslint/config@latest

执行此命令后,一系列问题将引导您完成终端中的设置,并将创建一个名为 .eslint.config.mjs 的新配置文件。由于我使用的是 ESLint 版本 9.x,因此所有配置都将在此文件中指定。我还列出了 ESLint 不需要的文件和文件夹,以便使用忽略属性来忽略。

Beyond Spellcheck: How Static Analysis Tools Enhance Collaboration in Coding

为了简化 linting 过程,我在 package.json 中添加了一个脚本以便于执行。

Beyond Spellcheck: How Static Analysis Tools Enhance Collaboration in Coding

要运行脚本,只需键入以下命令:

npm run lint

编辑器集成

虽然上述设置足以满足单个项目的需求,但确保所有贡献者拥有统一的开发环境在协作环境中至关重要。因此,我在根目录中创建了一个 .vscode 文件夹,其中包含两个文件:

  • extensions.json:该文件列出了开发者在打开项目时应安装的必要扩展,并在项目启动时提供提示。

  • settings.json:此配置可确保:

    • 编辑器使用 Prettier 在保存时格式化代码。
    • ESLint 自动修复保存时的 linting 问题。
    • ESLint 验证 JavaScript 文件。
    • Prettier 需要一个配置文件来格式化代码。

通过使用settings.json和extensions.json建立.vscode文件夹,我确保所有贡献者共享一致的开发环境,并将Prettier和ESLint无缝集成到Visual Studio Code中。此设置有助于根据项目的配置自动进行代码格式化和 linting,从而简化代码质量和一致性的维护。

解决格式问题

  • 运行 Prettier 后,我发现了一些需要手动调整的文件,主要是向对象的最后一个元素添加逗号。

  • 在 ESLint 运行之后,我发现了 13 个问题,其中大部分是由于使用了不需要初始化的全局对象进程造成的。为了解决这个问题,我在受影响的文件顶部添加了以下注释:

/* eslint-disable no-undef */

此外,还有一些导入的值没有被使用;对于这些情况,我只是将它们删除。

结论

通过对静态分析工具的探索,我对它们的重要性有了更深入的了解,特别是在协作项目中。这些工具的主要目标是促进团队合作并保持高代码质量,我现在了解如何有效地建立一个项目来从一开始就集成这些基本工具。

以上是超越拼写检查:静态分析工具如何增强编码协作的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!