TechieHints SOFTWARE

Installation

1. Install the Prettier Extension:
   • Open Visual Studio Code’s Extensions Marketplace (Ctrl+Shift+X or Cmd+Shift+X)
   • Search for “Prettier – Code formatter”

Configuration

You have several ways to configure Prettier:

• 1. Project-Level Configuration File (.prettierrc)
  • Create a .prettierrc file at the root of your project.Specify your desired formatting rules within this file. Options include:
    • printWidth: Max line length (e.g., 80)singleQuote: Use single quotes or double quotes (e.g., true)semi: Include semicolons at the end of statements (e.g., true)tabWidth: Number of spaces per tab (e.g., 2)
  Example .prettierrc:
  {
"printWidth": 100,
"singleQuote": true,
"semi": false,
"tabWidth": 2
}
• 2. Visual Studio Code Settings
  • Go to File -> Preferences -> Settings (or Ctrl+, / Cmd+,).
  • Search for “Prettier”.
  • Adjust settings like:
    • prettier.printWidth
    • prettier.singleQuote
    • prettier.semi
    • prettier.tabWidth
• 3. EditorConfig (Optional)
  • Create a .editorconfig file at the root of your project.
  • Prettier supports a limited set of EditorConfig properties. Consult Prettier documentation for details.

Formatting

• Format on Save:
  • In your VS Code settings, search for “format on save”.
  • Enable the “Editor: Format On Save” option.
  • Optionally, set the default formatter to “Prettier – Code formatter.”
• Manual Formatting:
  • Right-click on a file or selection and choose “Format Document” or “Format Selection”.
  • Use the shortcut Ctrl+Shift+P (Cmd+Shift+P on Mac) and select “Format Document”.

Important Notes:

• Project-level Prettier configuration files (.prettierrc) take precedence over VS Code settings.
• For detailed information about all available Prettier options, refer to their official documentation: https://prettier.io/docs/en/options.html

Let me know if you’d like specific examples of how to customize any of the formatting settings. I’m here to help!