Prettier 12 🎨 Supported Languages — JS, TS, CSS, HTML, Markdown, YAML & more - KandZ

⏱️ Estimated read: 9 min | |

Prettier’s language support is broader than its name suggests. The project started as a JavaScript formatter, but the current release ships with built-in parsers for a set of languages that covers the modern web stack: JavaScript and TypeScript (including JSX and Flow), CSS and its preprocessors, HTML and its template dialects, JSON, GraphQL, Markdown, YAML, and Handlebars . The support is implemented through a modular parser and printer architecture: each language family has its own parser module and printer module, and the core engine applies the same Doc intermediate representation to all of them .

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

This chapter covers the languages that ship with Prettier, the extensions that map to each parser, the embedded-language detection that lets a Markdown code block be formatted as JavaScript, and the plugin boundary that separates the built-in support from the community-maintained languages.

Key point: Prettier’s built-in support covers the languages in its own parser modules. A language that is not in that list—Java, PHP, Ruby, Rust, or a domain-specific format—requires a plugin. The plugin is installed separately and added to the Prettier configuration.

Why the language list is curated

The parser maintenance problem. Every language that Prettier supports is a parser that must track the language’s syntax evolution. The TypeScript parser must support the latest TypeScript release. The HTML parser must handle the template dialects that the web ecosystem uses. The Markdown parser must handle CommonMark and the extensions that MDX adds. The built-in list is the set of languages that the Prettier team has committed to maintaining .

The printer problem. A parser is not enough. The printer must produce a formatted output that is valid in the target language. The Doc intermediate representation is the abstraction that makes this possible: the parser converts the source into an AST, the language-specific printer converts the AST into Doc commands, and the core engine renders the Doc into the final string . A language that does not have a printer cannot be supported by the core engine.

The plugin problem. A community member can write a parser and a printer for a language that Prettier does not support, and package them as a Prettier plugin. The plugin is installed with npm and added to the plugins array in the configuration. The Prettier website lists Java, PHP, Ruby, and Rust among the languages that are supported through plugins . The plugin is not part of the core; it is a separate package with its own maintenance schedule.

a. The JavaScript family

The estree AST format covers JavaScript, TypeScript, JSX, Flow, and JSON. The parser module is shared, and the printer module handles the language-specific formatting rules .

Language	Extensions	Parser
JavaScript	`.js`, `.mjs`, `.cjs`	`babel` or `espree`
JSX	`.jsx`	`babel`
TypeScript	`.ts`, `.mts`, `.cts`	`typescript`
TSX	`.tsx`	`typescript`
Flow	`.js` (with Flow syntax)	`flow`
JSON	`.json`, `.jsonc`, `.json5`	`json` or `json5`

The parser can be overridden with the --parser flag or the overrides configuration. A .js file that uses Flow syntax is formatted with the flow parser, and a .json file that contains comments is formatted with the json5 parser.

b. The style languages

The postcss AST format covers CSS, SCSS, and Less. The parser module handles the syntax, and the printer module handles the formatting rules for each dialect .

Language	Extensions
CSS	`.css`, `.pcss`, `.postcss`
SCSS	`.scss`
Less	`.less`

The CSS parser handles the standard CSS syntax and the preprocessor dialects. The SCSS parser handles the Sass-specific syntax, including variables, nesting, and mixins. The Less parser handles the Less-specific syntax.

c. The markup and data languages

The html AST format covers HTML, Vue, Angular, and Lightning Web Component templates. The mdast format covers Markdown and MDX. The graphql format covers GraphQL schemas and queries. The yaml format covers YAML. The glimmer format covers Handlebars and Glimmer templates .

Language	Extensions	AST format
HTML	`.html`	`html`
Vue	`.vue`	`html`
Angular	`.component.html` (with override)	`html`
Markdown	`.md`, `.markdown`	`mdast`
MDX	`.mdx`	`mdast`
GraphQL	`.graphql`, `.gql`	`graphql`
YAML	`.yaml`, `.yml`	`yaml`
Handlebars	`.hbs`	`glimmer`

The embedded-language detection is the feature that makes Markdown formatting practical. A fenced code block in a Markdown file is formatted with the parser for the language named in the info string. A code block tagged js is formatted with the Babel parser; a code block tagged css is formatted with the PostCSS parser; and a code block with no tag is left alone . The same detection applies to the <script> and <style> blocks in an HTML file, and to the template, script, and style blocks in a Vue SFC.

