Format on save in VSCode

Being a long time WebStorm user I am way behind with VSCode but had reason to install and setup on a new machine. The first thing I needed was formatting on save for a typescript project that already has eslint and prettier configured.

Plugins

First install the following plugins.

• ESLint
• Prettier

User settings

Now configure your settings. The easiest way I found to do this was to go directly to the user settings file. Search for it with cmd + shift + p and type settings json and choose Preferences: Open User Settings (JSON).

Add the following to the file. Note that if you already have settings in the file you can add these to the existing object.

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  }    
}

That is it, your files should now be formatted on save.

A note on other settings

In VSCode there are multiple levels of configuration available beyond user settings, each designed for different use cases. Understanding these helps you apply the right settings in the right context - whether you’re customizing your personal environment or aligning your team on shared standards.

• User Settings: Apply globally across all projects you open in VS Code. Ideal for personal preferences like themes, font size, or enabling format-on-save universally

• Workspace Settings: Specific to a VS Code workspace, which may include one or more folders. These settings are stored in a .code-workspace file and let you define behavior per workspace without affecting other projects

• Project Settings: Saved in .vscode/settings.json inside a project folder. These are typically committed to version control and shared with your team to ensure consistent development experience across machines