Eslint Airbnb预设下使用箭头函数，配置后VSCode无错误提示的解决方法

算力阿峰

2026-8-3

问题解决步骤

1. 修复无效的ESLint规则

你当前配置中的allowArrorFunctions: true是不存在的拼写错误规则，ESLint无法识别这个配置，导致整个规则集加载失败，所以VSCode不再显示错误提示。需要替换为正确的箭头函数相关规则：

修改后的.eslintrc.js配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // 强制回调函数使用箭头函数
    'prefer-arrow-callback': 'error',
    // 优先使用箭头函数替代普通函数（顶层函数声明可根据需求调整）
    'func-style': ['error', 'expression', { allowArrowFunctions: true }],
    // 指定React组件必须用箭头函数定义
    'react/function-component-definition': [
      'error',
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'arrow-function',
      },
    ],
  },
};

2. 解决配置冲突

你的package.json中存在eslintConfig字段，会与根目录的.eslintrc.js产生冲突（Create React App会优先读取package.json中的ESLint配置）。需要删除package.json中的eslintConfig部分：

修改后的package.json关键片段：

{
  "name": "solita-frontend",
  "version": "0.1.0",
  "private": true,
  // ... 其他依赖和脚本保持不变
  // 移除以下eslintConfig字段
  // "eslintConfig": {
  //   "extends": ["react-app","react-app/jest"]
  // },
  "browserslist": {
    // ... 保持不变
  },
  "devDependencies": {
    // ... 保持不变
  }
}