How & Why to Configure Prettier in Webstorm
Let's talk about a tool called Prettier! Prettier is an opinionated code formatter that is used for a variety of different languages. In this video, we're going to focus on configuring Prettier in a React JS project.
Adding Prettier along with eslint should be the first step when starting a React JS project. In this tutorial, I walk through what Prettier is and why to use it, how to install Prettier and how to configure Prettier in webstorm.
Prettier is a must coding tools for all React JS projects. It'll simplify your life as a dev and improve your codebase, simply and efficiently.
🚀 Prettier Website: https://prettier.io/
🚀 Command to install prettier: npm install --save-dev --save-exact prettier
🚀 Config File:
Create a file called .prettierrc.json with the following:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}
🚀 Ignore File:
Create a file called .prettierignore with the following:
**/.git
**/.svn
**/.hg
**/node_modules
🚀 Command to run prettier manually: npx prettier . --write
0:22 What is Prettier?
0:50 Install Prettier
1:17 Config & Ignore
1:40 Adding the Config File
2:25 Adding the Ignore File
2:52 Explaining the config file
3:19 Manually running Prettier
4:03 Configuring Webstorm w/ Prettier
5:15 Outro
Watch video How & Why to Configure Prettier in Webstorm online without registration, duration hours minute second in high quality. This video was added by user Code Emily 16 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,532 once and liked it 97 people.