stylelint介绍

本页介绍本项目stylelint的基本配置。

安装

npm install @stylistic/stylelint-config@1.0.1 stylelint@16.18.0 stylelint-config-recess-order@5.0.1 stylelint-config-standard-scss@13.0.0 stylelint-config-standard-vue@1.0.0 stylelint-scss@6.11.1 vite-plugin-stylelint@6.0.0 --save-dev

配置

.stylelintrc.cjs

添加.stylelintrc.cjs文件：

module.exports = {
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-standard-vue/scss',
    'stylelint-config-recess-order',
    '@stylistic/stylelint-config',
  ],
  plugins: ['stylelint-scss'],
  overrides: [
    {
      "files": ["**/*.vue", "**/*.html"],
      "customSyntax": "postcss-html"
    },
    {
      "files": ["**/*.scss"],
      "customSyntax": "postcss-scss"
    },
  ],
  rules: {
    'at-rule-no-unknown': null,
    'no-descending-specificity': null,
    'property-no-unknown': null,
    'font-family-no-missing-generic-family-keyword': null,
    'selector-class-pattern': null,
    'no-empty-source': null,
    'function-no-unknown': [
      true,
      {
        ignoreFunctions: [
          'v-bind',
          'map-get',
          'lighten',
          'darken',
        ],
      },
    ],
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: [
          '/^view-transition/',
        ],
      },
    ],
    'scss/double-slash-comment-empty-line-before': null,
    'scss/no-global-function-names': null,
    '@stylistic/max-line-length': null,
    '@stylistic/block-closing-brace-newline-after': [
      'always',
      {
        ignoreAtRules: ['if', 'else'],
      },
    ],
    '@stylistic/string-quotes': ['single']
  },
  allowEmptyInput: true,
  ignoreFiles: [
    'node_modules/**/*',
    'dist*/**/*',
    'public/tinymce/**/*',
  ],
}

.stylelintignore

如有需要忽略某些文件，需添加.stylelintignore

# .stylelintignore
# 旧的不需打包的样式库
*.min.css

# 其他类型文件
*.js
*.ts
*.jsx
*.tsx
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json

# 测试和打包目录
/test/
/dist/
/node_modules/
/lib/

package.json

在package.json中加入：

"scripts": {
    ... //其他脚本
    "lint:style": "stylelint 'src/**/*.vue'",
    "lint:style:fix": "stylelint 'src/**/*.vue' --fix",

    "postinstall": "simple-git-hooks", // 必须有此脚本，有此脚本之后，npm instal的时候，会自动生成.husky文件
    "preinstall": "npx only-allow pnpm"
    ...
 },

"simple-git-hooks": {
  "pre-commit": "pnpm lint-staged",
  "preserveUnused": true
},

"lint-staged": {
  "*.{vue,js,jsx,ts,tsx}": [
    "pnpm run lint",
    "prettier --write"
  ],
  "*.{vue,css,scss}": [
    "pnpm run stylelint",
    "prettier --write"
  ]
}

vite-plugin-stylelint配置

在vite.config.ts中plugins加入，有助于在开发时帮助立即发现样式错误：

import stylelintPlugin from 'vite-plugin-stylelint';


stylelintPlugin({
  fix: true,
});

vscode 保存代码自动修复配置

参考eslint配置