This tutorial aims to be a definitive guide for setting up ESLint and Prettier working together on a React Typescript project.
After reading a lot of tutorials, and struggling myself into it, I decided to create this definitive guide to make life easier for anyone who needs it.
ESLint is one of the most popular tools for code quality rules check and code formatting.
Prettier is a code formatting tool.
So, why use Prettier if I can also format my code using just ESLint? In a short answer, because Prettier do the code formatting better than ESLint.
So, as the Prettier documentation says, use Prettier for formatting and linters for catching bugs!
This article will be divided in 4 parts:
To make sure that ESLint and Prettier are setted up right, let’s do a quick check over your Project files.
It should contain the follow packages over “devDependencies”:
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"eslint": "^7.20.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-import-resolver-typescript": "^2.4.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "2.2.1"
}
#prettier #typescript