stylelint vscode 格式化

前言

单独配置stylelint格式校验规则，用于对css进行格式化处理，处理css样式的格式以及样式的摆放顺序，让css属性样式统一风格

settings.json

• stylelint 需额外添加vscode 全局参数

  "stylelint.validate": [
    "css",
    // 如果需要格式化scss 就需要在这里添加scss
    "scss",
    "less",
    "postcss"
  ],
  "stylelint.validate": ["css", "scss", "less", "postcss", "vue"],
  "stylelint.configFile": ".stylelintrc.js",
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
    }

lint-staged

• lint-staged校验css和vue文件
• 不需要指定校验内容，默认是校验改动内容

  "lint-staged": {
    "**/*.js": [
      "pnpm run test"
      "eslint  --ignore-pattern '**/*.d.ts'  --fix"
    ],
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ],
    // 添加vue文件，因为里面也有css内容
    // 想要支持vue 需要额外安装 stylelint-config-recommended-vue 插件
    "**/*.{css,less,scss,vue}": [
      "stylelint --fix"
    ]
  },

stylelint 装包

// stylelint-config-standard 官方的css通用配置
// stylelint-order stylelint-config-idiomatic-order css排序规则以及插件
// stylelint-config-prettier stylelint-prettier prettier兼容规则以及插件
pnpm install stylelint-config-standard stylelint-config-prettier stylelint stylelint-order stylelint-prettier stylelint-config-idiomatic-order -D 
// 如果需要支持scss需额外添加
pnpm install stylelint-config-standard-scss --save-dev
// 支持vue格式化需要额外添加
pnpm install stylelint-config-recommended-vue --save-dev
// 如果需要使用下方webpack的格式化方式需额外添加
pnpm install postcss-html --save-dev

.stylelintrc.js

• 默认配置文件

module.exports = {
  // 这边顺序可以适当调整，当前我的顺序是可以正常使用的
  // 网上有说把stylelint-prettier/recommended 放到最后
  // 我尝试发现prettier放到后面我stylelint的格式化我需要按两次，它们会互相影响
  extends: ['stylelint-prettier/recommended', 'stylelint-config-standard', 
  'stylelint-config-standard-scss', 'stylelint-config-idiomatic-order', , 
  'stylelint-config-recommended-vue'],
  plugins: ['stylelint-order'],
  rules: {},
};

webpack插件也支持stylelint格式化

  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './src/public/index.html',
    }),
    new StyleLintPlugin({
      customSyntax: 'postcss-html',
      files: ['**/*.{vue,html,css,scss,sass,less}'],
      failOnError: false,
      cache: true,
      fix: true,
    }),
  ],