I am using eslint in nextjs and When running a loop using MAP, no errors are thrown even though I didn't put a value for KEY. What settings do I need to install to be notified of errors?
Below is my eslint configuration.
{
"extends": [
"next/core-web-vitals",
"airbnb",
"airbnb-typescript",
"prettier"
],
"plugins": ["simple-import-sort"],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"react/react-in-jsx-scope": "off",
"import/prefer-default-export": "off",
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
"jsx-a11y/label-has-associated-control": [
2,
{
"some": ["nesting", "id"]
}
]
}
}
Also, can't I just give an index to a key value in a regular array (where the order doesn't change)? What should I do when there are no other values available ?
React's key requirement rule is react/jsx-key
which is a part of eslint-plugin-react
. You can check it out in this document.
To install it, you can follow these steps:
npm install --save-dev eslint-plugin-react
Or
yarn add --dev eslint-plugin-react
"plugin:react/recommended"
under eslintrc
config file{
"extends": [
"plugin:react/recommended",
"next/core-web-vitals",
"airbnb",
"airbnb-typescript",
"prettier"
],
"plugins": ["simple-import-sort"],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"react/react-in-jsx-scope": "off",
"import/prefer-default-export": "off",
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
"jsx-a11y/label-has-associated-control": [
2,
{
"some": ["nesting", "id"]
}
]
}
}
Note that the order of extends
items matters, so you can arrange that list based on your own preferred rules.