npm 包 stylelint-config-idiomatic-sass 使用教程

前言

在前端开发中，样式代码的规范性非常重要。为此，我们常常会采用一些工具，如 ESLint 和 Stylelint 来辅助我们完成样式代码的规范。而 Stylelint 刚出来的时候，由于缺乏默认规则，导致大家需要手动去设置，这给大家带来了不便。后来，随着社区的不断发展，一些样式规范包应运而生，其中最为流行的便是 stylelint-config-idiomatic-css 了。stylelint-config-idiomatic-sass 是在 idiomatic-css 的基础上进行了扩展，专门支持 Sass 的样式规范。

安装和使用

在开始之前，确保你已经安装了 stylelint 和 sass。

安装 stylelint-config-idiomatic-sass：

npm install --save-dev stylelint-config-idiomatic-sass

然后，在项目的根目录下创建一个 .stylelintrc.json 文件，并添加以下代码：

{
  "extends": "stylelint-config-idiomatic-sass"
}

扩展规则

stylelint-config-idiomatic-sass 包含了 idiomatic-css 中的大部分规则，同时也扩展了一些针对 Sass 的规则。下面是一些常用的规则：

scss/at-extend-no-missing-placeholder

此规则检查使用了了 Sass @extend 指令的继承选择器是否存在相应的 placeholder 选择器。样例如下：

.button {
  @extend %btn;
}

scss/at-import-no-partial-leading-underscore

此规则检查使用了 Sass @import 指令的路径是否包含前导下划线。样例如下：

@import "_base";

scss/at-mixin-argumentless-call-parentheses

此规则检查在调用 Sass mixin 时，是否添加了括号。样例如下：

@include clearfix();

总结

借助 stylelint-config-idiomatic-sass，我们可以快速的配置 Sass 的样式规范。不过，我们需要注意的是，样式规范只是一个工具，它不会影响到我们的网站性能，它只能给我们的代码带来可维护性、可读性等好处。因此，在我们的前端的实际开发中，合理使用样式规范非常重要。

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