如何修复Eslint/Prettier对.css文件报‘Parsing error: ; expected’错误？

这个问题其实很好理解——你当前的ESLint配置用的是@typescript-eslint/parser，它专门负责解析TypeScript、JavaScript以及对应的JSX/TSX文件，完全读不懂CSS的语法规则。当ESLint尝试用这个TS解析器去处理你的example.css时，会把CSS代码当成TS/JS来解析，自然会抛出这种不符合TS语法的错误。

下面给你两种解决方案，你可以根据自己的需求选择：

方案一：让ESLint支持CSS文件检查 #

如果你希望ESLint也能帮你校验CSS代码规范，可以安装专门处理CSS的ESLint插件：

1. 先安装依赖：

   npm install eslint-plugin-css --save-dev
   

2. 修改你的.eslintrc.js配置，添加插件和CSS文件的专属规则：

   module.exports = {
     // 保留你原有的所有配置内容
     env: { /* ... */ },
     parser: '@typescript-eslint/parser',
     // 在plugins数组里新增css插件
     plugins: ['@typescript-eslint', 'css'],
     extends: [ /* ... */ ],
     // 添加overrides配置，指定CSS文件的解析器和规则集
     overrides: [
       {
         files: ['*.css'],
         parser: 'eslint-plugin-css',
         extends: ['plugin:css/recommended'],
       },
     ],
     rules: { /* ... */ },
     settings: { /* ... */ },
   };
   

方案二：直接排除CSS文件（更简单，适合不需要ESLint检查CSS的场景） #

如果你的CSS规范是用Prettier或者Stylelint这类工具维护的，不需要ESLint插手，直接在配置里忽略所有CSS文件即可：

module.exports = {
  // 保留你原有的所有配置内容
  // 添加ignorePatterns忽略CSS文件
  ignorePatterns: ['*.css'],
  env: { /* ... */ },
  parser: '@typescript-eslint/parser',
  // ...其他原有配置
};

另外也可以检查下你的ESLint运行命令，比如如果用eslint .会扫描项目里所有文件，你可以改成eslint src/**/*.{ts,tsx,js,jsx}，只针对TS/JS相关文件做检查，从根源避免ESLint误处理CSS文件。

内容的提问来源于stack exchange，提问作者Sebastien De Varennes