eslint/templates/formatter-examples.md.ejs

   1 ---
   2 title: Formatters Reference
   3 eleventyNavigation:
   4     key: formatters
   5     parent: use eslint
   6     title: Formatters Reference
   7     order: 6
   8 edit_link: https://github.com/eslint/eslint/edit/main/templates/formatter-examples.md.ejs
   9 ---
  10
  11 ESLint comes with several built-in formatters to control the appearance of the linting results, and supports third-party formatters as well.
  12
  13 You can specify a formatter using the `--format` or `-f` flag in the CLI. For example, `--format json` uses the `json` formatter.
  14
  15 The built-in formatter options are:
  16
  17 <% Object.keys(formatterResults).forEach(function(formatterName) { -%>
  18 * [<%= formatterName %>](#<%= formatterName %>)
  19 <% }) -%>
  20
  21 ## Example Source
  22
  23 Examples of each formatter were created from linting `fullOfProblems.js` using the `.eslintrc.json` configuration shown below.
  24
  25 `fullOfProblems.js`:
  26
  27 ```js
  28 function addOne(i) {
  29     if (i != NaN) {
  30         return i ++
  31     } else {
  32       return
  33     }
  34 };
  35 ```
  36
  37 `.eslintrc.json`:
  38
  39 ```json
  40 {
  41     "extends": "eslint:recommended",
  42     "rules": {
  43         "consistent-return": 2,
  44         "indent"           : [1, 4],
  45         "no-else-return"   : 1,
  46         "semi"             : [1, "always"],
  47         "space-unary-ops"  : 2
  48     }
  49 }
  50 ```
  51
  52 Tests the formatters with the CLI:
  53
  54 ```shell
  55 npx eslint --format <Add formatter here> fullOfProblems.js
  56 ```
  57
  58 ## Built-In Formatter Options
  59 <% Object.keys(formatterResults).forEach(function(formatterName) { -%>
  60
  61 ### <%= formatterName %>
  62
  63 <%= formatterResults[formatterName].description %>
  64
  65 Example output:
  66
  67 <% if (formatterName !== "html") { -%>
  68 ```text
  69 <%- formatterResults[formatterName].result %>
  70 ```
  71 <% } else {-%>
  72 <iframe src="html-formatter-example.html" width="100%" height="460px"></iframe>
  73 <% } -%>
  74 <% }) -%>