在前端开发中，CSS 样式的重要性不言而喻。而当项目较为庞大时，为了避免 CSS 样式的混乱和冲突，我们需要一些工具来辅助我们进行样式文件的规范和管理。而 stylelint-config-css-modules 就是一款非常实用的 npm 包，它可以帮助我们规范和管理 CSS 样式文件。
什么是 stylelint-config-css-modules
stylelint-config-css-modules 是 stylelint 的一个插件，它是专为 CSS Modules 定制的规则集合。它可以帮助开发者编写遵守 CSS Modules 规范的代码。
stylelint 是一个非常强大的 CSS 样式检查工具，它可以检测出 CSS 样式代码中错误和不规范的写法，从而让我们在代码编写过程中更加规范和准确。而 stylelint-config-css-modules 则是在 stylelint 基础上，进行了针对 CSS Modules 的定制规则集合。
安装和使用
安装方式非常简单，只需要在项目目录下执行以下命令：
npm install stylelint stylelint-config-css-modules --save-dev
安装成功后，我们需要在项目根目录下创建一个 .stylelintrc 文件，文件内容如下：
{
"extends": ["stylelint-config-css-modules"]
}这样就可以从 stylelint-config-css-modules 中导入规则并生效了。
默认情况下，stylelint 都会检查 .css 和 .scss 文件，如果需要对其他类型的文件进行检查，可以在 package.json 文件中进行如下配置：
{
"scripts": {
"lint:css": "stylelint 'src/**/*.css' 'src/**/*.scss'"
}
}这里我们定义一个 lint:css 的脚本命令，在执行时会对 src 目录下的 .css 和 .scss 文件进行检查。通过这种方式可以让我们更加灵活地掌控检查对象。
规则说明
stylelint-config-css-modules 提供的规则比较多，这里只简单介绍一下其中几个比较常用的规则。
selector-class-pattern
selector-class-pattern 规则用于检查类名命名规范。我们可以在 .stylelintrc 文件中进行如下配置：
{
"selector-class-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$"
}这个规则可以保证类名使用小写字母和破折号，并且破折号连接的部分也必须是小写字母或数字。
declaration-empty-line-before
declaration-empty-line-before 规则用于在每个属性之前强制使用空行分隔。我们可以在 .stylelintrc 文件中进行如下配置：
{
"declaration-empty-line-before": "always"
}这个规则可以让我们的样式代码更加清晰易懂。
no-unknown-animations
no-unknown-animations 规则用于检查动画名称是否存在。我们可以在 .stylelintrc 文件中进行如下配置：
{
"no-unknown-animations": true
}这个规则可以帮助我们防止在调用动画时写错名字。
总结
stylelint-config-css-modules 是一款非常实用的 npm 包，它可以帮助我们规范和管理 CSS 样式文件。安装和使用非常简单，仅需要在项目中进行简单的配置即可。在配置过程中，我们可以根据自己的需求，选择性地启用或禁用某些规则。此外，根据项目需求，我们也可以自定义一些规则集合，从而提升 CSS 样式代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/stylelint-config-css-modules