fix multiple formatters for fileSelect a default formatter

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

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 with 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 the following formatters are installed.

Prettier - code formatter Typescript and Javascript Language Features

vscode is unable to configure when there are multiple formatters, you have to configure the 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 the 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 Javascript Language Features, Then add the following things

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

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

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

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

Prettier is a 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 the 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 the Format document option.

In this tutorial, you learned

• multiple formatter issue
• configure default prettier formatter