Auto Format with ESLint and Prettier for React TypeScript Project
Auto formatting is a great enhancement of DX. It saves your development time and drastically increases your productivity! Especially, it has a big impact on Frontend because Frontend normally has more types of extensions than backend.
In the Frontend world, ESLint and Prettier are well known as a good combination of linter and formatter. However, setting them is kind of what you don’t want to do because it’s not application code.
So this article explains how to setup auto format with ESLint and Prettier for Frontend, especially React TypeScript project. It aims that when you save a file on VSCode, files are automatically formatted by ESLint and Prettier.
Roles of ESLint and Prettier
Before setting ESLint and Prettier, let’s clarify their roles.
ESLint is a linter that finds problems in your code and shows errors and warnings. Because it’s a linter, it has a lot of rules. On the other hand, Prettier is a formatter.
So when you format codes, Prettier does formatting based on ESLint.
Setup ESLint
Firstly, let’s add ESLint.$ yarn add -D eslint
!! 2022-10-09 updated !
This article is originally written by using Airbnb style configuration. But because airbnb style configuration is removed from @eslint/config
on 14th of August 2022, it’s easier to use eslint-config-react-app
.$ yarn add -D eslint-config-react-app
eslint-config-react-app
already has many plugins which is useful for React. So only you have to do is just creating a ESLint config.// .eslintrc.json{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"react-app"
]
}
That’s it ! Simple 👏 If you want to setup Prettier, please go to Prettier section ! If you want to know previous setup, feel free to read.
******** Airbnb style setup (can’t use anymore) ********
After installing, configuration can be done by interactive mode.$ yarn create @eslint/config✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn
After interactive process, you can check that 3 packages are installed in package.json.
- @typescript-eslint/eslint-plugin : provides TypeScript linter rules.
- @typescript-eslint/parser : convert TypeScript to ESLint interpretable code
- eslint-config-airbnb : is AirBnb pre-defined configs.
- eslint-plugin-import : is plugin for import/export
- eslint-plugin-jsx-a11y : is plugin for accessibility
- eslint-plugin-react : is plugin for react
- eslint-plugin-react-hooks : is plugin for react hooks
And ESLint config file .eslintrc.json
would be created. If you check the config file, you can understand general setting is done by interactive mode.// .eslintrc.json{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
}
Import parts are below.
- env : is global variables setting which is
browser
- extends : enables you to use pre-defined setting of other packages. Here react and airbnb pre-defined configs are used
- parser : is parser settings which enable parse TypeScript here
- plugins : specify third party plugin which is set for TypeScript and React
*********** End of Airbnb style setup ***********
Setup Prettier
After setting up a linter, let’s setup a formatter.$ yarn add -D prettier
And create the prettier config file .prettierrc.json
// .prettierrc.json{
"tabWidth": 2,
"singleQuote": true,
}
Prettier itself has a very simple configuration 👏
Here some people wonder why Prettier has lint rules 🤔 Actually, Prettier has some linter rules and it leads to one problem, rule conflicts.
Integrate Prettier with ESLint
As I said in the last section, the rules of Prettier and ESLint are conflicting with each other. But fortunately, you have a good package, eslint-config-prettier.$ yarn add -D eslint-config-prettier
It turns off all the rules which conflict with Prettier. To use ESLint and Prettier perfectly, you should add one configuration in .eslintrc.json
.// .eslintrc.json{
...
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"react-app",
"prettier"
]
...
}
One important thing is "prettier"
setting must be added as the last element of extends
to override ESLint rules with Prettier.
Finally, ESLint and Prettier setup is done! Let’s confirm it. lint
command is just for getting errors and warnings. format
command is for formatting.// package.json{
"scripts: {
"lint": "eslint --ext .js,.ts,.jsx,.tsx src",
"format": "yarn run lint --fix & yarn prettier --write 'src/**/*.{js,jsx,ts,tsx}'"
}
}
Now, you can call it like below 🎉
VSCode Setting
So far, you have done ESLint and Prettier setting. The last thing is the auto format setting! Fortunately, VSCode editor plugin automates format on file saves. So let’s setup it up! Please install the extensions below.
And create a VSCode setting file.// .vscode/settings.json{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // ESLint auto format on save
},
"editor.formatOnSave": true, // Prettier auto format on save
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
That’s it! When you write code and save a file, you can see auto format now!
Tips
Resolve react/jsx-filename-extension
Because JSX is allowed only in .jsx
file be default, this error occurs. So you should allow .tsx
as well.// .eslintrc.json{
...
"rules": {
"react/jsx-filename-extension": [
"error",
{ "extensions": [".jsx", ".tsx"] }
],
}
}
Resolve import/no-unresolved
So far, because you installed @typescript-eslint/parser
and @typescript-eslint/eslint-plugin
, it’s possible to format TypeScript. But the error says it cannot resolve typescript file import. So add import resolver setting.// .eslintrc.json{
...
"rules": {
...
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
Resolve import/extensions
This error means linter cannot resolve tsx file without .tsx
extension. So if you write it with ./App.tsx
, you can avoid it. But it’s time consuming to write extensions every time you import. So add extension setting.// .eslintrc.json{
...
"rules": {
...
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
},
"settings": {
...
}
}
ignorePackages
means you can write npm package import without extension (ex. import path from “path”;
). And you don’t have write .js
, .jsx
, .ts
and .tsx
extensions anymore.
This article explains the simple setup of ESLint and Prettier for React TypeScript project!
If you want to speed up your project more by ESLint, I explained 7 recommended rules of ESLint. Feel free to read it !