I'm very confused about how to setup the config file and which configs/plugins I should use.
I have a React project that uses Typescript, Jest and React hooks.
I know I need to install:
eslint
prettier
, eslint-config-prettier
, eslint-plugin-prettier
eslint-plugin-import
As for the Airbnb config, I'm not sure whether I need to install:
eslint-config-airbnb
, eslint-plugin-react
, eslint-plugin-jsx-a11y
oreslint-config-airbnb-base
It doesn't seem like either of these support Typescript, so it seems I also need to install:
@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
And for Jest, I need to install:
eslint-plugin-jest
I'm not sure about React hooks. Do I need to install anything additional here or do one of the other packages include support for it? I see I have the option of installing:
eslint-plugin-react-hooks
Is that required?
Now, for the config file there are two areas I'm concerned with: extends
and plugins
.
I see that a few of these packages can be extended with /recommended
. Should I use any of these? What should the extends
section be? I've seen examples where it sets it as:
{
"extends": ["airbnb-base", "plugin:prettier/recommended"]
}
While I've seen other examples that use:
{
"extends": ["airbnb", "prettier"]
}
And another example that uses:
{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
]
}
What about the other Typescript, Jest and React Hooks plugins? For example, eslint-plugin-jest
suggests adding "plugin:jest/recommended"
to the extends. Will that conflict with any of the others? I see I could also add "plugin:@typescript-eslint/recommended"
and "prettier/@typescript-eslint"
. Should they be included too?
For the plugins
section, do I just list each eslint-plugin-....
package that I installed?
Here's an example, please let me know how this looks:
Installed packages
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint
eslint-config-airbnb
eslint-config-prettier
eslint-plugin-import
eslint-plugin-jest
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks
prettier
Config file:
{
"extends": [
"airbnb",
"plugin:@typescript-eslint/recommended",
"plugin:jest/recommended",
"plugin:prettier/recommended",
"plugin:react/recommended",
"prettier",
"prettier/@typescript-eslint"
],
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint",
"import",
"jest",
"jsx-a11y",
"react",
"react-hooks"
],
}
Thought I'd come back an answer this. Here's my final configuration that works:
module.exports = {
"env": {
"browser": true,
"es6": true,
"jest": true,
"node": true
},
"extends": [
"airbnb",
"plugin:@typescript-eslint/recommended",
"plugin:import/typescript",
"plugin:jest/recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"prettier",
"prettier/@typescript-eslint",
"prettier/react"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"jsx": true,
"sourceType": "module",
"useJSXTextNode": true
},
"plugins": ["@typescript-eslint", "import", "jest", "react", "prettier"],
"rules": {
"@typescript-eslint/explicit-function-return-type": [
"error",
{
"allowExpressions": true,
"allowTypedFunctionExpressions": true
}
],
"@typescript-eslint/explicit-member-accessibility": "off",
"import/no-extraneous-dependencies": 0,
"react/jsx-filename-extension": ["error", { extensions: [".jsx", ".tsx"] }],
"react/prop-types": [0]
},
"settings": {
"react": {
"version": "detect"
}
}
}