SCSS-lint入门

SCSS-Lint：保持Sass代码整洁一致的利器

本文将介绍如何使用SCSS-Lint，一个强大的Ruby gem工具，来维护Sass代码库的整洁和一致性。它通过标记可疑用法并确保样式表易于阅读来实现这一目标。

核心要点：

• SCSS-Lint是一个强大的Ruby gem工具，通过标记可疑用法和确保样式表易于阅读来帮助维护Sass代码库的整洁和一致性。使用前需要安装，命令行工具名为scss-lint。
• SCSS-Lint的配置涉及通过项目根目录下的YAML文件定义要遵守的规则。此文件通常命名为.scss-lint.yml，包含所有代码风格检查配置。可以向SCSS-Lint传递--config或--exclude等选项来自定义代码风格检查过程。
• 建议在提交到远程存储库之前使用预提交钩子来检查代码，以保持代码整洁。这可以通过一个轻量级的npm包来设置，该包通过package.json文件提供对Git钩子的支持。如果在此过程中SCSS-Lint返回错误，则提交将中止，需要修复代码才能通过提交。

编写可运行的代码是网站、应用程序或任何软件开发中最简单的部分。使整个项目具有可扩展性、经过测试、有适当的文档记录且易于贡献才是困难的部分。

其中一部分是拥有一个既干净又一致的代码库。干净，因为维护丑陋的“奇怪”代码绝对不是一件令人愉快的事情；一致，因为它使维护代码库更容易、更快。如果软件中所有地方的代码看起来都一样，那么很快就能习惯它的编写方式。

在Sass方面，您可以采取一些措施来使代码整洁一致。首先是遵守一些编码指南，例如CSS指南和Sass指南。另一件事是检查您的代码库。

如果您不熟悉检查这个词，以下是维基百科的解释：

在计算机编程中，“检查”最初是指一个特定程序，该程序标记C语言源代码中一些可疑和不可移植的结构（可能是错误）。现在，这个术语通常用于指代标记任何计算机语言编写的软件中可疑用法的工具。

Sass中可疑的用法是什么？这取决于您如何定义“可疑”，但更广泛地说，它可能只是确保样式表易于阅读且不复杂的问题。例如，将选择器嵌套的用法限制为单个级别。

为了检查我们的Sass代码库，有一个非常棒的工具叫做SCSS-Lint。现在让我们先说坏消息：SCSS-Lint是一个Ruby gem，无论您如何运行它（CLI、Grunt、Gulp……），您都需要预先安装此gem。好消息是，一些可爱的人们目前正在开发SCSS-Lint的npm包版本，因此我们迟早可能会摆脱这个繁琐的额外步骤。好的，让我们开始吧：

$ gem install scss_lint

注意：由于命名原因，gem名为scss_lint，但命令行工具实际上是scss-lint。库名为SCSS-Lint。因为它还不够复杂……:)

使用CLI工具入门

SCSS-Lint有很多选项。实际上，如此之多以至于一开始可能会有点不知所措。幸运的是，我们经常使用的选项并不多，所以让我们来看看这些选项。

通过-c或--config选项，您可以传递配置文件的路径，这将有助于定义要应用于代码库的规则。例如：

$ scss-lint . --config .scss-lint.yml

根据您的项目，您可能希望使用-e或--exclude选项从代码风格检查过程中排除某些文件或文件夹。例如，您可能不想检查您的第三方库或您的node模块。例如：

$ scss-lint . --exclude ./node_modules/**/*

对于--exclude的更复杂用法，您可以在通过--config传递的配置文件中定义它。

还有其他选项，但我感觉这已经足够入门了。

传递给scss-lint的第一个参数是要运行的文件夹。如果省略，则默认为.，即当前文件夹。如果要指定特定文件夹，则可以：

scss-lint ./assets/stylesheets

配置代码风格检查器

现在我们准备好检查我们的Sass代码库了，我们需要定义应该遵守哪些规则。SCSS-Lint有很多代码风格检查器（它们被称为），多到在这里列出所有检查器都太长了。我建议您阅读代码风格检查器的文档。

我们的想法是，您在项目根目录创建一个YAML文件，其中包含所有代码风格检查配置。默认情况下，SCSS-Lint将尝试在当前文件夹中查找.scss-lint.yml文件，所以我建议您将文件命名为这样。但是，如果您更喜欢其他名称，您可以这样做；只需确保使用--config选项传递它即可。

Sass指南为您提供了一个现成的配置文件，供您在项目中使用。如果您想自定义某些内容，请务必仔细查看，但总的来说，它应该可以解决问题。

