Visual studio Code - fix multiple formatters for file type Select a default formatter to continue

This post covers simple steps to configure visual studio code multiple formatter issue

I am getting the following issue while formatting typescript document code.

There are multiple formatters for 'TypeScript' files. Select a default formatter to continue.

You can see the following screenshot issue

Importantly, i am working on typescript files, i got an issue for this, the same issue will get for any files javascript,html,css

How do fix multiple formatters for typescript files,Select a default formatter to continue

First, Let me clearly explains the issue,

My visual studio code is installed with following formatters are installed

Prettier - Code formatter Typescript and Javscript Language Features

vscode is unable to configure when there are multiple formatters, you have to configure default one.

There are multiple formatters for ‘TypeScript’ files. Select a default formatter to continue.

Click on configure, It will ask ‘select default formatter for typescript files’ with following options

Settings.json There is another way, for advanced users of visual studio code.

Locate settings.json file, On my system, settings.json located

C:\Users\username\AppData\Roaming\Code\User\settings.json

if you want to add default formatter for typescript files is Typescript and Javscript Language Features, Then add following things

{
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    }
}

If default formatter is Prettier - Code formatter, add following things in settings.json

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

How to configure default formatter prettier for file type in visual studio code

Prettier is popular formatter for visual studio code, It supports all popular languages, javascript,typescript,html and css etc.

Following are multiple steps to configure prettier

• Go to extension tab, search for Prettier -Code formatteror directly typeesbenp.prettier-vscode`
• Installs this extension
• Open settings.json file
• update settings.json file for javascript file types

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

• Right click on any javascript file and click on Format document option.

On this tutorial, you learned

• multiple formatter issue
• configure default prettier formatter