> For the complete documentation index, see [llms.txt](https://pavewise.gitbook.io/pavewise-style-guide-and-more/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/config-and-tooling/editor-ide-setup/formatting/prettier-.prettierrc.md).

# Prettier (.prettierrc)

<details>

<summary>Notes &#x26; Setup</summary>

* React docs: [**Formatting**](https://react.dev/learn/editor-setup#formatting)

* **Note:** requires [Prettier (VSCode extension)](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

* **Additional Setup:**
  * "on save":&#x20;
    * `Cmd+Shift+P`  > **Preferences: Open \[Workspace/User/...] Settings (JSON)**

<pre class="language-json"><code class="lang-json"><strong>{
</strong>  "editor.formatOnSave": true
}
</code></pre>

```json
{
  // Optionally, specify formatting for specific file types
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

</details>

<details>

<summary>Aaron's Personal Preference</summary>

```json
{
	"semi": false,
	"singleQuote": true,
	"tabWidth": 2,
	"trailingComma": "es5",
	"jsxBracketSameLine": false,
	"arrowParens": "always",
	"bracketSpacing": true,
	"useTabs": false
}
```

</details>

<details>

<summary>Popular Options</summary>

1. **`semi` (Semicolons):**
   * Option: `"semi": true` or `"semi": false`
   * Use: Controls whether semicolons are added at the end of statements.
   * Popularity: Some developers prefer omitting semicolons in JavaScript for a cleaner syntax (as they are not mandatory), while others prefer keeping them for clarity and consistency with other languages.
2. **`singleQuote` (Single Quotes):**
   * Option: `"singleQuote": true` or `"singleQuote": false`
   * Use: Switches between single and double quotes in JavaScript code.
   * Popularity: Single quotes are often preferred in JavaScript for consistency with JSON and to differentiate string literals from other languages that use double quotes, like HTML.
3. **`printWidth` (Maximum Line Length):**
   * Option: `"printWidth": 80` (or another number)
   * Use: Sets the maximum line length Prettier will wrap on.
   * Popularity: A shorter `printWidth` (like 80) helps in maintaining code readability, especially in code reviews and side-by-side diff views. It also improves readability on smaller screens.
4. **`tabWidth` (Tab Width):**
   * Option: `"tabWidth": 2` (or another number)
   * Use: Sets the number of spaces per indentation level.
   * Popularity: A `tabWidth` of 2 is common in JavaScript communities for a balance between readability and conserving horizontal space.
5. **`trailingComma` (Trailing Commas):**
   * Option: `"trailingComma": "none"`, `"es5"`, or `"all"`
   * Use: Controls where trailing commas are added.
   * Popularity: `"es5"` is a popular choice as it adds trailing commas where valid in ES5 (objects, arrays, etc.), aiding in cleaner git diffs. `"all"` can be used in codebases where modern JavaScript syntax is fully supported.
6. **`jsxBracketSameLine` (JSX Brackets):**
   * Option: `"jsxBracketSameLine": true` or `false`
   * Use: Controls the placement of the closing bracket of a JSX tag.
   * Popularity: Keeping the closing bracket on the same line as the last prop is often seen as more visually aligned with HTML style.
7. **`arrowParens` (Arrow Function Parentheses):**
   * Option: `"arrowParens": "avoid"` or `"always"`
   * Use: Controls the inclusion of parentheses around a sole arrow function parameter.
   * Popularity: `"avoid"` is used to simplify the syntax of single-parameter arrow functions, while `"always"` is preferred for consistency, especially in codebases with frequent use of TypeScript.
8. **`bracketSpacing` (Object Bracket Spacing):**
   * Option: `"bracketSpacing": true` or `false`
   * Use: Controls whether spaces are added inside object literal brackets.
   * Popularity: Having spaces (`{ foo: bar }`) is common as it aligns with the conventional JavaScript object syntax and improves readability.
9. **`useTabs` (Use Tabs for Indentation):**
   * Option: `"useTabs": true` or `false`
   * Use: Determines whether to use tabs instead of spaces for indentation.
   * Popularity: This is more of a personal or team preference. Some prefer tabs for the ability to adjust visual indentation in different editors.

</details>

<details>

<summary>Additional Options</summary>

10. **`endOfLine` (End of Line):**
    * Option: `"endOfLine": "lf"`, `"crlf"`, `"cr"`, or `"auto"`
    * Use: Ensures a consistent line ending style across various operating systems.
    * Popularity: `"lf"` (line feed) is commonly used in Unix/Linux/macOS environments, while `"crlf"` (carriage return and line feed) is often preferred in Windows environments. `"auto"` maintains existing line endings.
11. **`htmlWhitespaceSensitivity` (HTML Whitespace Sensitivity):**
    * Option: `"htmlWhitespaceSensitivity": "css"`, `"strict"`, or `"ignore"`
    * Use: Controls how whitespaces in HTML, Vue, Angular, and Handlebars are handled.
    * Popularity: `"css"` respects the `display` property in CSS, making it a balanced choice for projects where HTML is styled with CSS.
12. **`jsxSingleQuote` (Single Quotes in JSX):**
    * Option: `"jsxSingleQuote": true` or `false`
    * Use: Uses single quotes instead of double quotes in JSX.
    * Popularity: This is useful for developers who prefer single quotes for consistency with JavaScript code, although JSX resembles HTML which typically uses double quotes.
13. **`quoteProps` (Object Property Quoting):**
    * Option: `"quoteProps": "as-needed"`, `"consistent"`, or `"preserve"`
    * Use: Controls when quotes around object properties are required.
    * Popularity: `"as-needed"` only adds quotes when necessary, which is cleaner, while `"consistent"` requires all properties in an object to be quoted if at least one needs it, ensuring uniformity.
14. **`requirePragma` (Require Prettier Pragma):**
    * Option: `"requirePragma": true` or `false`
    * Use: Prettier will only format files that contain a special comment, called a pragma, at the top.
    * Popularity: Useful in large codebases where gradually introducing Prettier. It allows developers to mark files that are ready for Prettier formatting.
15. **`insertPragma` (Insert Prettier Pragma):**
    * Option: `"insertPragma": true` or `false`
    * Use: When a file is formatted with Prettier, it inserts a pragma at the top of the file.
    * Popularity: Handy for automatically marking files as formatted by Prettier, especially in combination with `requirePragma`.
16. **`proseWrap` (Prose Wrapping):**
    * Option: `"proseWrap": "always"`, `"never"`, or `"preserve"`
    * Use: Controls how Markdown and other prose are wrapped.
    * Popularity: `"always"` ensures consistent line lengths in Markdown, which can be important for readability in certain editors or diff tools.
17. **`vueIndentScriptAndStyle` (Vue Files Script and Style Tag Indentation):**
    * Option: `"vueIndentScriptAndStyle": true` or `false`
    * Use: Determines whether `<script>` and `<style>` tags in Vue files should be indented.
    * Popularity: Setting this to `true` can improve readability in Vue single-file components by visually separating the script and style sections from the template.

</details>