Complete Example Session

# ============================================
# PART 1: JAVASCRIPT
# ============================================
prettier --parser babel app.js

# ============================================
# PART 2: TYPESCRIPT
# ============================================
prettier --parser typescript app.ts

# ============================================
# PART 3: CSS AND SCSS
# ============================================
prettier --parser css styles.css
prettier --parser scss styles.scss

# ============================================
# PART 4: HTML
# ============================================
prettier --parser html index.html

# ============================================
# PART 5: MARKDOWN
# ============================================
prettier --parser markdown README.md

# ============================================
# PART 6: YAML
# ============================================
prettier --parser yaml config.yml

# ============================================
# PART 7: GRAPHQL
# ============================================
prettier --parser graphql schema.graphql

# ============================================
# PART 8: THE EMBEDDED LANGUAGE
# ============================================
# A Markdown file with a fenced js block:
# ```js
# const x = 1
# ```
# The block is formatted with the babel parser.

# ============================================
# PART 9: THE PLUGIN LANGUAGE
# ============================================
# npm install --save-dev prettier-plugin-java
# prettier --plugin=prettier-plugin-java Main.java

# ============================================
# PART 10: THE DECISION
# ============================================
# Built-in language? → no plugin needed
# Community language? → install the plugin

The ten parts covered JavaScript, TypeScript, CSS and SCSS, HTML, Markdown, YAML, GraphQL, the embedded language, the plugin language, and the decision.

Quick Reference

Built-in languages

Language	Extensions	AST format
JavaScript	`.js`, `.mjs`, `.cjs`	`estree`
JSX	`.jsx`	`estree`
TypeScript	`.ts`, `.mts`, `.cts`	`estree`
TSX	`.tsx`	`estree`
Flow	`.js` (Flow syntax)	`estree`
JSON	`.json`, `.jsonc`, `.json5`	`estree`
CSS	`.css`, `.pcss`, `.postcss`	`postcss`
SCSS	`.scss`	`postcss`
Less	`.less`	`postcss`
HTML	`.html`	`html`
Vue	`.vue`	`html`
Markdown	`.md`, `.markdown`	`mdast`
MDX	`.mdx`	`mdast`
GraphQL	`.graphql`, `.gql`	`graphql`
YAML	`.yaml`, `.yml`	`yaml`
Handlebars	`.hbs`	`glimmer`

Plugin languages

Language	Plugin
Java	`prettier-plugin-java`
PHP	`@prettier/plugin-php`
Ruby	`@prettier/plugin-ruby`
Rust	`prettier-plugin-rust`

Embedded language detection

Host	Embedded	Detection
Markdown	Any language	Code fence info string
HTML	JavaScript	`<script>` tag
HTML	CSS	`<style>` tag
Vue	JS, CSS, HTML	Block tags

Best Practices

✅ Do This:

# Use the built-in parser for the language
prettier --parser typescript app.ts                          # ✅

# Install a plugin for a community language
npm install --save-dev prettier-plugin-java                  # ✅

// Add the plugin to the configuration
{ "plugins": ["prettier-plugin-java"] }                      // ✅

<!-- Use the code fence info string for embedded formatting -->
```js
const x = 1
```                                                          // ✅

❌ Don’t Do This:

# Assume a community language is built in
prettier Main.java                                            # ❌ (no parser)

# Use the wrong parser for a preprocessor file
prettier --parser css styles.scss                             # ❌ (use scss)

<!-- Leave the code fence info string empty and expect formatting -->

const x = 1

Common Pitfalls

Pitfall	Why It Happens	Fix
`No parser could be inferred`	The extension is not built in	Install a plugin or use `--parser`
SCSS file formatted with the CSS parser	Wrong parser specified	Use `--parser scss`
Markdown code block is not formatted	No info string on the fence	Add the language tag
Vue SFC is not formatted	Wrong parser or no Vue support	Use `--parser vue`
Angular template is formatted as HTML	Default HTML parser	Use an `overrides` entry with `parser: "angular"`

Real-World Examples

1. JavaScript

prettier --parser babel app.js

2. TypeScript

prettier --parser typescript app.ts

3. SCSS

prettier --parser scss styles.scss

4. HTML

prettier --parser html index.html

5. Markdown

prettier --parser markdown README.md

6. YAML

prettier --parser yaml config.yml

7. GraphQL

prettier --parser graphql schema.graphql

8. The embedded block

