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.

• ESLint
• Prettier — Code formatter

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 .tsxas 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 .tsxextension. 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 !