Got it, let’s work through getting your Flutter code formatted exactly how you want with Prettier in VS Code. I’ve dealt with this exact frustration before, so here’s a step-by-step guide that should resolve it:

1. Confirm Plugin Setup & Dependencies #

First, make sure you have the right tools in place:

• Double-check that the Prettier - Code formatter plugin (esbenp.prettier-vscode) is enabled in your VS Code extensions tab.
• For Dart/Flutter support, you’ll need the prettier-plugin-dart package. Install it either:
  • Globally: Run npm install -g prettier prettier-plugin-dart in your terminal.
  • Project-specific: Navigate to your Flutter project root, run npm init -y (if you don’t have a package.json already), then npm install prettier prettier-plugin-dart --save-dev.

2. Set Prettier as the Default Formatter for Dart Files #

VS Code might default to Dart’s built-in formatter instead of Prettier. Fix this:

• Open VS Code settings (press Ctrl+, on Windows/Linux, Cmd+, on Mac).
• Search for Editor: Default Formatter, then select esbenp.prettier-vscode from the dropdown.
• Next, search for [dart] Default Formatter and also set it to esbenp.prettier-vscode—this ensures Dart files specifically use Prettier.
• Enable Editor: Format On Save so formatting happens automatically when you save a file.

For more precise control, edit your settings.json directly (press Ctrl+Shift+P → select "Preferences: Open Settings (JSON)") and add these lines:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[dart]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "dart.formatOnSave": false // Disable Dart's built-in formatter to avoid conflicts
}

3. Create a Prettier Config File for Your Style Rules #

To enforce your desired formatting style, create a Prettier config file in your project root. Name it either .prettierrc, .prettierrc.json, or .prettierrc.yaml. Here’s an example JSON config with common Flutter-friendly rules—adjust these to match your preferred style:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always"
}

4. Troubleshoot & Verify #

• Restart VS Code: Sometimes changes don’t take effect until you restart the editor.
• Manual Format Test: Open a Flutter Dart file, make some unformatted changes, then press Ctrl+Shift+I (Windows/Linux) or Cmd+Shift+I (Mac) to trigger manual formatting. Check if your style rules are applied.
• Check Prettier Output: If it’s still not working, open the VS Code Output panel (Ctrl+Shift+U), select "Prettier" from the dropdown menu at the top. Look for error messages—this will tell you if there’s a missing dependency or config issue.

If you still hit snags, share your Prettier config and any error messages from the output panel, and I’ll help you dig deeper!

内容的提问来源于stack exchange，提问作者Đàm Hồng Đức