Auto-Format Your Code in VS Code with Prettier on Save

Are you tired of manually formatting your code every time you save a file in Visual Studio Code? Here's how you can set up automatic formatting with Prettier:

Note: Make sure you've installed "Prettier - Code formatter" extension in VS Code.

Step 1: Open Settings

• Press Ctrl + , (Windows/Linux) or Cmd + , (Mac) to open the settings, or click on the gear icon at the bottom left and select "Settings."

Step 2: Enable Format On Save

• Via UI:

  1. Search for "Format On Save" in the settings search bar.
  2. Enable the "Editor: Format On Save" option.

• Via JSON:

  1. Open settings.json by typing "Open Settings (JSON)" in the command palette (Ctrl+Shift+P or Cmd+Shift+P).
  2. Ensure or add the following line:

     "editor.formatOnSave": true,
     

Step 3: Set Prettier as Default Formatter

If you're using Prettier, make sure it's set as the default formatter for your files:

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},