-
项目情况:
- 项目使用less styled-components, 需要规范样式格式,样式代码顺序
- 1、项目使用工作区域配置文件
- 2、prettier 文件格式规则兼容
- 3、自动修复
- 4、提交校验 -
需要安装依赖
- stylelint —运行工具,
- stylelint-config-standard —stylelint的推荐配置
- stylelint-order —排序插件(先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性)
- stylelint-commponent 解析依赖
- stylelint-config-prettier关闭所有不必要的或可能与Prettier冲突的规则
- stylelint-config-styled-components共享stylelint的配置 校验styled-component
- stylelint-processor-styled-components ` (已弃用)用于提取styled-component中的样式` 实践还是有效果,--fix 时会提示处理器将被弃用 -
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
]
}
安装
npm install stylelint stylelint-order stylelint-config-standard stylelint-order stylelint-config-prettier --save-dev
npm install --save-dev stylelint-prettier prettier
配置
新建文件
- stylelint.config.js
module.exports = {
processors: [],
plugins: ['stylelint-order'],
extends: ['stylelint-config-standard'],
rules: { 配置排序规则},
};