随着前端项目规模的不断扩大，代码风格的统一变得越来越重要。这时候，我们就需要靠代码检查工具来约束代码的格式和规范。其中，stylelint就是一款用于检查 CSS 代码的工具，帮助我们在编写样式时保持一致的风格和结构。但是，为了更好的使用 stylelint ，我们需要一个合适的配置。
本文将为大家介绍 @1stg/stylelint-config 这个 npm 包，教你如何使用它来帮助你的项目更好地使用 stylelint 。
什么是 @1stg/stylelint-config
@1stg/stylelint-config 是一个提供给 stylelint 使用的配置文件包，它遵循了 CSS 代码检查的规范，并加入了常见的最佳实践，使代码更加健壮和易维护。它是由 FSE Team 开发的，我们可以在官方 GitHub 上看到它的详细说明。
如何使用 @1stg/stylelint-config
接下来，我们将为大家介绍如何将 @1stg/stylelint-config 引入你的项目中并使用。
安装
首先，我们需要在项目中安装 @1stg/stylelint-config npm 包。在控制台中运行以下命令：
npm install @1stg/stylelint-config --save-dev
配置
接下来，我们需要在项目的根目录中创建一个名为 .stylelintrc 的配置文件。在这个配置文件中，我们需要指定要使用 @1stg/stylelint-config ，以及其他我们想要添加或更改的规则。
方案一
你可以在 .stylelintrc 中使用以下方式来扩展 @1stg/stylelint-config：
{
"extends": "@1stg/stylelint-config"
}这样， @1stg/stylelint-config 中默认提供的规则就会被添加到你的配置文件中，如果你想要添加或更改规则，就在这个文件中继续添加即可。
接下来，通过以下的命令，你就可以检查你的 CSS 代码是否符合代码规范：
./node_modules/.bin/stylelint "src/**/*.css"
方案二
你还可以通过添加 stylelint.config.js 文件来进行配置。
module.exports = {
extends: ["@1stg/stylelint-config"],
rules: {
// Your rules here
}
};示例
@1stg/stylelint-config 提供了多种规则，用于检查 CSS 代码。如下所示，我们提供了一些常用的规则示例，让你更好地理解如何使用这个配置文件。
-- -------------------- ---- -------
-
---------- -------------------------
-------- -
-- ------------------ --------- -------
----------- -----
--------------------------------- ------ -
-------------- -
----------
---------
--------------
----------
---------------
-------------
---------------
--------------
--------------
---------
---------
----------
----------
-
---
-- ---- -----
-------------- -----
-- ---- ----------------- -------- ---- -- -------- -----------
----------------- ----
-
-总结
通过本文，你已经了解了 @1stg/stylelint-config npm 包的使用方法。配置一个符合规范的代码风格，在团队协作开发中显得尤为必要。希望这篇文章能够帮助你更好地了解 stylelint ，并在开发中发挥更好的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/stg-stylelint-config