formatter-examples.md.ejs

---
title: Formatters
eleventyNavigation:
    key: formatters
    parent: user guide
    title: Formatters
    order: 6
edit_link: https://github.com/eslint/eslint/edit/main/templates/formatter-examples.md.ejs
---

ESLint comes with several built-in formatters to control the appearance of the linting results, and supports third-party formatters as well.

You can specify a formatter using the `--format` or `-f` flag in the CLI. For example, `--format json` uses the `json` formatter.

The built-in formatter options are:

<% Object.keys(formatterResults).forEach(function(formatterName) { -%>
* [<%= formatterName %>](#<%= formatterName %>)
<% }) -%>

## Example Source

Examples of each formatter were created from linting `fullOfProblems.js` using the `.eslintrc` configuration shown below.

`fullOfProblems.js`:

```js
function addOne(i) {
    if (i != NaN) {
        return i ++
    } else {
      return
    }
};
```

`.eslintrc.json`:

```json
{
    "extends": "eslint:recommended",
    "rules": {
        "consistent-return": 2,
        "indent"           : [1, 4],
        "no-else-return"   : 1,
        "semi"             : [1, "always"],
        "space-unary-ops"  : 2
    }
}
```

Tests the formatters with the CLI:

```shell
npx eslint --formatter <Add formatter here> fullOfProblems.js
```

## Built-In Formatter Options

<% Object.keys(formatterResults).forEach(function(formatterName) { -%>

### <%= formatterName %>

<%= formatterResults[formatterName].description %>

Example output:

<% if (formatterName !== "html") { -%>
```text
<%= formatterResults[formatterName].result %>
```
<% } else {-%>
<iframe src="html-formatter-example.html" width="100%" height="460px"></iframe>
<% } -%>

<% }) -%>