How to format selected code using vscode and Prettier?

To format selected code using VS Code and the Prettier plugin, follow these steps:

1. Install the Prettier Plugin:

   • Launch VS Code.
   • Navigate to the Extensions view by clicking the Extensions icon in the sidebar or using the shortcut Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).
   • Search for "Prettier - Code formatter" in the Extensions search box.
   • Once you find the Prettier extension, click the "Install" button.

2. Select the Code to Format:

   • Open the file you want to format in the editor.
   • Use your mouse or keyboard shortcuts (e.g., Shift+Arrow keys) to select the code segment you wish to format.

3. Format the Selected Code:

   • You can format the selected code by right-clicking on it and choosing "Format Selection".
   • Alternatively, use the keyboard shortcuts:
     • Windows/Linux: Ctrl+K Ctrl+F
     • macOS: Cmd+K Cmd+F
   • If these shortcuts aren't working, it might be because they're overridden by other extensions or custom settings. Open the command palette using F1 or Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS), type "Format Selection", and select the relevant command to format the selected portion.

4. Configure Prettier:

   • To customize Prettier's formatting rules, create a .prettierrc configuration file in the project root directory or add Prettier settings in settings.json.
   • For example, in a .prettierrc file, set:

     json
     {
       "semi": false,
       "singleQuote": true
     }

   • Or in VS Code's settings.json file, configure it as:

     json
     {
       "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": false
       },
       "prettier.semi": false,
       "prettier.singleQuote": true
     }

Ensure your file type is supported by Prettier and that VS Code uses Prettier as the default formatter. If issues arise, check for conflicts with other formatting plugins or verify that Prettier is correctly installed and configured.