Building create-react-app template with Typescript, Yarn, Eslint, Prettier combo in vscode 🤝

Photo by Vlad Hilitanu on Unsplash

It’s always been a time that you want to set the project up and I need to add this or that and you forgot (at least for me) 😅

So today, I am creating some notes on how I did to build a basic create-react-app for React application 💜

Install create-react-app

It’s the easiest part! 😎

npx create-react-app my-app
cd my-app
npm start

or you can choose to go with Typescript template for the first time

npx create-react-app my-app --template typescript

Or you can add it later with

yarn add typescript @types/node @types/react @types/react-dom @types/jest

After that, you will be asked to change the file extension to .ts or .tsxas mentioned in the documentation here

All done!

Switch to Yarn

If you want to switch from NPM to use Yarn you can follow the steps below! 👇

If you don’t have Yarn already in your machine, you can find how to install it here

yarn init

and what you need to do is just to answer the questions!

▶ yarn init
yarn init vX.XX.XX
question name (my-app):
question version (0.1.0):
question description: 
question entry point (index.js):
question repository url (XXX):
question author (XXX):
question license (MIT):
question private (true):
success Saved package.json
✨  Done in 32.39s.

and then you can remove package-lock.json file and run yarn again to generate yarn.lock

Adding Eslint

To make life easier (or not?) 😅

Run the command below to add the Eslint to your project

npx eslint --init

and all you need to do is (again) answer the questions ✍️

▶ npx eslint --init
✔ How would you like to use ESLint? · problems
✔ 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
✔ What format do you want your config file to be in? · JSON
...
✔ Would you like to install them now with npm? · No / Yes
...

you can also add the eslint command to scripts in package.json

"eslint": "eslint src/**"

you can find all command line and options that you can add here

Add Prettier

To install Prettier you can do the following command

yarn add --dev --exact prettier

add this to script section in package.json file

"prettier": "prettier --write ."

then you can try run the command to format all file 😁

▶ yarn prettier
yarn run v1.22.10
$ prettier --write .
.eslintrc.json 31ms
.prettierrc.json 3ms
package.json 5ms
public/index.html 42ms
public/manifest.json 4ms
README.md 43ms
src/App.css 41ms
src/App.test.ts 171ms
src/App.tsx 25ms
src/index.css 6ms
src/index.tsx 5ms
src/react-app-env.d.ts 3ms
src/reportWebVitals.js 17ms
src/setupTests.js 5ms
tsconfig.json 5ms
✨  Done in 1.10s.

If you want to have a rule for your project you can add it in the prettier config file

echo {}> .prettierrc.json

and then for me, my options is simply this one

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2
}

You can find more options and usage here.

Link Eslint and Prettier config together 🤝

To make eslint and prettier understand each other 🤪

First, you need to add these dependencies to the project

• eslint-config-prettier

yarn add --dev eslint-config-prettier

and add this line below to eslint.json

"extends": [
    ...,
    "prettier"
],

😎

(BONUS) Configuration for vscode

You can also add the following configuration to vscode settings to make your coding life easier 😆

First, need to have the extentions

1. Install Eslint Extention for vscode
2. install Prettier — Code formatter Extention for vscode

then you need to add this config to this to settings.json

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

Try to make some change and SAVE IT! 👩🏻‍💻

If you want to specify the config for each workspace. You can create .vscodefolder at the root of the project and create settings.json file there with the config there!

Enjoy!

and don’t forget to run yarn start 🤣