⌘ K
prettier · vue · html · ts · css · live

Format Vue SFC with Prettier

Prettier's vue parser combines its HTML, TypeScript, and PostCSS plugins so all three blocks in a single-file component format in one pass. Runs locally.

Vue SFC Formatter
Input
162 B
3 lines
Output
0 B
1 lines
Status
loading
parser…
Ratio
0.00×
out/in
input · vue
output · formatted vue
Loading parser…
Quick Start

How to format Vue SFC

Vue single-file components stitch HTML, TS, and CSS into one file. Prettier's vue parser delegates each block to the right sub-parser and rejoins them.

  1. 01

    Paste a .vue file

    Composition API or Options API — anything Prettier vue can parse.

    Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.

    vuePrettierASTstandalonelazy
    input · sourceraw · AST
    <template>...
    loaded · parsedAST · ready
  2. 02

    Tune options

    Tab, width, semi, single-quote — the standard Prettier knobs.

    Indent width, tab style, and print-width re-format through a memoised pass — switching 2 → 4 spaces never re-parses, only re-prints.

    optsindentprint-widthmemoisedlive
    opts · optionsprettier · live
    tab=2 width=80
    options applied · livelive
  3. 03

    All three blocks reflow

    Template uses HTML rules, script uses TS, style uses postcss — each per Prettier defaults.

    The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.

    liveidempotentdeterministicdiff-cleanstable
    out · formattedpretty · ready
    <template>
  <div/>
</template>
    formatted · liveidempotent
  4. 04

    Copy or save

    Drop the .vue file into your repo. Source never leaves the tab.

    Download writes a Blob with the language-appropriate extension; copy uses navigator.clipboard.writeText so the output preserves all whitespace exactly.

    exportclipboardbloblanguage MIMEclient-side
    ok · copiedready · done
    ✓ Copied
    shipped · ready to shipsuccess
Pro tips

Formatting tips that keep diffs sane

Pick one config and pin it

Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.

Format on save

Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.

Idempotency matters

Running the formatter twice should produce identical output. Test this on a representative file.

Match the language community

Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.

Print-width drives wrapping

80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.

Don&rsquo;t mix formatters and linters

Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.

Related toolsSvelte FormatterAstro FormatterTSX FormatterHTML FormatterCSS FormatterTypeScript Formatter
Use Cases

When to format Vue

SFCs, code review, migration.

SFC cleanup

Tidy a component before opening a PR. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.

idempotent

Migration from 2 to 3

Standardise indentation before deep refactoring. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.

CI-ready

Code review

Cancel whitespace-only diff noise with canonical form. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.

diff-clean

Docs snippets

Format SFC examples for a component library docs site. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.

PR-friendly

Quick fix

Reformat a Vue file pasted from a tutorial. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.

review-ready

Cross-team

Match the project's printWidth before submitting. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.

deterministic
FAQ

Frequently asked questions

Yes — Prettier's vue parser handles Composition API and Options API equally.
Yes — <style scoped> uses Prettier's postcss plugin under the hood.
v-if, v-for, @click etc. are attributes — formatted but preserved verbatim.
Template/style blocks with lang="pug" or lang="stylus" aren't fully supported by Prettier's vue plugin; output may be unchanged.
No — Prettier runs locally in your browser tab.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!