fix multiple formats for file Select a default formatted

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

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

There are multiple formats 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 formats for typescript files, Select a default formatter to continue

First, Let me clearly explain 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 the settings.json file, On my system, settings.json located

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

if you want to add the 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 the extension tab, search for Prettier -Code formatted or directly type esbenp.prettier-vscode
• Installs this extension
• Open the settings.json file
• update the 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