npm 包 stylelint-use-logical 使用教程

介绍

stylelint 是一个用于 lint css 的工具，而 stylelint-use-logical 就是它的一个 plugin，用于帮助我们更好地规范使用 logical properties。所谓 logical property，即逻辑属性，例如 margin-block-start 这样的属性，而不是 margin-top，margin-right 等。使用逻辑属性有许多好处，例如在处理布局方向反转时更为方便，也有助于语义化我们的代码。

安装

使用 npm 进行安装：

npm install stylelint-use-logical --save-dev

它依赖于 stylelint，如果您还没有安装 stylelint，请安装它：

npm install stylelint --save-dev

配置

在你的 .stylelintrc 文件中，添加如下代码：

{
  "plugins": ["stylelint-use-logical"],
  "rules": {
    "plugin/stylelint-use-logical": true
  }
}

• 首先，我们添加了 stylelint-use-logical 这个 plugin。
• 然后，我们在 rules 中添加了这个规则，将它设置为 true。这意味着，如果我们的代码中使用了非逻辑属性，stylelint 会抛出错误。

使用

现在我们已经配置好了，来看一下它如何工作。以下是示例代码：

.my-box {
  margin-top: 20px; /* 普通属性 */
  margin-inline-end: 10px; /* 逻辑属性 */
}

当我们运行 stylelint 时，就会得到如下错误信息：

/my/path/to/file.css
5:3 ✖ Unexpected property "margin-top" (use logical properties instead of physical ones)     plugin/stylelint-use-logical

插件告诉我们，我们应该使用逻辑属性 margin-block-start，而不是 margin-top。我们将代码修正如下：

.my-box {
  margin-block-start: 20px; /* 逻辑属性 */
  margin-inline-end: 10px; /* 逻辑属性 */
}

现在再运行 stylelint，就不会再产生错误信息了。

请注意，使用逻辑属性时，我们需要考虑到它们的浏览器支持情况。如果您的项目需要兼容旧版本的浏览器，请使用适当的 polyfill 或 fallback 方案。

结语

stylelint-use-logical 是一个非常有用的工具，它可以帮助我们更好地规范 css，同时提高代码的语义化和可维护性。当然，使用逻辑属性并不是一定要做的事情，但它确实是一种比较好的实践，有利于我们更好地前进。

希望这篇文章对你有帮助，谢谢。

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