DEV Community

loading...
Cover image for Setup Eslint, Prettier with Typescript and React

Setup Eslint, Prettier with Typescript and React

Anjan Shomodder
Full Stack Web Developer | Blogger | Instructor at Cules coding
Updated on ・5 min read

Eslint is a linter which enforces developer to write good and consistent code all over Project. Prettier is a good formatter tool that automatically formats the source code.

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

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

If yout like this video, Please like share and Subscribe to my channel.

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
Enter fullscreen mode Exit fullscreen mode

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 directory to the folder.

cd eslint-prettier-typescript-react
Enter fullscreen mode Exit fullscreen mode

TypeScript setup for Nextjs (optional)

Create a tsconfig.json file.

touch tsconfig.json
Enter fullscreen mode Exit fullscreen mode

Install typescript packages.

yarn add --dev typescript @types/react
Enter fullscreen mode Exit fullscreen mode

Then start the server.

yarn dev
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

So add this extra code:

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

Setup eslint

  • Install eslint globally on your computer.
    yarn global add eslint
Enter fullscreen mode Exit fullscreen mode
  • Inside your project initialize eslint.
    eslint --init
Enter fullscreen mode Exit fullscreen mode
  • Choose 3.

Alt Text

  • Choose 1

Alt Text

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

Alt Text

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

Alt Text

  • Browser in my case.

Alt Text

  • Use a popular style guide.

Alt Text

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

Alt Text

  • I will use json for my config file.

Alt Text

  • 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.

Alt Text

So For those of 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
Enter fullscreen mode Exit fullscreen mode
Without typescript:
yarn add --dev eslint-plugin-react  eslint-config-airbnb@latest eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks  
Enter fullscreen mode Exit fullscreen mode

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

Prettier Setup

  • Let's install prettier.
yarn add --dev eslint-config-prettier prettier
Enter fullscreen mode Exit fullscreen mode
  • Create a prettier config file.
touch .prettierrc.json
Enter fullscreen mode Exit fullscreen mode

Now you can put your config in .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"
    }
Enter fullscreen mode Exit fullscreen mode

Now we are done with prettier. Let's setup 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": {
        }
    }
Enter fullscreen mode Exit fullscreen mode

We need to extend the eslint config with prettier. So add prettier to extends array.

    {
        "extends": [
           "plugin:react/recommended",
           "airbnb",
           "prettier" 
        ],
    }
Enter fullscreen mode Exit fullscreen mode
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"] }
            ]
        }
    }
Enter fullscreen mode Exit fullscreen mode
  • File extension on import statement.
{
    "rules": {
            "import/extensions": [
                "error",
                "always",
                {
                    "js": "never",
                    "jsx": "never",
                    "ts": "never",
                    "tsx": "never"
                }
            ],
        }
}
Enter fullscreen mode Exit fullscreen mode
  • Import unresolved error for absolute import(if you are using).
    {
        "settings": {
            "import/resolver": {
                "node": {
                    "extensions": [".js", ".jsx", ".ts", ".tsx"],
                    "moduleDirectory": ["node_modules", "src/"]
                }
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

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 setup. I would highly recommend you to watch the youtube video of mine

I also have a Blogging site. Feel free to visit Cules Coding.
Alt Text

I am creating a video series on my youtube channel about how to build a static blogging site using JAMstack.


What are you going to learn from this video series?

  • ReactJS, NextJs
  • Static Site Generation
  • Dynamic Routing
  • Material-ui
  • MongoDB
  • how to build a real time view counter
  • a small search engine with mongodb and so on.

Project Demo

You can demo the project from here
Alt Text

View the Project code.

If you have any question please comment down below. If you want to reach out to me, You can follow me on any social media as @thatanjan . Until then stay safe and good bye.

About me:

Who am I?

My name is Anjan. I am a full stack web developer from Dhaka, Bangladesh.

What problems do I solve?

I can create complex full stack web applications like social media application, blogging, e-commerce website and many more.

Why do I do what I do?

I love to solve problems and develop new ideas. I also enjoy sharing my knowledge to other people who are wiling to learn. That's why I write blog posts and run a youtube channel called Cules Coding

Think we should work together?

Feel free to contact me

Email: thatanjan@gmail.com

linkedin: @thatanjan

portofolio: anjan

Github: @thatanjan

Instagram (personal): @thatanjan

Instagram (youtube channel): @thatanjan

twitter: @thatanjan

About My channel:

Why would you subscribe to Cules Coding?

Cules Coding will teach you full stack development. I will teach you not only the basic concepts but also the advanced concepts that other youtube channels don't cover. I will also teach you Data Structures and Algorithms with abstraction and without Math. You will also find many tutorials about developer tools and technologies. I also explain advanced concepts and technologies with simplicity.

So what are you waiting for?

Subscribe to Cules Coding so that my friend you don't miss any of these cool stuffs.

Discussion (2)

Collapse
tutods profile image
Daniel Sousa @TutoDS

Which theme you are using on your zsh?

Collapse
thatanjan profile image
Anjan Shomodder Author

I am not using zsh. I use Fish shell. And the theme name is budspencer. You can download it with oh my fish