stylelint在项目中实践 （less , styled-components）

规则配置详细说明

• 项目情况：
  - 项目使用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: { 配置排序规则},
};