Prettier (.prettierrc)

Notes & Setup

• Note: requires Prettier (VSCode extension)

• Additional Setup:

  • "on save":

    • Cmd+Shift+P > Preferences: Open [Workspace/User/...] Settings (JSON)

{
  "editor.formatOnSave": true
}

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

• Finding within VSCode settings:

  • (top menu bar) > Code (File on Windows ?) > Settings > Settings

  • Type format on save

  • Ensure "Format on save" is checked

Aaron's Personal Preference

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

Popular Options

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.

Additional Options

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.