stylelint ignoreFiles不生效：pre-commit仍检测忽略路径文件

问题说明 #

已在stylelint.config.cjs中配置ignoreFiles忽略node_modules、dist、coverage目录下的CSS文件，但执行pre-commit钩子时，仍触发来自coverage、dist文件夹的样式检查错误。

现有配置 #

stylelint.config.cjs

/*eslint-env node*/

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-css-modules',
    'stylelint-config-prettier',
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-scss',
  ],
  plugins: ['stylelint-scss'],
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'screen',
          'variants',
          'responsive',
        ],
      },
    ],
    'no-duplicate-selectors': null,
    'no-missing-end-of-source-newline': null,
    'no-empty-source': null,
    'rule-empty-line-before': null,
    'comment-empty-line-before': null,
    'selector-pseudo-element-no-unknown': null,
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null,
    'string-no-newline': null,
    'selector-max-universal': 1,
    'selector-class-pattern': '^[a-z][a-zA-Z0-9]+$',
    'scss/dollar-variable-colon-space-before': 'never',
    'scss/dollar-variable-colon-space-after': 'always',
    'scss/dollar-variable-no-missing-interpolation': true,
    'scss/dollar-variable-pattern': /^[a-z]+$/,
    'scss/double-slash-comment-whitespace-inside': 'always',
    'scss/operator-no-newline-before': true,
    'scss/selector-no-redundant-nesting-selector': true,
    'scss/at-rule-no-unknown': null,
  },
  ignoreFiles: ['node_modules/**/*.css', 'dist/**/*.css', 'coverage/**/*.css'],
};

package.json（关键部分）

{
  "scripts": {
    "stylelint": "npx stylelint \"./**/*.{css,scss,sass}\" --config \"./stylelint.config.cjs\"",
    "stylint:fix": "npm run stylelint --  --fix"
  },
  "lint-staged": {
    "./**/src/*.{css,scss,sass}": "npm run stylelint"
  }
}

问题原因 #

1. 忽略规则不完整：ignoreFiles仅指定忽略.css文件，但stylelint脚本扫描的是.css、.scss、.sass三种类型文件，dist、coverage下的非CSS样式文件未被忽略。
2. 脚本扫描范围过大：stylelint脚本固定扫描全项目的样式文件，未配合lint-staged仅处理待提交的文件，导致即使配置了忽略，仍会扫描到目标目录。

解决方案 #

1. 完善ignoreFiles配置 #

更新stylelint.config.cjs中的ignoreFiles，包含所有样式类型：

ignoreFiles: [
  'node_modules/**/*.{css,scss,sass}',
  'dist/**/*.{css,scss,sass}',
  'coverage/**/*.{css,scss,sass}'
],

2. 修改stylelint脚本适配lint-staged #

修改package.json中的stylelint脚本，移除固定的glob路径，让其接收lint-staged传递的待提交文件：

"scripts": {
  "stylelint": "npx stylelint --config \"./stylelint.config.cjs\"",
  "stylint:fix": "npm run stylelint -- --fix"
}

3. 确保目标目录在.gitignore中 #

将dist、coverage目录添加到.gitignore，避免这些目录下的文件被纳入Git追踪，从根源上避免lint-staged处理它们：

dist/
coverage/
node_modules/

4. 修复prettier脚本语法错误 #

package.json中prettier:check末尾多了一个反引号，需删除：

"prettier:check": "prettier --config ./prettier.config.cjs --check ./**/src/**/*.{css,scss,ts,tsx}"

验证 #

修改完成后，执行git commit，此时pre-commit钩子仅会检查src目录下待提交的样式文件，不会触发dist、coverage的错误。

内容的提问来源于stack exchange，提问作者3gwebtrain