在前端开发过程中，代码规范是很重要的。代码规范不仅可以优化代码的可读性和可维护性，还可以减少代码中的漏洞和错误。stylelint 是一个用于检测 CSS 代码的工具，也是一个非常流行的 npm 包。在 stylelint 能够正常工作之前，我们需要一个配置文件。这就是本文要介绍的 npm 包 stylelint-config-legao。
安装
首先需要安装 stylelint 和 stylelint-config-legao：
npm install stylelint stylelint-config-legao --save-dev
配置
安装完成后，在项目根目录中创建一个文件 named .stylelintrc，该文件应该包含以下配置：
{
"extends": "stylelint-config-legao"
}使用
在配置完成之后，我们就可以使用 stylelint 来检查代码了。可以通过命令行直接使用以下命令：
npx stylelint src/styles/**/*.css
这将会检查 src/styles 目录下的所有 CSS 文件。
配置修改
如果你想修改 stylelint-config-legao 中的一些规则，你可以在 .stylelintrc 文件中覆盖它们。例如，如果你想修改默认的缩进值：
{
"extends": "stylelint-config-legao",
"rules": {
"indentation": 4
}
}常用的规则
stylelint-config-legao 包含了大量的 CSS 规则，下面列出一些最热门的规则：
color-no-invalid-hex: 不允许无效的十六进制颜色值declaration-block-no-duplicate-properties: 不允许在同一个块中使用重复的属性declaration-block-no-shorthand-property-overrides: 不允许在字体和边框缩写中重写单一属性string-quotes: 要求使用双引号unit-whitelist: 只允许使用特定的单位value-no-vendor-prefix: 不允许在值中加入厂商前缀
这个列表并不完整，但这里所提到的规则是前端开发中最常见的几个规则。
结论
在前端开发中使用代码规范工具是一个很聪明的决定。stylelint 是一个很好的工具，它可以帮助你检查 CSS 代码的质量。而 stylelint-config-legao 是 stylelint 最好的配置之一，让你能够在一段时间内快速配置一些规则，并永远忘记这些规则是什么。这个 npm 包并不完美，但可以让你在不断学习和改进中保持规范和高质量的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005568e81e8991b448d3565