前言
在前端开发中，样式代码的规范化是必不可少的。为了提高样式代码的可维护性和可读性，我们常常需要使用一些规范化的工具来进行代码检查。
而在这些工具中，stylelint 是一个非常优秀的样式代码检查工具。它支持各种语法格式，可以在编译的过程中对样式代码进行检查和提示，并且可以与众多编辑器和构建工具进行良好的兼容。
本文将介绍一种名为 stylelint-config-dev-kit 的 npm 包，它是一个基于 stylelint 的规范化配置文件，可以帮助我们快速地在项目中使用 stylelint 进行代码检查，从而提高样式代码的质量。
安装
在使用 stylelint 和 stylelint-config-dev-kit 前，需要先安装它们。在命令行中输入以下命令即可：
npm install stylelint stylelint-config-dev-kit --save-dev
其中，--save-dev 参数表示将 stylelint 和 stylelint-config-dev-kit 安装到项目的开发依赖中。
配置
安装完成后，我们需要对 stylelint 进行配置，并引入 stylelint-config-dev-kit。
单个样式文件配置
对于单个样式文件的配置，可以在其开头添加如下注释：
/* stylelint-disable */ @import 'stylelint-config-dev-kit'
其中，stylelint-disable 表示在该样式文件中禁用 stylelint 的检查规则；@import 'stylelint-config-dev-kit' 表示引入 stylelint-config-dev-kit 这个 npm 包所提供的配置文件。
整个项目配置
对于整个项目的配置，我们可以在项目的根目录中创建一个 .stylelintrc.json 文件，并加入以下内容：
{
"extends": "stylelint-config-dev-kit"
}该配置文件中的 extends 指令表示继承 stylelint-config-dev-kit 这个配置文件。
使用
配置完成后，我们就可以使用 stylelint 对样式代码进行检查了。
在命令行中使用
在命令行中输入如下指令：
npx stylelint "src/**/*.css"
其中，src/**/*.css 表示对 src 目录下所有后缀为 .css 的样式文件进行检查。我们也可以在 package.json 的 scripts 属性中加入如下指令：
{
"scripts": {
"lint:css": "stylelint \"src/**/*.css\""
}
}这样，在命令行中运行 npm run lint:css 就可以对样式进行检查了。
在编辑器中使用
在编辑器中使用 stylelint 同样也是非常简单的。
VS Code
在 VS Code 中，我们可以安装 stylelint 这个插件来进行代码语法检查。
安装完成后，在 VS Code 的用户设置（Preferences: Open User Settings）中，加入以下配置：
-- -------------------- ---- -------
-
------------------- -----
------------------- -
---------- --------------------------
--
--------------------- -
------
-------
-------
------
-
-这样，在编辑器中就可以同时对多种样式文件进行检查。
WebStorm
在 WebStorm 中，我们可以通过开启 File Watcher 来进行样式代码检查。
具体方法是，在 WebStorm 的 Preferences 中，打开 Tools > File Watcher，新建一个 Stylelint 的 File Watcher，设置 Scope 为项目目录，Program 为 stylelint，Arguments 为 $FilePath$（即当前编辑的文件路径），Output paths to refresh 为 $FilePath$:$FilePathWithoutExtension$.css（即在同一目录下生成一个同名的 .css 文件），然后点击 Apply 即可。
结语
通过使用 npm 包 stylelint-config-dev-kit，我们可以快速地在项目中使用 stylelint 进行样式代码的检查，从而提高代码的可读性和可维护性。希望本文能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005684781e8991b448e4547