VSCode: Prettier does not work with Dart Flutter

Question

I am using Dart and Node.js. I tried to auto format Node.js with Prettier. However, VSCode auto formats Dart file but it does not format JavaScript with Prettier.

Under the screen, it says Prettier on JavaScript. When I touch the setting and set it to Prettier for auto format, Prettier works and it auto format JS files but Dart auto format does not work.

How can I set VSCode to auto format Dart and JS files without switching settings everytime?

VSCode Setup

{
    "workbench.colorTheme": "Visual Studio Dark",
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.rulers": [
            80
        ],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },
    "workbench.preferredHighContrastColorTheme": "Default Dark+",
    "files.autoSave": "afterDelay",
    "editor.minimap.enabled": false,
    "dart.openDevTools": "flutter",
    "explorer.confirmDragAndDrop": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

!!!! Solution

"editor.defaultFormatter": "Dart-Code.dart-code",

You need to add this line to setting.json Dart part. And then set your default formatter to Prettier!

Answer 1

Don't set Prettier as VS Code's global default formatter. Set to only be the default formatter where Javascript is concerned. Open your settings JSON and add the following:

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