VSCode: Prettier does not work with Dart Flutter

user_12996287 0
Viewed 7796

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.

enter image description here

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!

prettier dart visual-studio-code node.js
2 Answers

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"
  }
}
user_12558730

I took a combination of the answer and comments above and used it to solve the problem I had, which was Firebase Cloud Function JavaScript/Typescript and Flutter/Dart code in the same VSCode project.

  1. Create a .vscode folder in the root of your project.
  2. Create a settings.json file inside of it.
  3. Add the following and tweak to your liking. In the main VSCode settings, you can find a cog in the left gutter next to each setting that has a "Copy setting to JSON" menu item, which you can then paste into the below and adjust to override the application-level settings.
  4. Decide whether to .gitignore your new folder or share it with your team.
  5. Restart VSCode
{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[dart]": { "editor.defaultFormatter": "Dart-Code.dart-code" },
  "editor.formatOnSave": true
}
user_176163290
Related