stylelint格式化css方案

安装vscode插件

stylelint

setting：ctrl + shift + p

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true // 保存自动按stylelint格式修复
}

项目使用

该配置只支持检查语法与修复，不会在编译时控制台抛警告

项目中安装依赖

pnpm install --save-dev stylelint stylelint-config-standard-scss postcss-html

package.json配置一键修复

"script": {
  "lint:css": "stylelint **/*.{html,vue,css,sass,scss,less} --fix",
}

规则配置

项目根目录配置 规则翻译

// .stylelintrc.js
// 参考官方标准配置, 部分注释
// https://github.com/stylelint/stylelint-config-standard/blob/master/index.js
module.exports = {
  defaultSeverity: 'warning', // error
  'ignoreFiles': [
    '**/*.js',
    '**/*.md'
  ],
  'overrides': [
    // {
    //   'files': ['**/*.(scss|css|html|vue)'],
    //   'customSyntax': 'postcss-scss' // 该模块用于格式化scss文件【该功能貌似自带，不配也没相关错误提示】
    // },
    {
      'files': ['**/*.(html|vue)'],
      'customSyntax': 'postcss-html' // 该模块用于格式化vue-style部分
    }
  ],
  'extends': 'stylelint-config-standard-scss',
  rules: {
    indentation: 2,
    'selector-class-pattern': null, // 关闭中划线校验
    'font-family-no-missing-generic-family-keyword': null, // 关闭字体校验
    'selector-pseudo-element-no-unknown': null, // 关闭自定义的选择器校验
    'no-descending-specificity': null,
    'max-empty-lines': 1,
    'at-rule-empty-line-before': [
      'always',
      {
        except: ['blockless-after-same-name-blockless', 'first-nested'],
        ignore: ['after-comment']
      }
    ],
    'at-rule-name-case': 'lower',
    'at-rule-name-space-after': 'always-single-line',
    'at-rule-semicolon-newline-after': 'always',
    'block-closing-brace-empty-line-before': 'never',
    'block-closing-brace-newline-after': 'always',
    'block-closing-brace-newline-before': 'always-multi-line',
    'block-closing-brace-space-before': 'always-single-line',
    'block-opening-brace-newline-after': 'always-multi-line',
    'block-opening-brace-space-after': 'always-single-line',
    // 'block-opening-brace-space-before': 'always', // 选择器之间隔开一行
    'color-hex-case': 'lower',
    'color-hex-length': 'short',
    // 'comment-empty-line-before': [
    //   'always',
    //   {
    //     except: ['first-nested'],
    //     ignore: ['stylelint-commands']
    //   }
    // ], // 注释前空一行
    'comment-whitespace-inside': 'always',
    'custom-property-empty-line-before': [
      'always',
      {
        except: ['after-custom-property', 'first-nested'],
        ignore: ['after-comment', 'inside-single-line-block']
      }
    ],
    'declaration-bang-space-after': 'never',
    'declaration-bang-space-before': 'always',
    'declaration-block-semicolon-newline-after': 'always-multi-line',
    'declaration-block-semicolon-space-after': 'always-single-line',
    'declaration-block-semicolon-space-before': 'never',
    'declaration-block-single-line-max-declarations': 1,
    'declaration-block-trailing-semicolon': 'always',
    'declaration-colon-newline-after': 'always-multi-line',
    'declaration-colon-space-after': 'always-single-line',
    'declaration-colon-space-before': 'never',
    'declaration-empty-line-before': [
      'always',
      {
        except: ['after-declaration', 'first-nested'],
        ignore: ['after-comment', 'inside-single-line-block']
      }
    ],
    'function-comma-newline-after': 'always-multi-line',
    'function-comma-space-after': 'always-single-line',
    'function-comma-space-before': 'never',
    'function-max-empty-lines': 0,
    'function-name-case': 'lower',
    'function-parentheses-newline-inside': 'always-multi-line',
    'function-parentheses-space-inside': 'never-single-line',
    'function-whitespace-after': 'always',
    'length-zero-no-unit': true,
    'media-feature-colon-space-after': 'always',
    'media-feature-colon-space-before': 'never',
    'media-feature-name-case': 'lower',
    'media-feature-parentheses-space-inside': 'never',
    'media-feature-range-operator-space-after': 'always',
    'media-feature-range-operator-space-before': 'always',
    'media-query-list-comma-newline-after': 'always-multi-line',
    'media-query-list-comma-space-after': 'always-single-line',
    'media-query-list-comma-space-before': 'never',
    'no-eol-whitespace': true,
    'no-missing-end-of-source-newline': true,
    'number-leading-zero': 'always',
    'number-no-trailing-zeros': true,
    'property-case': 'lower',
    // 'rule-empty-line-before': [
    //   'always-multi-line',
    //   {
    //     except: ['first-nested'],
    //     ignore: ['after-comment']
    //   }
    // ], // 多个选择器独占一行
    'selector-attribute-brackets-space-inside': 'never',
    'selector-attribute-operator-space-after': 'never',
    'selector-attribute-operator-space-before': 'never',
    'selector-combinator-space-after': 'always',
    'selector-combinator-space-before': 'always',
    'selector-descendant-combinator-no-non-space': true,
    // 'selector-list-comma-newline-after': 'always', // 多个选择器独占一行
    'selector-list-comma-space-before': 'never',
    'selector-max-empty-lines': 0,
    'selector-pseudo-class-case': 'lower',
    'selector-pseudo-class-parentheses-space-inside': 'never',
    'selector-pseudo-element-case': 'lower',
    'selector-pseudo-element-colon-notation': 'double',
    'selector-type-case': 'lower',
    'unit-case': 'lower',
    'value-keyword-case': 'lower',
    'value-list-comma-newline-after': 'always-multi-line',
    'value-list-comma-space-after': 'always-single-line',
    'value-list-comma-space-before': 'never',
    'value-list-max-empty-lines': 0
  }
}