DEV Community

How to setup a React.JS Project with TypeScript, ESLint and Prettier

Renato Rocha on January 06, 2020

During the software development proccess is important keeping the code well organized and readable, following a development quality standard that w...
Read full post
Collapse
 
martincernyawin profile image
Martin Cerny • • Edited

I had to add this to .eslintrc.js

    "import/extensions": [
       "error",
       "ignorePackages",
       {
         "js": "never",
         "jsx": "never",
         "ts": "never",
         "tsx": "never"
       }
    ],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".ts", "tsx"] }],
Enter fullscreen mode Exit fullscreen mode

Any idea why you didn't need this?

Collapse
 
renatobentorocha profile image
Renato Rocha •

I Martin Cerny, thanks by observation.

I had added this line also. This can be saw in shared source code at the end of post, but i forgot to add in example.

I will add this line.

Best regards

Collapse
 
martincernyawin profile image
Martin Cerny •

Thanks for updating the article! You should also add the other line jsx-filename-extension and then it also needs import resolver

Thread Thread
 
renatobentorocha profile image
Renato Rocha •

Hi Martin,

Add the complete .eslint.rc.json like in: github.com/renatobentorocha/react_...

Thanks by observations :)

Collapse
 
insuusvenerati profile image
Sean •

Why are these rules set?

"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-unused-vars": "off"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
renatobentorocha profile image
Renato Rocha •

Hi Sean!

"@typescript-eslint/explicit-function-return-type": "off", -> disable the requirement of a return type in functions.
"@typescript-eslint/no-unused-vars": "off" -> disable alert about unused vars.

Best regards

Collapse
 
gerbosan profile image
Carlos A. • • Edited

But... isn't --typescript flag available for create-react-app?

Please correct eslint initialization. It says yarn eslint --int but has to be yarn eslint --init

Collapse
 
renatobentorocha profile image
Renato Rocha •

Hi Carlos, thanks a lot by the comment.

When we use the create-react-app with the flag "--template typescript",
what happens is that, some packages for typescript will be installed and also
will be created a tsconfig.js file. But, all other configurations will not be created.

Another thing that happens, is that, all the packages that we need only in development
environment, will be setting as production on package.json file. That is,
create-react-app template do not separe production and development packages.

I will correct "yarn eslint --int".

Thanks for all observations.

Collapse
 
gorvgoyl profile image
Gourav •

Thanks, this is an extensive guide! I have few doubts.. any specific reason to choose "@typescript-eslint/parser" over "babel-eslint"? and why should we include "airbnb" in eslint "extends"?

Collapse
 
renatobentorocha profile image
Renato Rocha •

Hi JerryGoyal! Thanks by comments!

Best regards

Collapse
 
brettfishy profile image
Brett Fisher •

Great post, thank you so much. Saved me a lot of pain

Collapse
 
renatobentorocha profile image
Renato Rocha •

Hi bandrewfisher, thanks by comment.

I'm very happy to be able to help you.

Best regards