为网页设计者提供的代码提示 2021-11-09 默认分类 暂无评论 1757 次阅读  > 你可能听说过，你应该对你的代码进行 "linting"。那是什么意思？你为什么要这样做？ 什么是linters？ 类似于Kleenex成为面巾纸的通用术语和Xerox成为复印机的通用术语，Lint是一个通用术语，始于一个特定术语。最初的Lint是一个Unix工具，用于检查C代码是否有问题。 > 术语 "Lint "来自于衣服上脱落的微小纤维和绒毛的名称，因为该命令应该像烘干机的绒毛陷阱一样，检测有大影响的小错误。- 维基百科 今天，我们用 "linters "这个术语来表示一类工具，它们检查代码中的常见错误和风格错误。大多数linters 是高度可配置的，因此它们可以执行你的组织的标准。 为什么我应该使用linter？ 使用 linter 的主要原因有两个。通过避免常见的问题来节省自己的麻烦，以及在整个团队中执行共同的代码风格。 每个人在编码的时候都会犯错。很容易使用错误的括号，忘记了分号，或者拼错了什么。检查你的代码是否有这些类型的错误是计算机最擅长的事情。与其逐行检查你的代码是否有常见的语法错误，你可以告诉计算机要寻找哪些类型的错误。  linter另一个伟大用途是帮助你的团队中的每个成员以相同的风格编写代码。如果一个团队成员用制表符缩进，而另一个用空格缩进，或者一个人按类型排列CSS规则，而另一个人按字母排列，这种不一致的结果可能会让人非常沮丧。 试试这个办法吧：当你遇到这样的情况时，与你的团队进行讨论，选择一个标准，然后让linter来执行它。你不再需要留下代码审查反馈，提醒团队成员遵守标准，或处理有人重新格式化你的代码。让计算机成为执行者! 在Cloud Four，我们对JavaScript和CSS使用了linters。 linters的配置是为了执行最佳实践和我们团队同意遵守的编码惯例。例如，在CSS中，linter保持我们的规则按字母顺序排序，并执行我们的类命名惯例。在 JavaScript 中，linter 采用最大行长，并鼓励使用 JSDoc 注释标准。 我应该使用哪些 linters？ 现在有很多linter，哪种linter对你最有用，取决于你的堆栈。也就是说，对于大多数前端开发项目，我推荐使用Stylelint来检测CSS，ESLint来检测JavaScript，而Prettier来检测格式化。 ## ESLint 多年来有几个流行的JavaScript linters，但ESLint可以说是目前最流行的。ESLint特别强调可扩展性，有一个非常活跃的插件、模块和共享配置的社区。一些流行的插件是eslint-plugin-unicorn，它是一个有意见的JS格式化规则的集合，以及eslint-plugin-jsdoc，它确保你的JSDoc注释被正确构建。 ## Stylelint Stylelint是最流行的CSS（以及Sass和Less等替代语法）的linter。它甚至可以用来对其他文件中的CSS进行检查，比如HTML中的脚本元素、Vue的单文件组件和JS中的CSS。它在很大程度上以ESLint为模型，遵循可扩展的模式。这意味着社区很容易为他们所关心的事情添加检查规则，如排序CSS规则，强制执行BEM命名风格，或Sass特定的语法。 ## Prettier Prettier很有趣，因为当其他告诫者主要关注防止错误和执行最佳实践时，Prettier只关心代码的格式。如何缩进你的代码，你的行有多长，等等。与Stylelint和ESLint不同的是，Prettier声称自己是有主见的。你可以覆盖一些默认设置，但其目的是添加Prettier并在大多数情况下接受默认设置。 如果你曾经为是用制表符还是空格缩进而争论过，你就会明白拥有一个能消除争论的工具的价值。起初，我发现Prettier做出的一些决定令人沮丧。随着时间的推移，我发现它非常有价值，我和我的团队都不需要再考虑行长、尾部逗号或括号周围的空格问题。 Prettier开始时专注于JavaScript，但它已经增加了对许多其他语言的支持，包括CSS、HTML和Markdown。 ## 其他linter 还有许多其他的衬垫器。无论你使用的是什么语言，肯定都有相应的linter，从Markdown的Remark到RuboCop的Ruby。如果你使用GitHub，你甚至可以添加GitHub Super Linter，这是一个GitHub Action，可以根据你的文件类型自动运行几乎所有能想到的linter。 ## 我如何使用linter？ 有几种选择，取决于你对开发环境和构建工具的控制程度。 在最基本的层面上，你可以将linter安装到你的编辑器中。大多数linter有VS Code和其他编辑器的插件。通过安装该插件，你的编辑器将知道读取你的配置文件，并直接在你的编辑器中突出显示lint错误。如果你在你的项目中添加一个lint配置文件，那么任何在他们的编辑器中安装了linter的人都会从共享的规则集中受益。  下一个层次是在你的项目中直接安装linter。解释如何安装和配置特定的linter已经超出了本文的范围。要了解更多细节，请看你想使用的特定linter的安装说明。 如果你使用 Node，那么在你的项目中安装了 linter 之后，你可以在 package.json 文件中添加一个脚本，让使用该项目的任何人都能运行 linter。例如，我们在所有项目中都添加了一个 lint 脚本，这样任何贡献者都可以通过在命令行中运行 npm run lint 来检查他们的代码。它将让你知道你的代码是否符合lint规则，修复它知道如何修复的问题，并对它不能修复的问题显示一个错误。 最后，你可以把linter作为你工作流程的一个自动化步骤。如果你已经有一个CI步骤，你会想把它加在那里。例如，在我们的大多数项目中，我们都添加了GitHub Action，每当有PR打开时就运行linter。 ## 我的linter应该执行什么规则？ 这将因项目而异，但从一套合理的默认值开始是个好主意。大多数 linter 项目提供了一个推荐的配置文件，以启用修复常见问题的规则。Stylelint有stylelint-config-recommended，而ESLint有eslint:provided。你可以覆盖任何你不喜欢的规则，并添加任何你可能想要的额外规则。 除了推荐的配置，大多数linters都有一两个社区共享的配置，这些配置非常受欢迎。这方面的一个很好的例子是AirBnB的ESLint配置。这些都是非常有主见的，但如果你从头开始，或者你的团队没有任何确定的标准，它可以是一个很好的方式来开始。 ## 忽视规则 无论规则的意图多么好，总有一天你需要告诉linter忽略一些代码。也许Prettier的CSS块的格式比你的要难读。也许ESLint规则对某些原型代码过于严格。不管是哪种情况，你都想知道如何禁用某一行或某一文件的linter。 大多数 linters 会允许你设置一个 "忽略 "文件，告诉 linter 不要注意某些文件。例如，我们通常把整个 "prototypes "目录添加到Stylelint的忽略文件中，因为原型代码是为了快速和肮脏。 Linters 通常也会包括一个特殊的注释，你可以添加它来禁用下一行或下一段代码的linter。语法在不同的linter中会有所不同，但通常看起来像这样。 ``` /* stylelint-disable-next-line declaration-no-important */ display: none !important; ``` ## 结论 几年前，我是一名CSS开发人员，当时我从未考虑过打火机可能对我有用。我知道我的程序员同事们都使用linters，但它似乎与HTML和CSS无关。让我大开眼界的是在CSS-Tricks上读到的《用Stylelint检查你的CSS》。它向我介绍了让计算机来完成执行标准和避免语法问题的无聊工作的概念。我为我的团队创建了一个Stylelint配置，然后我就再也没有回头了。如今，我无法想象没有一个好的linter支持我的工作。 标签: javascript, lint, eslint, stylelint, prettier
评论已关闭