What programming languages and file types does Prettier support? - 面试题

Programming Languages and File Types Supported by Prettier

Prettier is a code formatter that supports multiple programming languages, covering almost all major languages used in modern frontend development.

Fully Supported Languages

JavaScript Ecosystem

JavaScript (ES6+)
TypeScript
JSX (React)
TSX (TypeScript + React)
Flow
Vue Single File Components (.vue)
Angular Templates

Style Languages

CSS
SCSS/SASS
Less
Stylus

Template Languages

HTML
Vue Templates
Angular Templates
Handlebars
Mustache

Data Formats

JSON
JSON5
JSONC (JSON with comments)

Configuration Files

YAML
TOML
INI

Documentation Languages

Markdown (.md)
MDX

Other Languages

GraphQL
Markdown
XML

Partially Supported Languages

Java (via plugins)
PHP (via plugins)
Python (via plugins)
Ruby (via plugins)
Go (via plugins)
Rust (via plugins)

Language Support Principle

Prettier supports different languages through parsers:

Parser Selection: Automatically selects the appropriate parser based on file extension
AST Generation: Uses language-specific parsers to generate Abstract Syntax Trees
Formatting: Applies unified formatting rules
Code Generation: Converts formatted AST back to source code

Specifying Parsers

If Prettier cannot automatically identify the file type, you can specify the parser in configuration:

json
{
  "overrides": [
    {
      "files": "*.vue",
      "options": {
        "parser": "vue"
      }
    }
  ]
}

Multi-language Project Configuration

For projects containing multiple languages, use overrides configuration to set different formatting rules for different file types:

json
{
  "semi": true,
  "overrides": [
    {
      "files": "*.css",
      "options": {
        "singleQuote": false
      }
    },
    {
      "files": "*.json",
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

Prettier's multi-language support makes it an ideal formatter for full-stack projects, unifying code style across the entire project.