eslint/templates/formatter-examples.md.ejs

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