Setup Eslint, Prettier with TypeScript and React

In this blog, I will teach you, how to set up eslint, prettier with TypeScript and React. Even if you are not using TypeScript or react you can still follow along.

Video tutorial

I have already created a video about it on my youtube channel. Check that out for more details.

For react, I will use Nextjs. Again the principles are the same. You can also use it with create-react-app.

Editor setup

You need to install eslint and prettier plugins for your editor. To learn more, visit these links. Eslint Prettier

Setup

yarn create-next-app

Then put your app name. I am going to call it eslint-prettier-typescript-react

After that, it will set everything for you.

Now change the directory to the folder.

cd eslint-prettier-typescript-react

TypeScript setup for Nextjs (optional)

Create a tsconfig.json file.

touch tsconfig.json

Install typescript packages.

yarn add --dev typescript @types/react

Then start the server.

yarn dev

It will fill up the tsconfig.json file. Now convert all the javascript files to typescript files.

Setup Absolute import

Absolute Import vs Relative Import

Inside the tsconfig.json file. create a new property baseUrl and set the import point. I will create an src folder and put all source code inside that.

So add this extra code:

{
    "baseUrl": "src/"
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/"],
}

Setup eslint

Since Nextjs version 11.0.0, eslint is already configured out of the box. But that's not enough for me. I want more. So, I will customize that more.

• Install eslint globally on your computer.

yarn global add eslint

• Inside your project initialize eslint.

eslint --init

• Choose 3.

• Choose 1

• Choose your framework if you are using it. In my case react

• If you are using TypeScript then yes. I am using TypeScript.

• Browser in my case.

• Use a popular style guide.

• I would like to use the Airbnb style guide. You can choose any style guide. But Airbnb is good and I recommend it.

• I will use json for my config file.

• It will ask you to install some packages to Install with npm. If you want to use npm then go ahead. But I will use yarn.

So For those who are using yarn like me, You can copy and paste package names and install them.

With typescript:

yarn add --dev eslint-plugin-react @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks  @typescript-eslint/parser@latest

Without typescript:

yarn add --dev eslint-plugin-react  eslint-config-airbnb@latest eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks

It will create an eslint config file .eslintrc. It will be a hidden file.

Prettier Setup

• Let's install prettier.

yarn add --dev eslint-config-prettier prettier

• Create a prettier config file.

touch .prettierrc.json

Now you can put your config in the .prettierrc.json file in json format. You can find the options from here

My basic config for prettier.

{
    "singleQuote": true,
    "useTabs": true,
    "tabWidth": 1,
    "semi": false,
    "jsxSingleQuote": true,
    "arrowParens": "avoid"
}

Now we are done with prettier. Let's set up eslint config.

ESlint config setup

Your .eslintrc file should look like this.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:react/recommended", "airbnb"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": ["react", "@typescript-eslint"],
    "rules": {}
}

We need to extend the eslint config with prettier and nextjs. So add prettier and next/core-web-vitals to extends array.

{
    "extends": [
        "next/core-web-vitals",
        "plugin:react/recommended",
        "airbnb",
        "prettier"
    ]
}

Explanation:

• Extends array takes configs. But configs need to be ordered. The last items will have more priority than previous configs. For example, if any rule gets conflict between airbnb and prettier, the Airbnb config rule will be overridden by prettier.

Run eslint from the command line

For nextjs(11.0.0 +):

{
    "scripts": {
        "lint": "next lint"
    }
}

For every other case:

{
    "scripts": {
        "lint": "eslint . --ext ts --ext tsx --ext js"
    }
}

Let's fix some eslint errors

To turn any rule off or on, add the rules to the rules array. You can find the docs from here. Please watch my video to understand it well.

• allow jsx on other extensions.

{
    "rules": {
        "react/jsx-filename-extension": [
            1,
            { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
        ]
    }
}

• File extension on import statement.

{
    "rules": {
        "import/extensions": [
            "error",
            "always",
            {
                "js": "never",
                "jsx": "never",
                "ts": "never",
                "tsx": "never"
            }
        ]
    }
}

• Import unresolved error for absolute import(if you are using).

{
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"],
                "moduleDirectory": ["node_modules", "src/"]
            }
        }
    }
}

You can find my Eslint config from here

So, that's it for today. I hope I have covered everything that you need to know about how to set up.

Shameless Plug

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

• Intro & Setup
• Build Homepage UI
• How our app will work
• MDX, MongoDB, Static Homepage
• Generate Static Blog Page
• Style Blog page with Chakra-UI and MDX-embed
• Build a real-time view counter
• Autocomplete search form with MongoDB Atlas Search Index
• Deploy application to Vercel

Demo

You can demo the website from here

Features

• Static Blog pages will make the website load faster.
• Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
• Autocomplete search feature for the blog posts.
• Real-time view counter and so on.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full-stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project. I am available on Upwork

Contacts

• Email: thatanjan@gmail.com
• LinkedIn: @thatanjan
• Portfolio: anjan
• Github: @thatanjan
• Instagram (personal): @thatanjan
• Twitter: @thatanjan
• Upwork: @thatanjan

Blogs you might want to read:

• Eslint, prettier setup with TypeScript and react
• What is Client-Side Rendering?
• What is Server Side Rendering?
• Everything you need to know about tree data structure
• 13 reasons why you should use Nextjs
• Beginners guide to quantum computers

Videos might you might want to watch: