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 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:

eslint.config.js

import { vinicuncaESLint } from '@vinicunca/eslint-config';

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

Or pick languages:

eslint.config.js

export default vinicuncaESLint({
  formatters: {
    css: true,
    html: true,
    markdown: 'dprint',
    xml: true,
    graphql: true,
  },
});

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 snippet already lists them.

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

Frameworks

Enable Vue, React, Next.js, Svelte, Solid, Astro or UnoCSS in vinicuncaESLint.

TypeScript

TypeScript parsing, strict rules, type-aware linting and erasable-syntax-only mode.