Eslint airbnb 默认带有 js 中的箭头函数

Question

I'm trying to use eslint with the preset style airBnB but I want to use arrow functions instead of normal functions. When I try to add anything to my.eslintrc.js files rules my vscode doesn't display the errors anymore. How can I fix this.

My.eslintrc.js is as following

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    allowArrorFunctions: true
  },
};

and package.json is the following:

{
  "name": "solita-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^1.2.3",
    "cypress-real-events": "^1.7.6",
    "jest": "^27.5.1",
    "jquery": "^3.6.3",
    "jquery-ui": "^1.13.2",
    "jquery-ui-bundle": "^1.12.1-migrate",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
    "eject": "react-scripts eject",
    "cypress:open": "cypress open"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "cypress": "^12.3.0",
    "eslint": "^8.32.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-n": "^15.6.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.32.1",
    "eslint-plugin-react-hooks": "^4.6.0"
  }
}

Answer 1

You don't need an extra rule to use arrow functions in your code if you have the correct parser options, so you could just remove the rules section from your.eslintrc.js config.

If you mean to use the rule func-style with the option allowArrowFunctions , then the rules section in.eslintrc.js should look like this:

  rules: {
    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
  }

Note that any incorrect setting in.eslintrc.js (like trying to configure a non-existing rule) will invalidate the whole configuration. Probably that's the reason why VSCode stops reporting linting problems.