stylelint 规范你的 css
stylelint 简介
一个强大、现代的 linter 帮助团队避免规则错误，统一代码风格。和 eslint 类似可以继承开源社区的 config、自定义配置、写个性化的 rules 。
stylelint 配置
可按照官方引导 user-guide/get-started 进行配置。笔者目前公司项目采用的是 vue + scss + ts 实现的，这里主要会介绍 vue 和 scss 相关的配置。
相关依赖
stylelint 版本和依赖存在兼容性问题，下面依赖版本经过验证
- stylelint@3.13.1
- stylelint-config-recommended-scss@4.3.0
- stylelint-scss@4.0.0
- stylelint-config-recess-order@3.0.0
- stylelint-prettier@2.0.0
- stylelint-config-prettier@9.0.3
stylelint 插件提供扩展规则，不提供预设配置。（我只提供配置，用不用是你的事）。命名规范为 stylelint-xxxx
我们项目使用到了 scss 预处理器，需要利用 stylelint-config-recommended-scss 做 scss 规则检查。
stylelint-scss 提供了 n 多条规则，stylelint-config-recommended-scss 内开启了部分配置。
面试的时候我们经常会被问到 css 的重排和重绘，坦白讲写代码的时候并没有太多人关心这个。 让 linter 来帮助我们自动修复多香。stylelint-config-recess-order （属性配置 + stylelint-order插件）可以帮我们实现
stylelint 与 eslint 类似，都与 Prettier 规则有冲突，stylelint-config-prettier 可以解决这些冲突，stylelint-prettier 插件优化 Prettier 的执行时机
配置文件
可以是 .stylelintrc 或 .stylelintrc.js 或 stylelint.config.cjs 配置文件。推荐使用 .js 文件的形式方便自定义。
module.exports = {
/* 继承公共配置 */
"extends":[
"stylelint-config-recommended-scss",
"stylelint-config-recess-order",
"stylelint-prettier/recommended"
],
/* 扩展 stylelint 原生rules 的种类 */
"plugins": ["stylelint-prettier"],
/* 项目个性化的规则 */
rules: {
"selector-pseudo-element-no-unknown": [
true,
{
ignorePseudoElements: ["v-deep"],
}
],
"prettier/prettier": true,
"number-leading-zero": "always",
}
}之前搞不懂为啥有些工具配置能支持 monorepo 项目组织形式，读官方文档发现 cosmiconfig 库帮忙做到了这件事情。
Stylelint uses cosmiconfig to find and load your configuration object.
执行脚本
项目配置应结合 lint-stage 、git-hooks 对执行时机和范围做优化。本文只讲手动执行。
package.json:
"lint:style": "stylelint 'src/**/*.{vue,htm,html,css,scss}' --fix"在终端执行 npm run lint:style 看下代码的变化吧。
stylelint 原理
stylelint 通过使用 PostCSS api 来分析 CSS 的语法，实现样式的检查。
postcss 是 css 的 编译器。它和 babel 的功能设计类似, 有 parse -> transform -> generater 三个关键环节。开发者可以通过 parse 后的 AST 结构实现自定义的 lint 规则。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！