stylelint 生态

• stylelint 官方文档
• stylelint 中文文档
• @stylistic/stylelint-plugin style 风格一制插件
• stylelint-config-recess-order 属性排序
• stylelint-order 属性排序和上面二选一即可
• stylelint-prettier 样式美化插件
• stylelint-scss 自定义 scss 规则
• stylelint-less 自定义 less 规则
• stylelint-config-recommended-less 推荐共享的 less 规则配置
• stylelint-config-recommended-scss 推荐共享的 scss 规则配置
• stylelint-config-recommended-vue 推荐共享的 vue style 规则配置, 搭配 scss 使用

安装

pnpm add stylelint @stylistic/stylelint-plugin stylelint-config-recess-order stylelint-config-recommended-less stylelint-prettier less -D

配置

根目录下创建 stylelint.config.mjs 文件

/** @type {import('stylelint').Config} */
export default {
  root: true,
  extends: ['stylelint-config-standard', 'stylelint-config-recess-order', 'stylelint-config-recommended-less'],
  overrides: [
    {
      customSyntax: 'postcss-html',
      files: ['*.(html|vue)', '**/*.(html|vue)'],
      rules: {},
    },
  ],
  plugins: ['@stylistic/stylelint-plugin', 'stylelint-prettier'],
  rules: {
    'prettier/prettier': true,
  },
}

package.json 文件添加

{
  "scripts": {
    "stylelint": "stylelint '**/*.{vue,css,less,scss}' --fix"
  }
}