React-Setting Prettier on a React Typescript project:

 Setting Prettier on a React Typescript project:

===============================================

Step 1: Create a React Project with Typescript

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

Step 2: Install Prettier package

npm install --save-dev --save-exact prettier

Step 3: ‘prettierrc.json’ file

Create a ‘.prettierrc.json’ file and add some prettier rules:

Example:

{

"trailingComma": "es5",

"tabWidth": 4,

"semi": false,

"singleQuote": true

}

Step 4: ‘.prettierignore’ file

Create a ‘.prettierignore ‘ file and add the follow:

node_modules

# Ignore artifacts:

build

coverage

Step 5: Running Prettier

Inside the project directory, open a terminal.

To run Prettier and format the code, just run:

npx prettier --write <targetFile>

Step 5.1: Let’s Run!

On the project that we create, let’s run prettier over the file App.tsx.

npx prettier --write src/App.tsx

npx prettier --write .  ( For all files )