Prettier and how to get most out of it

Intro

What is Prettier? Prettier is an opinionated code formatter that supports many languages and integrates with most of code editors. It must be emphasised that Prettier is opinionated since it provides very few configurable properties (23 as of 26th June 2023).

What does code formatting mean? Essential Prettier parses and reprints code according to the rules set in the config file. It can be done by either:

Installing Prettier plugin (highly recommended) and/or

Running prettier --write . command

Prettier rules and best practices

When it comes to configuring Prettier settings, it is advisable to prioritize simplicity, as the tool's philosophy is rooted in its opinionated nature. Google's TypeScript Style guide also reflects this approach, recommending keeping Prettier configurations minimal to fully embrace its opinionated formatting decisions.

// https://github.com/google/gts/blob/main/.prettierrc.json
{
  "bracketSpacing": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "avoid"
}

Prettier integrations with other tools

Prettier plugin (VSCode and most other code editors)

Prettier plugin will generally allow you to set up your code editor to reformat the code in your file every time you save it. This is very handy since you don't have to bother with formatting your code by hand any more. https://prettier.io/docs/en/editors.html

Prettier and pipeline/ husky

Since not all of your colleagues will neccecerly have set up the plugin and will make sure that the code is formatted it is needed to enforce that automatically. To do that it is recommended to use husky to run Prettier pre-commit. For a tutorial on how to do it, look here- https://prettier.io/docs/en/precommit.html . Additionally, it might be worthwhile to add a prettier check . in your pipeline just to be sure that the code meets the Prettier rules.

Prettier and ESLint

By combining Prettier and ESLint, you can leverage the strengths of both tools. Prettier is responsible for formatting your code, ensuring consistent and aesthetically pleasing styles. On the other hand, ESLint provides powerful configuration capabilities to enforce code quality and best practices.

prettier-eslint plugin combines the formatting capabilities of Prettier with the configuration capabilities of eslint. It formats your code using Prettier and then applies eslint --fix command to ensure adherence to your eslint configuration. This allows you to benefit from Prettier's powerful formatting while maintaining linting consistency with eslint.

https://github.com/prettier/prettier-eslint

eslint-plugin-prettier plugin is an ESLint plugin that runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

https://www.npmjs.com/package/eslint-plugin-prettier

Prettier and XML

By default Prettier does not support XML, if you do need Prettier to support XML there is a plugin in place that can help you out. https://www.npmjs.com/package/@prettier/plugin-xml

Unfortunately, Pretteir XML does not work out of the box together with the rest of your Prettier setup, therefore you need to do some additional configuration.

         module.exports = {
            overrides: [
                {
                    files: "*/",
                    options: {
                       "bracketSpacing": false,
                       "singleQuote": true,
                       "trailingComma": "es5",
                       "arrowParens": "avoid"
                      }        
                },
                {
                    files: "*.xml",
                    options: {
                        parser: "xml",
                        plugins: ["@prettier/plugin-xml"], 
                        tabWidth: 4,
                        printWidth: 120, 
                        bracketSameLine: true,
                        singleAttributePerLine: true, 
                        useTabs: true
                    }
                }
            ]
          };

And when you call it in husky you can do something like this to make sure that xml is formatted-

"prettier:xml": "prettier --parser xml --config ./prettier.config.js --write '*/.xml'"

Prettier alternatives

ESLint

ESLint code formatting is still a valuable choice despite the emergence of Prettier as a popular code formatter. Firstly, ESLint encompasses a broader scope, allowing for code formatting as well as static analysis for detecting potential errors and enforcing best practices. This flexibility is advantageous for maintaining consistent code quality and preventing common mistakes. Secondly, ESLint provides a vast ecosystem of plugins and configurations, empowering developers to customize and tailor linting rules to their specific project needs. This level of configurability ensures adaptability to diverse codebases and coding styles. Therefore, ESLint remains a reliable and powerful tool for code formatting and beyond.- https://www.npmjs.com/package/eslint,

Standard

Standard is still a strong alternative to Prettier. It provides a comprehensive solution by combining code formatting with a set of predefined linting rules. These rules encompass not only code style conventions but also potential errors and best practices. Standard's predefined nature eliminates the need for extensive configuration, making it quick and easy to set up. While Prettier focuses solely on code formatting, Standard offers a holistic approach that ensures code quality, consistency, and adherence to industry standards. Therefore, Standard remains a reliable choice for developers seeking an all-in-one solution for code formatting and linting.

https://www.npmjs.com/package/standard ,

js-beautify

JS-Beautify is still a viable option compared to Prettier. It specializes in code formatting and offers extensive customization options for indentation, spacing, and other stylistic preferences. While Prettier focuses on enforcing a consistent formatting style, JS-Beautify allows developers to tailor the formatting rules to their specific needs. It supports various programming languages and provides flexibility in handling different codebases. JS-Beautify's ability to fine-tune formatting rules makes it a valuable choice for developers who prioritize customization while maintaining code readability and aesthetics. Therefore, JS-Beautify remains a strong contender for code formatting needs alongside Prettier.

https://www.npmjs.com/package/js-beautify

Conclusion

In conclusion, leveraging the full potential of Prettier involves embracing its opinionated nature and keeping the configuration as simple as possible. By following Prettier's philosophy, developers can benefit from consistent and aesthetically pleasing code formatting. Integrating Prettier with other tools like ESLint enhances code quality and adherence to best practices. While alternative options such as ESLint, Standard, and JS-Beautify offer different features and levels of customization, Prettier remains a reliable choice for achieving code readability and aesthetics. Ultimately, selecting the right code formatting tool depends on the specific needs and preferences of the development team.