Prettier for your Workspace

All developers might have come across code formatting issues in their careers. That’s when prettier appears as a lifesaver for us. No doubt Prettier comes by default in some IDEs, when we work in a team and each one has a different set of configurations leads to a situation where code is not “so formatted” or not “well formatted”. Here is a solution to the above-mentioned problem.

Installation

The first step would be to install the prettier dev-dependency.
using Yarn: yarn add prettier — dev

using npm: npm install prettier — save-dev

The above commands will install Prettier and add it to the devDependencies section of your package.json file. Once you are done with the installation create a configuration file for prettier in your root directory of your project. The file can be in the following formats:.prettierrc or .prettierrc.json

For JSON files

.prettierrc.yml or .prettierrc.yaml

For .yml and .yaml files

Config Parameters:

1. arrowParens: Controls the use of parentheses around arrow function parameters. Options are “always” or “avoid”.

• avoid: This means that if you have a single parameter in an arrow function, the parentheses around it will be omitted.
• always: This means that if you have a single parameter or not in an arrow function, the parentheses around it will be added all the time.

2. bracketSpacing: If set to true, Prettier will add spaces between object literal brackets. It defaults to true. such as {foo: bar} will get replaced to { foo: bar }.

3. printWidth: It specifies the line length where Prettier will try to wrap the code. If a line exceeds this length, Prettier will try to break it into multiple lines. It defaults to 80.

4. semi: It controls whether to add semicolons at the end of statements. It defaults to true.

5. singleQuote: It indicates that single quotes will be used for string literals. Its default value is “true”.

6. jsxSingleQuote: It defines whether to use single quotes in JSX files. Its default value is “false”.

7. jsxBracketSameLine: It specifies whether the closing bracket in JSX elements should be placed on the same line as the last property. It defaults to false.

8. tabWidth: It defines the number of spaces for each indentation level. It defaults to 2.

9. trailingComma: It adds a comma after every key-value pair in an object. It has the following options which can be used. It defaults to “es5”.

• “none”: This option avoids the use of trailing commas. Prettier will remove any trailing commas from lists or objects.
• “es5”: This option adds trailing commas when necessary, in multiline arrays and objects, following the ECMAScript 5 (ES5) specification.
• “all”: This option adds trailing commas to all eligible elements in multiline arrays and objects. This is also known as the “consistent” style.

10. useTabs: If it is set to true, Prettier will use tabs for indentation instead of spaces. It defaults to false.

11. quoteProps: Accepts values like “as-needed”, “consistent”, or “preserve”.

• “consistent”: This option instructs Prettier to maintain consistent. quoting style for all object property names within a file. Prettier will either quote all property names or leave them unquoted based on the first encountered property name that requires quoting.

Before

After

• “as-needed”: This option instructs Prettier to only quote object property names that require it, such as property names with special characters or spaces. Prettier will leave unquoted property names as is.

Before

After

• “preserve”: This option instructs Prettier to preserve the existing quoting style of object property names. Prettier will not make any changes to the quoting of property names and will keep them as they were in the original code.

12. endOfLine: The endOfLine property in Prettier’s configuration determines the end of line (EOL) character to be used in the formatted code.

• “auto”: This option instructs Prettier to automatically select the end of line character based on the existing line endings in the file. Prettier will maintain the current line endings without modifying them.
• “lf”: This option enforces the use of Unix-style line endings (\n) in the formatted code. Prettier will convert all line endings to \n if they are different.
• “crlf”: This option enforces the use of Windows-style line endings (\r\n) in the formatted code. Prettier will convert all line endings to \r\n if they are different.
• “cr”: This option enforces the use of carriage return (\r) as the line ending character. Prettier will convert all line endings to \r if they are different.

13. requirePragma: If it is set to true, Prettier will only format files that contain a special comment pragma at the top. Defaults to false.

14. proseWrap: It configures how Prettier handles markdown files. The options available are “always”, “never”, or “preserve”.

• “always”: This option instructs Prettier to always wrap prose-like content. Prettier will attempt to wrap lines to the printWidth limit specified in the configuration.
• “never”: This option instructs Prettier to never wrap prose-like content. Prettier will keep the content on a single line unless forced by other constraints such as the printWidth limit.
• “preserve”: This option instructs Prettier to maintain the existing line wrapping for prose-like content. It will not make any changes to the wrapping of paragraphs or other prose elements.

15. importOrder: This option helps in arranging the import statements in our files in a certain order. A point to be noted is that it's not a part of the Prettier configuration but can be included using the details mentioned in this article.

Add a script in your package.json file to run the formatting. A point to be noted is that it can cause changes in all the unformatted files. You can also add it to your pre-commit scripts using “husky”- a pre-commit hook and “lint-staged”- it helps identify the modified files and run eslint & prettier on commit.

Happy Coding! Be Happy and Keep Smiling!!!