Setup .eslint, .prettier, .editorconfig, .jsconfig in react apps
Updated, Jun 12, 2021
2 minutes to read
Setup .eslint, .prettier, .editorconfig, .jsconfig in react apps
Setup the eslint and prettier to lint the errors and format your code
Install the dependencies
Install the following dependencies in your project using yarn
or npm
# using yarn
yarn add -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks prettier eslint-plugin-prettier
# using npm
npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks prettier eslint-plugin-prettier
Eslint configuration
Create .eslintrc
in the root directory of the project and paste the following code into it. You can add, remove and change the rules of the eslint.
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
},
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off",
"react/jsx-filename-extension": "off",
"import/no-unresolved": "off",
"react/jsx-props-no-spreading": "off",
"react/prop-types": "off",
"react/no-array-index-key": "off",
"import/prefer-default-export": "off",
"react/react-in-jsx-scope": "off",
"no-plusplus": "off"
}
}
Prettier configuration
Create .prettierrc
in the root directory of the project and paste the following code into it. to format your code using prettier.
{
"semi": true,
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all"
}
Editorconfig configuration
Create .editorconfig
in the root directory of the project and paste the code
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
Jsconfig configuration
Create jsconfig.json
in the root directory of the project and paste the code
{
"compilerOptions": {
"baseUrl": "src"
}
}
Adding Scripts in package.json
Add the following scripts in your project to run the eslint and prettier for lint andformat your code. Add the scripts in package.json
{
"scripts": {
"escheck": "eslint .",
"esfix": "eslint ./ --fix",
"prettier": "prettier --write ."
}
}