This content originally appeared on Level Up Coding - Medium and was authored by steveleung9527
This will be the full guide to help you start your React App from scratch with the followings:
- Webpack 5 (Bundle your app)
- Babel (Transpile JSX)
- TypeScript
- Eslint (Format Code like a pro)
- Husky (Lint Before Commit)
- Jest (Testing Library)
- Micro Front-end (Webpack 5 Module Federation)
Previous Course
Full Guide: Start React App From Scratch
Now we will implement eslint into our react project.
Why?
Why use eslint?
Eslint enforces your coding standard and guidelines to help you and your team to minimize minors errors, maintain the same coding style and have better practice with your code.
VS Code
ESlint and Prettier plugin is highly recommended to be installed
- initialize eslint
npx eslint --init
It will then popup options for you to choose
here is my preference
# To check syntax, find problems, and enforce code style
# JavaScript modules (import/export)
# React
# Yes
# Browser
# Use a popular style guide
# Standard
# JSON
# Yes
# npm
After that .eslintrc.json is auto created at the root
2. update .eslintrc.json
please add “project”: [“./tsconfig.json”] under parserOptions
// .eslintrc.json
"parserOptions": {"ecmaVersion": "latest",
"sourceType": "module",
"project": ["./tsconfig.json"]
},
This is required for a typescript project.
eslint should work now, if not please restart vscode
3. update package.json
"scripts": {
..."lint": "eslint --fix --ext .ts,.tsx ./src",
...
},
add script lint and run this
— fix tells eslint to help fix some error and warning according to your config
— ext tells eslint to lint files with .ts and .tsx extension
npm run lint
Still see errors???
There are two more errors that cant be fixed after run the command.
- Missing return type on function
There are two solution for this eslint error, first is that, according to the hint add the return type
import { ReactNode } from 'react'
const App = (): ReactNode => {
return <div>Hello World!</div>
}If you find this is annoying, then you could simply switch off this rule by updating eslint config like this
// .eslintrc.json
{
"rules": {
"@typescript-eslint/explicit-function-return-type": "off"
}
}
2. ‘React’ must be in scope when using JSX
for this, feel free to switch off the eslint rule, because we are using babel to help us to inject the react runtime, therefore we can skip this statement import React from ‘react’
Now your .eslintrc.json may look like that, and no eslint error occurred
npm run lint
4. Explore more
Now you should explore Eslint and TypeScript Eslint documentation to custom your favouriable coding style
Recommended rules/plugin for Eslint with React:
eslint-config-react-app — created by create-react-app team
eslint-plugin-react-hooks — react hooks dependencies recommender
eslint-config-prettier — implement with prettier formatter, makes your code beautifier
Extra
For those beginners want quick setup, you can follow my eslint practice and preference here:
Next Time implementing husky and lint-stage ~
Format code before git commit!
Please give me a clap, and follow me if you find the article is useful.
Full Guide: Add Eslint to React TypeScript Project was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by steveleung9527
steveleung9527 | Sciencx (2022-11-03T19:45:33+00:00) Full Guide: Add Eslint to React TypeScript Project. Retrieved from https://www.scien.cx/2022/11/03/full-guide-add-eslint-to-react-typescript-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.