vscode配置stylelint环境描述 vscode相关: stylelint插件版本: v1.2.4 vscode

为什么要用stylelint

自动对css样式进行格式化，让项目成员的css格式化风格保持一致
按照统一的规则自动优化css书写顺序(减少浏览器界面渲染时的不必要重排)

环境描述

vscode相关:

stylelint插件版本: v1.2.4

vscode版本: 1.78.2

目标

vscode执行保存命令时，能对scss，css，less，vue文件中的样式进行自动格式化，并对css的样式进行排序
打包后的样式文件也能保持格式化之后的css样式顺序

实现步骤

安装stylelint插件并配置

vscode的settings.json增加配置

{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }
}

项目中添加依赖

pnpm add stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-order postcss postcss-html stylelint-config-standard-vue -D

项目中增加`.stylelintrc.cjs`配置文件

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-html/vue',
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-standard-vue'
  ],
  plugins: ['stylelint-order'],
  rules: {
    // 为了让 Stylelint 支持 SCSS 语法中的 mixin、extend、content 语法, 项目使用了tailwind也用了@tailwind所以，这里把tailwind也加进去
    "scss/at-rule-no-unknown": [true, {"ignoreAtRules" :[
      "mixin", "extend", "content", "include","tailwind"
    ]}],
    // 每次缩进为两个空格
    'indentation':2,
    // 这里是允许了空的style标签
    'no-empty-source':null,
    'scss/at-mixin-pattern': null,
    'selector-class-pattern': null,
    // 颜色指定小写(注意和eslint或prettier保持一致)
    'color-hex-case': 'lower',
    // 禁止空块
    'block-no-empty': true,
    // 颜色6位长度
    'color-hex-length': 'long',
    // 兼容自定义标签名
    'selector-type-no-unknown': [
      true,
      {
        ignoreTypes: [],
      },
    ],
    // 忽略伪类选择器 ::v-deep
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep'],
      },
    ],
    // 禁止低优先级的选择器出现在高优先级的选择器之后。
    'no-descending-specificity': null,
    // 不验证@未知的名字，为了兼容scss的函数
    'at-rule-no-unknown': null,
    // 禁止空注释
    'comment-no-empty': true,
    // 禁止简写属性的冗余值
    'shorthand-property-no-redundant-values': true,
    // 禁止值的浏览器引擎前缀
    'value-no-vendor-prefix': true,
    // property-no-vendor-prefix
    'property-no-vendor-prefix': true,
    // 禁止小于 1 的小数有一个前导零(注意和eslint或prettier保持一致)
    // 'number-leading-zero': 'never',
    // 禁止空第一行
    'no-empty-first-line': true,
    // 属性的排序
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "font-weight",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ],
  },
}

忽略格式化的文件

在项目根目录创建.stylelintignore文件，内容写法和gitignore文件一致

node_modules
public
dist
lib
*.d.ts

通过node格式化

package.json

{
    "scripts":{ 
        "lint:style": "stylelint \"src/**/*.(vue|less|scss|css)\" --fix",
    }
}

通过lint-staged只格式化有修改的文件

{
    "lint-staged": {
        "src/**/*.{js,ts,vue}": [
          "eslint --cache --fix",
          "prettier --write"
        ],
        "src/**/*.{less,css,scss,vue}": [
          "stylelint --cache --fix"
        ]
    },
}

一、项目规范的基石——husky 与 lint-staged - 掘金 (juejin.cn)

片段禁用规则

/* stylelint-disable */ 
/* （请说明禁止检测的理由）前端组件限制类名 */ 
.cropper_topContainer .img-preview { 
    border: 0 none; 
}
 /* stylelint-enable */
 
 .test{
     /* （请说明禁止prettier格式化的理由）禁止将该px转换为rem */ 
     /* prettier-ignore */
     font-size: 12PX;
 }

eslint - vscode中Prettier ESLint插件格式化时，会自动将PX转换为px - SegmentFault 思否

cssnano配置 [可选]

cssnano作用:将css进行打包优化，能够减小打包后的css体积

postcss.config.cjs

module.exports = {
  plugins: {
    /*
      cssnano作用:将css进行打包优化，能够减小打包后的css体积
      (如何看是否有效: 去掉这个配置，打包一次截图css的体积，加上这个配置再打包一次，
        对比两次打包后css的体积变化，会发现加了这个配置体积会小一点). 
        官网: https://www.cssnano.cn/docs/what-are-optimisations/
       */
    cssnano: {
    /* cssDeclarationSorter设置为false, 保持css原本的书写顺序 */
      preset: ['default', { cssDeclarationSorter: false }],
    },
  },
}