Fix multiple formats for file Select a default formatted
- Admin
- Dec 6, 2023
- Typescript Vscode
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 formats 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 the 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 the default prettier formatter