Linters 已经存在了很长一段时间。但如果您是 css 新手,这可能是您第一次听说它们。CSS linter 将检查您的样式表并使您成为更好的编码器!
CSS Linter 有什么好处?
作为前端开发人员,我们希望我们编写的代码能够投入生产并为我们产品的用户所喜爱。我们花费大量时间确保我们编写的代码没有错误和错误。但是我们可以在不实际运行代码的情况下找出这些错误中的多少?这就是测试的用武之地,尽管肯定有一些东西测试不会被接受,或者可能根本不会被测试。
例如,作为一名 javascript 开发人员,您会优先考虑并编写测试来处理缺少分号的情况吗?或者更确切地说,是针对使用通用选择器引起的性能问题?
使用 CSS linter 可以捕获您可能不知道的 CSS 问题。这对初学者特别有帮助,他们的技能处于早期阶段。除此之外,使用 linter 的好处远远超出性能,还涉及安全问题、静态分析等领域。
为什么使用 Stylelint 作为 Linter?
Stylelint,用开发人员自己的话说:
“一个强大的、现代的 linter 可以帮助你避免错误并在你的风格中强制执行惯例。”
以下是 Stylelint 为您提供的一些功能;
它支持最新的 CSS 语法并理解 SCSS 和 Less 等类似 CSS 的语法。
它会自动修复某些类型的错误。
它有 170 多个内置规则来捕获错误并强制执行风格约定。
它是自以为是的,使您能够仅启用您想要使用的规则并配置它们以适合您的偏好。
它支持可共享的配置,在团队工作时可以很方便。
您可以在 此处找到更多功能。
如何使用 Stylelint
有多种使用 Stylelint 的方法,例如为您最喜欢的代码编辑器安装插件,或为 post CSS 安装插件,但我们将使用命令行。
通过在你的机器上安装 NPM 包开始 linting。打开终端并输入以下命令:
npm install -g stylelint
上面的命令全局安装 Stylelint。如果您希望它基于项目,您可以使用以下命令来实现:
npm install stylelint --save-dev
然后你可以在你的项目中添加 package.json 文件。
"scripts": { "stylelint": "stylelint ’**/*.scss’"}
运行 Linter 命令
注意:在实际运行 linter 之前,您需要设置配置,我们稍后会介绍。没有配置就会抛出错误。
运行命令对样式表进行 lint 时有不同的组合。让我们从上面的开始。
stylelint "**/*.scss"
此命令将在您的应用程序中搜索样式并尝试对它们进行 lint。如果你想在一个特定目录下运行 Stylelint,你必须使用:
stylelint "styles/*.css"
如果您已经在您的机器上全局安装了 Stylelint,则此方法有效。如果不这样做,您可以将其添加到package.json文件的脚本部分。该命令将对样式目录中包含的所有.css文件进行 lint 。
对于要对 html 文件中包含的样式进行 lint 处理的情况,还有一个命令。
stylelint "home/*.html"
这将处理<style>在home.
Stylelint 配置
Stylelint 使用配置来确定您希望如何对样式进行 lint。作为一个没有意见的工具,它默认没有打开样式,即使有可以使用的默认配置。
您希望使用的规则将包含在配置中。如果您尝试在没有配置的情况下进行 lint,您将遇到错误。Stylelint 将无法在没有配置的情况下做什么,它需要一个配置文件。
设置配置时可以采用不同的方法:
package.json 文件中的一个stylelint属性。
一个.stylelintrc文件。此文件可以是 JSON 或 YAML 格式。
stylelint.config.js导出 JavaScript 对象的文件。
这些是 Stylelint 在搜索要使用的配置时查找的位置。Stylelint 期望的配置是一个对象,它应该具有以下键;rules, extends, plugins, processors, ignoreFiles.
以下是配置文件的外观示例:
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-no-browser-hacks/lib"
],
"rules": {
"indentation": 2,
"string-quotes": "double",
"no-duplicate-selectors": true,
"color-hex-case": "lower",
"color-hex-length": "long",
"color-named": "never",
"property-no-unknown": true,
"plugin/no-browser-hacks": [true, {
"browsers": [
"last 2 versions",
"ie >=8"
]
}],
}
}
这里我们指定了我们想要扩展的配置:标准配置。
然后我们添加一些我们想要使用的规则。开始使用 Stylelint 时,您可能希望从使用现有配置文件开始。扩展已经存在的配置是一种相对简单的开始方式,然后您可以通过将样式添加到rules具有您自己的配置值的对象来覆盖样式。
规则
除了默认关闭的规则外,任何规则都没有默认值——您必须配置要使用的规则。要配置规则,您必须使用规则的名称(即键)和规则配置(即值)。这是一个外观示例:
"rules": { "indentation": 2}
在上面的片段中,我打开了indentation规则。我通过将键和值对(即规则的名称和配置)添加到rules对象来做到这一点。
根据文档,可以通过三种方式设置规则配置:
一个单一的值,就像我们上面的例子一样。
一个有 2 个值的数组——第一个是主要选项,第二个是次要选项
一个null值——这会关闭规则。
这些规则分为不同的类别,例如错误规则、风格问题和限制语言特征。
检查文档以正确通过可能的规则。以下是我们可以介绍的一些内容:
防止无效的十六进制值
Styelint 可以使用color-no-invalid-hex规则防止无效的十六进制值。
"rules": { "color-no-invalid-hex": true}
这将使这样的样式无效:
a { color: #00; }
此规则将帮助您和您的团队避免错误地color为您的、 或使用无效的十六进制值,background-color或者您需要使用十六进制颜色的其他情况。
在分号后添加新行
还有一个规则是在声明块中的分号后添加换行符。
"rules": { "declaration-block-semicolon-newline-after": "always" }
此规则具有三个可能的值:
always: 这要求总是在分号后添加一个新行。
always-multi-line:当规则跨越多行时,这需要一个新行。
never-multi-line: 使用此值,在多行规则中,分号后绝不能有空格。
您可以查看文档以了解有关此规则的更多信息。
Stylelint 插件
插件可以使用默认情况下未在 Stylelint 中定义的规则。您或社区成员可以构建采用 Stylelint 方法的插件。除了 Stylelint 之外,还可以使用这些插件。已经有大量插件可供您尝试使用。
stylelint-color-format是一个将十六进制颜色转换为 RGB 或 HSL 格式的插件。要使用它,您需要先安装软件包。
npm install --save-dev stylelint-color-format
接下来,将其添加到配置中的插件数组中。
{ "plugins": ["stylelint-color-format"]}
然后,您可以添加到规则对象以表示规则的名称和您要使用的值。
{ "rules": { "color-format/format": { "format": "rgb" } }}
结论
有很多关于 Stylelint 的知识,你现在应该很好地掌握它是什么以及它是如何工作的。展望未来,您可以开始将它应用到您的工作流程中,并考虑使用其他 linter(例如 ESLint)来检查您编写的 javaScript 和其他代码!
有用的链接
- 运行 Linter 命令
- 防止无效的十六进制值
- 在分号后添加新行