stylelint在项目细节配置 记录

根据前两篇文章基本适用 .css .less 文件
这篇主要适用检测.jsx 文件中css 样式代码

在项目中实践配置-stylelint: 看这个

安装

npm install stylelint-config-standard stylelint-order --save-dev

配置

文件 stylelint.config.js

module.exports = {
  extends: 'stylelint-config-standard',
  ignoreFiles: ['**/*.js', '**/*.md'],
  plugins: ['stylelint-order'],
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin'],
      },
    ],
    'no-empty-source': null, // 不允许空块
    'block-no-empty': true,
    'rule-empty-line-before': 'always', // 不允许rules前空一行
    'at-rule-empty-line-before': null, // 在 AT规则 前要求或不允许留有空行
    'no-missing-end-of-source-newline': null,
    'selector-list-comma-newline-after': null, // 在选择器列表的逗号后指定一个换行符或禁止留有空格
    'font-family-no-missing-generic-family-keyword': null,
    indentation: 2,

    // order：指定声明块中内容的顺序。
    // properties-order：指定声明块内属性的顺序。
    // properties-alphabetical-order：指定声明块内属性的字母顺序。
    'order/order': [
      'declarations', // 声明
      'custom-properties', // 自定义属性
      'dollar-variables', // 变量
      'rules', // 规则
      'at-rules', // 规则
    ],
    // 根据 Andy Ford 的 "Order of the Day: CSS Properties"
    // 并且可以将 CSS 属性进行分组
    'order/properties-order': [
      // 指定声明块内属性的顺序
      {
        groundName: 'Display & Flow',
        emptyLineBefore: 'never',
        properties: ['display', 'visibility', 'float', 'clear'],
      },
      {
        groundName: 'Positioning',
        emptyLineBefore: 'never',
        properties: [
          'position',
          'top',
          'right',
          'bottom',
          'left',
          'z-index',
          'transform',
        ],
      },
      {
        groupName: 'Flex',
        emptyLineBefore: 'never',
        properties: [
          'flex',
          'flex-direction',
          'flex-grow',
          'flex-shrink',
          'flex-basis',
          'flex-wrap',
          'justify-content',
          'align-items',
        ],
      },
      {
        groupName: 'Dimensions',
        emptyLineBefore: 'never',
        properties: [
          'width',
          'min-width',
          'max-width',
          'height',
          'min-height',
          'max-height',
          'overflow',
        ],
      },
      {
        groupName: 'Margins, Padding, Borders, Outline',
        emptyLineBefore: 'never',
        properties: [
          'margin',
          'margin-top',
          'margin-right',
          'margin-bottom',
          'margin-left',
          'padding',
          'padding-top',
          'padding-right',
          'padding-bottom',
          'padding-left',
          'border-radius',
          'border',
          'border-top',
          'border-right',
          'border-bottom',
          'border-left',
          'border-width',
          'border-top-width',
          'border-right-width',
          'border-bottom-width',
          'border-left-width',
          'border-style',
          'border-top-style',
          'border-right-style',
          'border-bottom-style',
          'border-left-style',
          'border-color',
          'border-top-color',
          'border-right-color',
          'border-bottom-color',
          'border-left-color',
          'outline',
          'list-style',
          'table-layout',
          'border-collapse',
          'border-spacing',
          'empty-cells',
        ],
      },
      {
        groundName: 'Typographic Styles',
        emptyLineBefore: 'never',
        properties: [
          'font',
          'font-family',
          'font-size',
          'line-height',
          'font-weight',
          'text-align',
          'text-indent',
          'text-transform',
          'text-decoration',
          'letter-spacing',
          'word-spacing',
          'white-space',
          'vertical-align',
          'color',
        ],
      },
      {
        groupName: 'Backgrounds',
        emptyLineBefore: 'never',
        properties: [
          'background',
          'background-color',
          'background-image',
          'background-repeat',
          'background-position',
        ],
      },
      {
        groundName: 'Opacity, Cursors, Generated Content, Transition',
        emptyLineBefore: 'never',
        properties: ['opacity', 'cursor', 'content', 'quotes', 'transition'],
      },
    ],
  },
};

---

完成以上配置 基本可以规范样式编写
特殊情况：
styled-component
style jsx
行内样式

---

stylelint-processor-arbitrary-tags：用户指定标签内的Lint。
stylelint-processor-html：HTML <style>标记内的Lint 。
stylelint-processor-markdown：Markdown的围栏代码块中的 Lint 。

处理 style-component 校验

介绍文章

npm install --save-dev  stylelint-processor-styled-components 
  stylelint-config-styled-components 

配置

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

style jsx 内部校验

stylelint-processor-arbitrary-tags （需要正则检测）
stylelint-processor-html（检测html 内部style）
styled-jsx-plugin-stylelint （转译css-in-js的插件 在babel中配置）
npm install --save styled-jsx-plugin-stylelint

css命名规则

selector-type-case 命名大小写

其他：
- styled-jsx-plugin-stylelint 支持jsx 写法插件
- styled-jsx