Eslint 错误导致 create-react-app 编译失败

Question

I am building a website using create-react-app and have just installed eslint to it.

For some reason what was supposed to be shown as eslint warnings are showing up as errors and causing npm run start to fail.

How can I bypass this issue and have them shown as warnings like before?

My.eslintrc.js

  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  extends: [
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'class-methods-use-this': 'off',
    'additional-rule': 'warn',
  },
  ignorePatterns: ['**/node_modules/*', '**/build/*', 'config-overrides.js'],
};

My package.json

  "name": "device-protection-renewal-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.19.3",
    "@types/react": "^16.9.55",
    "@types/react-dom": "^16.9.9",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
    "i18next": "^19.8.3",
    "react": "^17.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dom": "^17.0.1",
    "react-i18next": "^11.7.3",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie >= 9"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie >= 9"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-arrow-functions": "^7.12.1",
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "eslint": "^7.11.0",
    "eslint-config-airbnb-typescript": "^9.0.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.0",
    "prettier": "^2.1.2",
    "typescript": "^4.0.5"
  }
}```


  [1]: https://i.stack.imgur.com/WUKcz.png

Answer 1

sorry. I am not allowed to comment but I really want to help you.

I assume that you have installed eslint using npm install eslint --save-dev and defined a default configuration with node_modules/.bin/eslint --init answering the questions in the prompt.

I notice that in your .eslintrc.js file, the eslint settings is missing in the extends option:

extends: [
    'eslint:recommended',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],

Also in the package.json is recommended eslint to have its own script that you run using npm run lint and use it combined with a eslint-plugin in your favorite code editor:

{
  "scripts": {
    "start": "react-scripts start",
    // ...
    "lint": "eslint ."
  },
}

Probably you will build you application in some moment, so you should create a .eslintignore file and inside of it add build since files in the build directory get checked when the command is run.

Source: https://fullstackopen.com/en/part3/validation_and_es_lint#lint

Answer 2

This part in your package.json is unnecessary; since you have an aslant config file, it should be moved to .eslintrc.js .

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
}

Which would then turn into this:

extends: [
    'react-app',
    'react-app/jest',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
]

However; in the latest versions of the eslint-config-react-app plugin at this time (7.31.11) , I'm getting a jest plugin conflict error with a project that worked prior to updating unless I remove react-app/jest from my eslint configs extends section.

Which is how I ended up here, currently trying to find out what caused this.

Update: So my issue was caused because eslint-config-react-app depends on eslint-plugin-jest^25.7.0 and I was using the latest eslint-plugin-jest^27.1.6 . I removed my package.json 's dependency and will use the version included with eslint-config-react-app so there aren't any conflicts there, but if I need features of the newer plugin version, a quick npm i -D on it, changing eslint configuration from automatic to manual and specifying the path to the local node_modules version and .eslintrc.js should work as well; aside from any conflicts with the config plugin.