Prettier - Detailed Review

What is Prettier and what does it do?

Prettier is an opinionated code formatter that automatically formats your code to a consistent style. It supports many programming languages and integrates with most editors. The primary goal is to save time and energy by formatting code on save, eliminating the need to discuss style in code reviews.

How does Prettier handle string quotes?

Prettier chooses the type of quote (double or single) that results in the fewest number of escapes. If there is a tie or no quotes are present in the string, Prettier defaults to double quotes, although this can be changed using the `singleQuote` option. For JSX, Prettier follows the convention of using double quotes by default, but this can also be overridden.

How does Prettier manage empty lines in code?

Prettier preserves empty lines as they were in the original source code but with a few adjustments. It collapses multiple blank lines into a single blank line and removes empty lines at the start and end of blocks and files, except for a single newline at the end of files.

How does Prettier format multi-line objects?

By default, Prettier keeps objects multiline if there is a newline between the `{` and the first key in the original source code. If you want to join a multiline object into a single line, you need to remove the newline after the `{` and then run Prettier. Conversely, adding a newline after the `{` will make the object multiline again.

Why does Prettier use semicolons?

Prettier uses semicolons to avoid potential issues with Automatic Semicolon Insertion (ASI) in JavaScript. This helps prevent mistakes when adding or moving lines of code. Even if your code does not currently use semicolons, Prettier will insert them to ensure each line is independent and to avoid unexpected behavior.

How can I configure Prettier?

You can configure Prettier using various configuration files, such as a `”prettier”` key in your `package.json` or `package.yaml`, a `.prettierrc` file in JSON, YAML, or other formats, or even a `prettier.config.js` file. The configuration file is resolved starting from the location of the file being formatted and searching up the file tree until a config file is found. Prettier also supports overrides for different file extensions, folders, and specific files.

What is the purpose of the `printWidth` option in Prettier?

The `printWidth` option is a guideline for Prettier to determine the desired line length. It is not a hard limit, and Prettier may exceed this width in certain cases, such as long string literals, regexps, comments, or deeply nested code. Prettier generally strives to meet the specified print width but may make both shorter and longer lines as needed.

How does Prettier handle long import statements?

Prettier can break long import statements across several lines, but it also keeps import statements with single elements on a single line if possible. This is based on common requests to maintain readability and consistency in import statements.

Can Prettier fix semicolon-related bugs in my code?

No, Prettier does not fix semicolon-related bugs in your code. It only reformats the code to make it consistent and readable while preserving the original behavior. If your code has a semicolon-related bug, Prettier will reformat it to show how it will behave when run, but it will not fix the bug itself.

How do I install Prettier?

You can install Prettier using npm by running one of the following commands in your terminal: `npm install –save-dev –save-exact prettier` for a local installation or `npm install –global prettier` for a global installation. Ensure you have Node.js installed and configured in your project.

Does Prettier support global configuration?

No, Prettier does not support global configuration. This is to ensure that the formatting behavior remains consistent across different environments and team members. Configuration files are resolved locally within the project to maintain this consistency.