```css
.button { color: red; }


#### 9. The plugin

```bash
prettier --plugin=prettier-plugin-java Main.java

10. The decision

Built-in? → no plugin; Community? → install the plugin

Visual

The language families

┌─────────────────────────────────────────────────────────────┐
│  estree                                                      │
│    ├── JavaScript, JSX                                       │
│    ├── TypeScript, TSX                                       │
│    ├── Flow                                                  │
│    └── JSON                                                  │
│                                                              │
│  postcss                                                     │
│    ├── CSS                                                   │
│    ├── SCSS                                                  │
│    └── Less                                                  │
│                                                              │
│  html                                                        │
│    ├── HTML                                                  │
│    ├── Vue                                                   │
│    └── Angular                                               │
│                                                              │
│  mdast        → Markdown, MDX                                │
│  graphql      → GraphQL                                      │
│  yaml         → YAML                                         │
│  glimmer      → Handlebars                                   │
└─────────────────────────────────────────────────────────────┘

The embedded detection

┌─────────────────────────────────────────────────────────────┐
│  Markdown file                                               │
│    ```js                                                     │
│    const x = 1                                               │
│    ```                                                       │
│       │                                                      │
│       ▼                                                      │
│  Prettier detects the "js" info string                       │
│       │                                                      │
│       ▼                                                      │
│  Formats the block with the babel parser                     │
└─────────────────────────────────────────────────────────────┘

The plugin boundary

┌─────────────────────────────────────────────────────────────┐
│  Built-in                    Plugin                          │
│                                                              │
│  JS, TS, CSS, HTML,          Java, PHP, Ruby, Rust,          │
│  Markdown, YAML,             and other community             │
│  GraphQL, Handlebars         languages                       │
└─────────────────────────────────────────────────────────────┘

The extension to parser mapping

┌─────────────────────────────────────────────────────────────┐
│  .js    → babel          .ts    → typescript                 │
│  .css   → css            .scss  → scss                       │
│  .html  → html           .md    → markdown                   │
│  .yaml  → yaml           .graphql → graphql                  │
└─────────────────────────────────────────────────────────────┘

Summary

Item	Value
JavaScript family	JS, JSX, TS, TSX, Flow, JSON
Style languages	CSS, SCSS, Less
Markup languages	HTML, Vue, Angular, Handlebars
Data languages	JSON, GraphQL, YAML
Documentation languages	Markdown, MDX
Embedded detection	Code fences, `<script>`, `<style>`
Plugin languages	Java, PHP, Ruby, Rust, others
Plugin installation	`npm install` + `plugins` config

Key takeaways:

Prettier’s built-in support covers the modern web stack. JavaScript, TypeScript, JSX, Flow, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, MDX, YAML, and Handlebars are all supported by the core package . The support is implemented through language-specific parser and printer modules that share the same Doc intermediate representation.
The estree AST format covers the JavaScript family. JavaScript, JSX, TypeScript, TSX, Flow, and JSON share the same parser and printer architecture. The parser is selected by the extension or by the --parser flag, and the printer applies the language-specific formatting rules.
The postcss AST format covers the style languages. CSS, SCSS, and Less are supported with their own syntax. The parser handles the preprocessor dialects, and the printer applies the formatting rules for each dialect.
The embedded-language detection is what makes Markdown and HTML formatting practical. A fenced code block in Markdown is formatted with the parser for the language named in the info string. A <script> block in HTML is formatted with the JavaScript parser. A Vue SFC’s template, script, and style blocks are each formatted with the appropriate parser .
A language that is not built in requires a plugin. The Prettier website lists Java, PHP, Ruby, and Rust as languages that are supported through plugins . The plugin is installed with npm and added to the plugins array in the configuration. The core package does not include the parser or the printer for the language.
The plugin boundary is the maintenance boundary. The built-in languages are maintained by the Prettier team, and the plugin languages are maintained by the community. A project that depends on a plugin language is depending on the plugin’s release schedule and the plugin author’s responsiveness to the language’s syntax changes.

Remember: Prettier’s supported languages are the languages that have a parser and a printer in the core package, plus the languages that are added through plugins. The built-in list covers the modern web stack, and the plugin list covers the rest. The embedded-language detection is the feature that makes a Markdown file with a JavaScript example format the example correctly, and the code fence info string is the mechanism that tells Prettier which parser to use. When a file is not formatted, check the extension, the --parser flag, and the plugin installation, in that order.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!