在前端开发中，CSS 代码的质量也是非常重要的。我们可能会使用各种 linters 来检查代码的正确性和可维护性。stylelint 是一个非常流行的 CSS linter 工具，可以帮助我们检查和规范化我们的 CSS 代码。
在使用 stylelint 时，我们经常需要选择一种适当的配置。这就是 stylelint-config-travix 包的作用。它是 stylelint 的一组推荐配置集，并且包含了许多常见 CSS 样式规则的默认规则。
本文将介绍如何使用 stylelint-config-travix 包，以便通过 stylelint 检查和规范化您的 CSS 代码。
安装
我们可以使用 npm 或 yarn 来安装 stylelint 和 stylelint-config-travix。
使用 npm:
npm install stylelint stylelint-config-travix --save-dev
使用 yarn:
yarn add stylelint stylelint-config-travix --dev
注意：在本文中，我们将假定您已经在项目中使用了
npm或yarn。如果您还没有，您可以在 npm 或 yarn 官网上了解更多信息。
配置
一旦安装了 stylelint 和 stylelint-config-travix，我们就可以开始配置 stylelint。
在您的项目根目录下创建一个 .stylelintrc.json 文件，将以下内容复制并粘贴：
{
"extends": "stylelint-config-travix",
"rules": {
// 在这里添加您的自定义规则
}
}这里，我们使用 extends 属性来扩展 stylelint-config-travix。您还可以在 rules 属性下添加自定义规则，以覆盖默认配置。在稍后的示例中，我们将演示如何添加自定义规则。
使用
让我们通过一个简单的示例来了解如何使用 stylelint 和 stylelint-config-travix。
在您的项目中创建一个示例 CSS 文件 example.css，并添加以下 CSS 代码：
-- -------------------- ---- ------- ---- - ------- -- -------- -- ------------ ---------- ------ ------ ----------- - -- - ---------- ----- ----------- ------- ------ -------- - - - ---------- ----- ------------ ---- ------ ----- -
保存文件并在终端运行以下命令来检查示例文件的 CSS 代码：
npx stylelint example.css
如果您使用的是 npm 5.2 或更高版本，则可以使用以下命令：
npm stylelint example.css
使用 stylelint-config-travix 配置后，您应该会看到类似以下的输出：
example.css 1:1 ✖ Expected indentation of 2 spaces (indentation) 2:1 ✖ Unexpected shorthand "text-align" after "font-size" (declaration-property-value-disallowed-list) 5:3 ✖ Expected a leading zero (number-leading-zero) 7:2 ✖ Expected a leading zero (number-leading-zero)
注意：在本示例中，我们添加了自定义规则。第一条错误是在示例文件前面添加了预期的两个空格。第二个错误是在 h1 选择器中使用了不允许的文字对齐属性。第三条和第四条错误是在数字中缺少前导零。
自定义规则
在前面的示例中，我们添加了自定义规则。在 rules 属性下添加自定义规则非常简单。您可以通过 stylelint 的规则文档了解所有可用规则。
让我们假设我们想要强制使用双引号，而不是单引号，来定义字符串值。
我们可以使用以下规则：
{
"rules": {
"string-quotes": "double"
}
}现在再次运行 stylelint example.css 命令，您应该会看到如下输出：
example.css 1:1 ✖ Expected indentation of 2 spaces (indentation) 2:1 ✖ Unexpected shorthand "text-align" after "font-size" (declaration-property-value-disallowed-list) 6:18 ✖ Expected double quotes (string-quotes) 7:18 ✖ Expected double quotes (string-quotes)
现在我们已经成功添加了自定义规则。
结论
在本文中，我们了解了如何使用 stylelint-config-travix 包，以便通过 stylelint 检查和规范化您的 CSS 代码。我们也演示了如何添加自定义规则。为了让您的项目更加规范和易于维护，我们强烈建议您在项目中使用 stylelint 和 stylelint-config-travix。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a581e8991b448dfe34