npm 包 @shopify/stylelint-plugin 使用教程

在前端开发中，代码规范的作用越来越被重视。我们可以使用一些工具来帮助我们检测代码规范的问题，这里我们介绍一个工具，即 @shopify/stylelint-plugin。

@shopify/stylelint-plugin 简介

@shopify/stylelint-plugin 是一个 Stylelint 插件，用于检查 Shopify 的样式指南中规定的样式问题。Shopify 的样式指南围绕清晰、一致和可复用的样式组件。该插件可帮助我们在开发 Shopify 主题时，遵循 Shopify 官方的样式指南，同时还可以为其他项目提供帮助。

安装 @shopify/stylelint-plugin

在安装 @shopify/stylelint-plugin 之前，我们需要先安装 Stylelint：

npm install stylelint --save-dev

接着，我们就可以安装 @shopify/stylelint-plugin 了：

npm install @shopify/stylelint-plugin --save-dev

配置 Stylelint 和 @shopify/stylelint-plugin

在项目根目录下新建一个 .stylelintrc 文件，我们可以在该文件中配置我们的 Stylelint 和 @shopify/stylelint-plugin。

{
  "plugins": ["@shopify/stylelint-plugin"],
  "rules": {
    "@shopify/declaration-use-variable": true,
    "@shopify/color-format": "rgb"
  }
}

在 plugins 数组中添加 @shopify/stylelint-plugin。在 rules 对象中，我们可以添加 @shopify/stylelint-plugin 提供的规则。

使用 @shopify/stylelint-plugin

我们可以在项目根目录下的 package.json 文件的 scripts 属性中添加一个命令，用于检查代码规范：

{
  "scripts": {
    "lint": "stylelint 'src/**/*.scss'"
  }
}

以上代码表示检查 src 目录下所有的 scss 文件。

我们还可以将命令行的输出结果保存为一个文件：

{
  "scripts": {
    "lint": "stylelint 'src/**/*.scss' > linter.log"
  }
}

@shopify/stylelint-plugin 提供的规则

@shopify/stylelint-plugin 提供了很多规则，以下是其中的一些示例：

@shopify/selector-type-no-unknown

当使用未知的选择器类型时，报告警告。

.foo {
  // 该规则将报告此处的警告
  @media (max-width: 600px) {
    &--bar {
      color: red;
    }
  }
}

@shopify/declaration-no-important

当使用 !important 标记时，报告警告。

.foo {
  color: red!important; // 该规则将报告此处的警告
}

@shopify/color-no-invalid-hex

当使用无效的十六进制颜色时，报告警告。

.foo {
  color: #GHI; // 该规则将报告此处的警告
}

@shopify/declaration-use-variable

当使用未定义的 SCSS 变量时，报告警告。

$color: red;
.bar {
  color: $color;
}
.foo {
  color: $color__other; // 该规则将报告此处的警告
}

@shopify/color-format

当使用非预期颜色格式时，报告警告。

.foo {
  color: #000; // 该规则将不报告警告，因为默认值为 hex
}
.bar {
  color: rgb(255, 255, 255); // 该规则将报告警告，因为默认值为 keyword
}

结论

@shopify/stylelint-plugin 是一个很好的工具，可以帮助我们检查 Shopify 的样式指南中规定的样式问题。通过使用该插件，我们可以更好地遵循 Shopify 官方的样式指南，提高代码质量和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cd9aedbf7be33b25670c5