介绍
在前端开发中，为了保证代码的风格一致性和可读性，我们常常需要使用代码规范。而 stylelint 就是一个非常优秀的 CSS 代码规范工具。然而，由于个人的编程经验和项目需求的不同，对于规范的要求也存在差异，这时候就需要使用一些公共的代码规范规则集，而这里我们介绍的就是 npm 包 @absolunet/stylelint-config-nwayo。
@absolunet/stylelint-config-nwayo 是一套由 Nwayo 团队开发的 stylelint 规则套件。它以@absolunet/stylelint-config-standard 为基础，加入了一些特定的规则和配置。比如一些国际化方面的规定、一些 less 语法的限制等等。使用它可以大大提高前端代码的规范性，让我们更加高效的开发。
安装
我们可以使用 npm 或 yarn 来安装 @absolunet/stylelint-config-nwayo，其中 yarn 安装比 npm 快。在我们的项目中执行以下命令即可：
npm install --save-dev stylelint @absolunet/stylelint-config-nwayo
或者：
yarn add --dev stylelint @absolunet/stylelint-config-nwayo
使用
当我们安装好之后，我们还需要在项目中配置 stylelint，来明确我们要使用哪些规则配置。首先，在我们的项目根目录中新建一个 .stylelintrc.json 文件，并输入以下内容：
{ "extends": [ "@absolunet/stylelint-config-nwayo" ] }
这里的 extends 关键字是在告诉 stylelint 在 @absolunet/stylelint-config-nwayo 基础上进行扩展，从而使用其中默认的配置。如果您需要自定义规则，只需在这个文件里面添加一些键值对即可。
示例
我们可以使用以下代码来测试我们的 stylelint 是否生效：
// in file test.css .btn { background-color: red; }
执行以下命令：
./node_modules/.bin/stylelint test.css
然后我们就可以看到类似于下面的输出：
test.css 3:3 ✖ Expected indentation of 2 spaces indentation 3:3 ✖ Unexpected unknown rule no-unknown-rule
stylelint 告诉我们，代码中缩进错误，并且规则 no-unknown-rule 意外遇到未知的规则。这是因为我们没有设置按钮的类名：这个例子元素应该在 HTML 文件中具有“btn”类，所以如果您运行这个测试，您应该为 .btn 类添加一个合适的 HTML 代码片段。但是，您可以在 stylelint 配置文件中设置特定的规则，以避免出现此类未知规则。
深度和学习指导
在使用 @absolunet/stylelint-config-nwayo 之前，我们应该对 stylelint 的语法和规则有一定了解。在此推荐大家阅读官方文档，详细了解 stylelint 及其配置方式。同时，也推荐大家阅读 @absolunet/stylelint-config-nwayo 的源代码，对其中的规则有更深入的认识。
结论
通过使用 @absolunet/stylelint-config-nwayo，我们可以大大提高前端代码的规范性及可读性，让我们的开发更加快速和高效。同时，它也是一个非常好的学习和指导工具，能够帮助我们更好地理解 stylelint 的规则和使用方式。推荐于前端开发的朋友使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/98198
