Prettier is an opinionated code formatter that will take all your code, removes the inconsistency in the codebase in styling the code, and ensures the output code should be formatted in the desired pattern by using the predefined styles in prettier. The reason for being used prettier is given below:
- It helps to make proper alignment along with giving the space in between the words in the code that enhance the overall readability of the large-size code.
- The reader can easily able to understand the structure that will give an idea of the logic of the code at a glance.
- The length & width of the overall code is also reduced due to proper indentation of the code. An ordinarily spilling of the code across the right margin, that will require horizontal scrolling or can destroy the shape by wrapping up the line of text in an unstructured way.
- Providing the error message if the code is not followed any syntax, will help us to make syntactically correct code.
- It enforces the proper consistent styling of the codebase across the entire codebase. For this reason, the maintainability of the large-size code is much easier.
- Languages supported by Prettier: JavaScript, TypeScript, JSX, Angular, Vue, CSS, HTML, JSON, GraphQL, and much more.
There are so many other reasons also there for using the Prettier but we will not be covering those reasons here.
But why use Prettier? It is generally considered good practice if a project has a common coding style guide, Due to this, it becomes easier for maintainers to maintain the codebase, for newcomers to adapt to those stylings which will also eventually result in having a great understanding of syntax. Even if you have your old codebase, you can run Prettier on your codebase which will reformat all your massive code files in a matter of seconds. Most importantly, it gives you the freedom to write code anyways you want as you can format it correctly immediately. If you’re worried about the acceptance rating then here are the possible stats given below:
- Used by various big companies like Facebook, Spotify, Discord, PayPal, Dropbox, ESLint, and many more.
- More than 40k+ stars on Github.
- Has 13 Millions+ weekly downloads.
Installation Procedure: In order to implement the Prettier to our codebase, we need to follow certain steps.
Step 1: Install Prettier in your project by running the following command:
npm install -D prettier
Step 2: After adding Prettier as a devDependency, let’s create a file called `.prettierrc` which is a configuration file for Prettier, at the root of the project directory and just add curly braces `{}` in that file, so anyone will know that your project uses Prettier with the default configuration.
.prettierrc file at the root of the project
Step 3: Now, let’s add a command in our package.json’s “scripts” property to run Prettier.
"scripts": {
"format": "prettier --write \"src/**/*.{js,jsx}\""
},`npm run format` command will format every `*.js` or `*.jsx` file in the “src/”, even if your “src/” folder contains multiple directories in it, this regex command will go down recursively on them and format them.
Output:
Editor Integration: You can get the most out of Prettier by using it with code editors, Prettier supports many editors like Emacs, Atom, VS Code, Sublime Text, Vim, etc. Follow the below steps to install Prettier in Visual studio code:
- In the Extensions sidebar search extension “Prettier – Code formatter” and install it or you may download it through VS Marketplace.
- Make Prettier your default code-formatter for this in Settings, search for this setting “editor.defaultFormatter” and set it to Prettier.
- If you need Prettier to format your code automatically once it’s saved then search for this setting “editor.formatOnSave” and tick it to turn it on.
Sometimes, it may happen that some projects don’t use Prettier in such cases you need to disable this setting as it will format your code even if your project doesn’t have a Prettier setup. But we geeks do have a solution for that, In the setting, menu search for this setting “prettier.requireConfig” and tick it to turn it on, by doing so it will ensure that Prettier will only format the code if there is a Prettier config file (.prettierrc) present in the project directory.
ESLint Integration: If your Project uses ESLint, then you can have a setup where Prettier will be used for formatting purposes and ESLint will do the work of catching bugs and maintaining code quality. See this article for ESLint set up in your project.
For integrating Prettier with ESLint follow the below steps:
Install eslint-config-prettier, which will turn off some ESLint rules that conflict while using Prettier
npm install -D eslint-config-prettier
Append “prettier” to the last in extends array in your `.eslintrc.*` file
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
...
}Conclusion: After installing Prettier and integrating it with our Code Editor and ESLint, we have a perfect development setup ready, where we don’t have to clutter our mind by worrying about styling the code, remembering the proper syntax, or any other formatting rules of projects while writing the code because ESLint and Prettier will take care of that and we can focus more on building our project.