前言
在前端开发中，样式代码的规范性非常重要。为此，我们常常会采用一些工具，如 ESLint 和 Stylelint 来辅助我们完成样式代码的规范。而 Stylelint 刚出来的时候，由于缺乏默认规则，导致大家需要手动去设置，这给大家带来了不便。后来，随着社区的不断发展，一些样式规范包应运而生，其中最为流行的便是 stylelint-config-idiomatic-css 了。stylelint-config-idiomatic-sass 是在 idiomatic-css 的基础上进行了扩展，专门支持 Sass 的样式规范。
安装和使用
在开始之前，确保你已经安装了 stylelint 和 sass。
安装 stylelint-config-idiomatic-sass：
--- ------- ---------- -------------------------------
然后，在项目的根目录下创建一个 .stylelintrc.json 文件，并添加以下代码：
- ---------- --------------------------------- -
扩展规则
stylelint-config-idiomatic-sass 包含了 idiomatic-css 中的大部分规则，同时也扩展了一些针对 Sass 的规则。下面是一些常用的规则：
scss/at-extend-no-missing-placeholder
此规则检查使用了了 Sass @extend 指令的继承选择器是否存在相应的 placeholder 选择器。样例如下：
------- - ------- ----- -
scss/at-import-no-partial-leading-underscore
此规则检查使用了 Sass @import 指令的路径是否包含前导下划线。样例如下：
------- --------
scss/at-mixin-argumentless-call-parentheses
此规则检查在调用 Sass mixin 时，是否添加了括号。样例如下：
-------- -----------
总结
借助 stylelint-config-idiomatic-sass，我们可以快速的配置 Sass 的样式规范。不过，我们需要注意的是，样式规范只是一个工具，它不会影响到我们的网站性能，它只能给我们的代码带来可维护性、可读性等好处。因此，在我们的前端的实际开发中，合理使用样式规范非常重要。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056ea181e8991b448e76a5