[visual-studio-code] How do you format code on save in VS Code

I would like to automatically format TypeScript code using the build-in formatter when I save a file in Visual Studio Code.

I'm aware of the following options, but none of them is good enough:

  • Format manually Shift + Alt + F
  • Format on type "editor.formatOnType": true
    • It formats the line when you press enter. Unfortunatelly, it leaves it unformatted when you mouse-click another line or press up/down arrow.
  • Use existing extension
    • I tried this one, but it does not seem to work too well.
  • Use beautify "beautify.onSave": true
    • It does not work with TypeScript
  • Write custom extension
    • It's tricky if you want to handle autosaves and builds correctly.

This question is related to visual-studio-code vscode-settings code-formatting

The answer is


For eslint:

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

No need to add commands anymore. For those who are new to Visual Studio Code and searching for an easy way to format code on saving, kindly follow the below steps.

  1. Open Settings by pressing [Cmd+,] in Mac or using the below screenshot.

VS Code - Open Settings Command Image

  1. Type 'format' in the search box and enable the option 'Format On Save'.

enter image description here

You are done. Thank you.


To automatically format code on save:

  • Press Ctrl , to open user preferences
  • Enter the following code in the opened settings file

    {
        "editor.formatOnSave": true
    }
    
  • Save file

Source


For MAC user, add this line into your Default Settings

File path is: /Users/USER_NAME/Library/Application Support/Code/User/settings.json

"tslint.autoFixOnSave": true

Sample of the file would be:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}

If you would like to auto format on save just with Javascript source, add this one into Users Setting (press Cmd, or Ctrl,):

"[javascript]": { "editor.formatOnSave": true }

Examples related to visual-studio-code

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error Cannot edit in read-only editor VS Code How to setup virtual environment for Python in VS Code? Pylint "unresolved import" error in Visual Studio Code Why do I keep getting Delete 'cr' [prettier/prettier]? How to set up devices for VS Code for a Flutter emulator VSCode single to double quote automatic replace js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check How can I clear the terminal in Visual Studio Code?

Examples related to vscode-settings

VSCode single to double quote automatic replace How to add a new project to Github using VS Code How do I use Bash on Windows from the Visual Studio Code integrated terminal? Color theme for VS Code integrated terminal How to restart VScode after editing extension's config? Moving Panel in Visual Studio Code to right side How do you format code on save in VS Code Is there a quick change tabs function in Visual Studio Code? How to reset settings in Visual Studio Code? How to change environment's font size?

Examples related to code-formatting

How do you format code on save in VS Code How do you format code in Visual Studio Code (VSCode) JavaScript Chart.js - Custom data formatting to display on tooltip Is there a command for formatting HTML in the Atom editor? How to auto-indent code in the Atom editor? Code formatting shortcuts in Android Studio for Operation Systems How to auto-format code in Eclipse? How to format code in Xcode? What is the proper way to format a multi-line dict in Python? How do I format XML in Notepad++?