---
title: "Formatters"
description: "Format CSS, HTML, XML, SVG, Markdown, GraphQL and Astro with Prettier or dprint through ESLint."
canonical_url: "https://vinicunca.dev/eslint/configuration/formatters"
---
# Formatters

> Format CSS, HTML, XML, SVG, Markdown, GraphQL and Astro with Prettier or dprint through ESLint.

JavaScript, TypeScript, Vue, JSON, YAML, TOML and Markdown **code blocks** are formatted by [ESLint Stylistic](https://eslint.style/) and language plugins. Use `formatters` for file types those plugins don't cover.

`eslint-plugin-format` is already a dependency of `@vinicunca/eslint-config`. Extra Prettier plugins are optional peers.

## Enable formatters

Pass `true` to turn on CSS, HTML, GraphQL and Markdown (Prettier). XML, SVG, Astro and Slidev turn on only when their plugins are already installed:

```js [eslint.config.js]
import { vinicuncaESLint } from '@vinicunca/eslint-config';

export default vinicuncaESLint({
  formatters: true,
});
```

Or pick languages:

```js [eslint.config.js]
export default vinicuncaESLint({
  formatters: {
    css: true,
    html: true,
    markdown: 'dprint',
    xml: true,
    graphql: true,
  },
});
```

> [!WARNING]
> 
> Do **not** run Prettier on JavaScript or TypeScript alongside this config. Stylistic rules already format those files, and the two will fight. Keep Prettier only as the engine behind `format/*` for CSS, HTML, XML, Markdown, GraphQL and Astro.

## Options

**css** (`boolean | 'prettier'`): Formats *.css, *.pcss, *.postcss, *.scss and *.less. With Vue sfcBlocks on (the default), <style> blocks are formatted too.

**html** (`boolean | 'prettier'`): Formats *.html and *.htm.

**xml** (`boolean | 'prettier'`): Formats *.xml. Requires @prettier/plugin-xml.

**svg** (`boolean | 'prettier'`): Formats *.svg. Requires @prettier/plugin-xml.

**markdown** (`boolean | 'prettier' | 'dprint'`): Formats *.md. true means Prettier. Use this for Markdown prose; the Markdown integration still lints fenced code.

**graphql** (`boolean | 'prettier'`): Formats *.graphql and *.gql.

**astro** (`boolean | 'prettier'`): Formats *.astro with Prettier. Requires prettier-plugin-astro. Also turns off conflicting style/* rules on those files.

**slidev** (`boolean | { files?: string[] }`): Formats Slidev decks (**/slides.md by default) with prettier-plugin-slidev. Only works when markdown is Prettier (true or 'prettier').

**prettierOptions** (`PrettierOptions`): Merged over the defaults derived from your stylistic options.

**dprintOptions** (`object`): Extra dprint options for Markdown. Currently typed as boolean, so TypeScript users need a cast.

## Prettier defaults

When you don't pass `prettierOptions`, formatters inherit:

| Option | Source |
| --- | --- |
| `semi` | `stylistic.semi` (`true`) |
| `singleQuote` | `stylistic.quotes === 'single'` |
| `tabWidth` / `useTabs` | `stylistic.indent` (`2`) |
| `trailingComma` | `'all'` |
| `printWidth` | `120` |
| `endOfLine` | `'auto'` |

XML/SVG also set `xmlQuoteAttributes: 'double'`, `xmlSelfClosingSpace: true`, `xmlWhitespaceSensitivity: 'ignore'`.

## Editor

Add the extra languages to `eslint.validate` in `.vscode/settings.json` (CSS, HTML, XML, GraphQL, Astro, Markdown) so format-on-save works. The [getting started](https://vinicunca.dev/eslint/getting-started#vs-code) snippet already lists them.

Keep `"prettier.enable": false` so the Prettier extension doesn't format the same files twice.


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.