提交时进行代码风格检查

一件很不错的事情是，在提交时使用预提交钩子来确保代码是干净的（经过检查）。我在之前的SitePoint文章中介绍了Sass测试和预提交钩子。

如果您不确定预提交钩子是什么，基本上它是一种机制，旨在在应用提交之前运行一些操作。如果执行的任何操作引发错误，则提交将中止。

确保在提交到远程存储库之前检查代码，这是Git钩子的完美用例。在本节中，我们将看到如何以非常简单的方式设置它。

为此，我们将使用一个非常轻量级的npm包，该包通过package.json文件直接提供对Git钩子的支持。有很多库可以做到这一点，但我个人选择了pre-commit。如下所示：

$ gem install scss_lint

提交时，预提交钩子会触发并运行lint npm脚本（与npm run lint完全一样）。从代码中可以看到，lint npm脚本运行scss-lint .命令。如果SCSS-Lint返回错误，则提交将中止，需要修复代码才能通过提交。

如果您通过Gulp、Grunt或其他任何工具运行SCSS-Lint，则可以在lint npm脚本中运行任务，而不是直接使用scss-lint二进制文件。同样，您可以传递--config或--exclude等选项。

最终想法

我们总是可以做得更好，但我认为这是SCSS-Lint的一个很好的介绍，我们实际上可以以一种简单而强大的方式将其用于现有项目和新项目。

伙计们，没有理由再继续提交脏代码了，在推送之前先检查一下吧！

(此处保留了原文中的FAQ部分，因为其内容与文章主题相关，且改写后会损失信息)

What is the main purpose of SCSS Lint?

SCSS Lint is a tool that helps developers maintain a consistent coding style in their SCSS files. It analyzes your SCSS code and flags any deviations from the defined coding standards. This tool is particularly useful in large projects where multiple developers are working on the same codebase. By enforcing a consistent coding style, SCSS Lint makes the code easier to read, understand, and maintain.

How do I install SCSS Lint?

SCSS Lint is a Ruby gem, so you need to have Ruby installed on your system to use it. Once you have Ruby, you can install SCSS Lint by running the command gem install scss_lint in your terminal. After the installation is complete, you can run scss-lint from the command line to lint your SCSS files.

How do I configure SCSS Lint?

SCSS Lint can be configured by creating a .scss-lint.yml file in the root directory of your project. This file allows you to enable or disable specific linters, and to customize the behavior of the linters. The configuration file uses the YAML syntax, and each linter has its own set of options that you can configure.

我可以将SCSS绒毛与其他工具一起使用吗？

是的，SCSS皮棉可以与许多流行的工具和编辑器集成在一起。例如，您可以将其与Grunt和Gulp这样的任务跑步者或Sublime Text和Atom等代码编辑使用。这使您可以在开发工作流程的一部分中自动提交SCSS文件。>

>

SCSS LINT

有多种规则，可以在SCSS代码中执行良好的实践。一些共同的规则包括执行一致的凹痕，不遵循尾随的空格以及在文件末尾需要新线。还有一些更具体的SCSS功能的规则，例如不使用ID选择器的使用或在规则开放之前需要一个空间。

我如何忽略某些SCSS棉绒警告？

如果您想忽略某些警告，则可以通过在代码行之前使用

>添加评论来做到这一点。为了重新启用该规则，您可以添加其他评论

。您还可以使用// scss-lint:disable RuleName>。 // scss-lint:enable RuleName>我可以将SCSS绒毛与CSS文件使用吗？// scss-lint:disable all

scss lint是专门为SCSS设计的，SCS是CSS的超集。这意味着它可以说明CSS代码，但可能不了解某些CSS特定语法。如果您主要与CSS合作，则可能需要考虑使用CSS特定的Linter（例如StyleLint）。

我如何更新SCSS lint？

>您可以通过在终端中运行命令

来更新SCSS皮棉。这将下载并安装最新版本的宝石。最好让您的工具保持最新状态，以便从最新功能和错误修复中受益。

>

gem update scss_lint>有几种SCS棉绒替代品，包括Stylelint，csslint和Sass lint。这些工具具有相似的功能，但是它们可能具有不同的规则或配置选项。您应该选择最适合您的需求和偏好的工具。

我如何卸载SCSS lint？

如果您不再需要SCSS皮棉，则可以通过在终端中运行命令

来卸载它。这将从您的系统中删除宝石。如果要以后重新安装它，则可以通过再次运行安装命令来进行。

>

以上是SCSS-lint入门的详细内容。更多信息请关注PHP中文网其他相关文章！