ESLint 格式化程序

ESLint 附带有几个内置的格式化程序来控制 linting 结果的外观，并支持第三方格式化程序

我们可以在命令行上使用--format或-f标志指定格式化程序。

例如使用codeframe格式化程序的格式如下所示：

--format codeframe

内置的格式化程序选项有：

• checkstyle

• codeframe

• compact

• html

• jslint-xml

• json

• junit

• stylish

• table

• tap

• unix

• visualstudio

实例

我们可以在项目根目录下创建一个用于测试用的 add.js 文件，然后使用不同的格式化程序选项测试这个文件。

示例：

add.js文件内容如下所示：

function add(i) {
    if (i != NaN) {
        return i ++
    } else {
      return
    }
};

.eslintrc内容如下所示：

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

checkstyle格式

在终端执行如下命令：

eslint --f checkstyle add.js

输出：

<?xml version="1.0" encoding="utf-8"?><checkstyle version="4.3"><file name="C:\Users\Administrator\Desktop\testE\add.js"><error line="1" column="10" severity="error" message="&apos;add&apos; is defined but never used. (no-unused-vars)" source="eslint.rules.no-unused-vars" /><error line="2" column="9" severity="error" message="Use the isNaN function to compare with NaN. (use-isnan)" source="eslint.rules.use-isnan" /><error line="3" column="16" severity="error" message="Unexpected space before unary operator &apos;++&apos;. (space-unary-ops)" source="eslint.rules.space-unary-ops" /><error line="3" column="20" severity="warning" message="Missing semicolon. (semi)" source="eslint.rules.semi" /><error line="4" column="12" severity="warning" message="Unnecessary &apos;else&apos; after &apos;return&apos;. (no-else-return)"
source="eslint.rules.no-else-return" /><error line="5" column="1" severity="warning" message="Expected indentation of 8 spaces but found 6. (indent)" source="eslint.rules.indent" /><error line="5" column="7" severity="error" message="Function &apos;add&apos; expected a return value. (consistent-return)" source="eslint.rules.consistent-return" /><error line="5" column="13" severity="warning" message="Missing semicolon. (semi)" source="eslint.rules.semi" /><error line="7" column="2" severity="error" message="Unnecessary semicolon. (no-extra-semi)"
source="eslint.rules.no-extra-semi" /></file></checkstyle>

codeframe格式

在终端执行如下命令：

eslint --f codeframe add.js

输出：

error: 'add' is defined but never used (no-unused-vars) at add.js:1:10:
> 1 | function add(i) {
    |          ^
  2 |     if (i != NaN) {
  3 |         return i ++
  4 |     } else {


error: Use the isNaN function to compare with NaN (use-isnan) at add.js:2:9:
  1 | function add(i) {
> 2 |     if (i != NaN) {
    |         ^
  3 |         return i ++
  4 |     } else {
  5 |       return


error: Unexpected space before unary operator '++' (space-unary-ops) at add.js:3:16:
  1 | function add(i) {
  2 |     if (i != NaN) {
> 3 |         return i ++
    |                ^
  4 |     } else {
  5 |       return
  6 |     }


warning: Missing semicolon (semi) at add.js:3:20:
  1 | function add(i) {
  2 |     if (i != NaN) {
> 3 |         return i ++
    |                    ^
  4 |     } else {
  5 |       return
  6 |     }


warning: Unnecessary 'else' after 'return' (no-else-return) at add.js:4:12:
  2 |     if (i != NaN) {
  3 |         return i ++
> 4 |     } else {
    |            ^
  5 |       return
  6 |     }
  7 | };


warning: Expected indentation of 8 spaces but found 6 (indent) at add.js:5:1:
  3 |         return i ++
  4 |     } else {
> 5 |       return
    | ^
  6 |     }
  7 | };


error: Function 'add' expected a return value (consistent-return) at add.js:5:7:
  3 |         return i ++
  4 |     } else {
> 5 |       return
    |       ^
  6 |     }
  7 | };


warning: Missing semicolon (semi) at add.js:5:13:
  3 |         return i ++
  4 |     } else {
> 5 |       return
    |             ^
  6 |     }
  7 | };


error: Unnecessary semicolon (no-extra-semi) at add.js:7:2:
  5 |       return
  6 |     }
> 7 | };

5 errors and 4 warnings found.
2 errors and 4 warnings potentially fixable with the `--fix` option.

compact格式

在终端执行如下命令：

eslint --f compact add.js

输出：

C:\Users\Administrator\Desktop\testE\add.js: line 1, col 10, Error - 'add' is defined but never used. (no-unused-vars)
C:\Users\Administrator\Desktop\testE\add.js: line 2, col 9, Error - Use the isNaN function to compare with NaN. (use-isnan)
C:\Users\Administrator\Desktop\testE\add.js: line 3, col 16, Error - Unexpected space before unary operator '++'. (space-unary-ops)
C:\Users\Administrator\Desktop\testE\add.js: line 3, col 20, Warning - Missing semicolon. (semi)
C:\Users\Administrator\Desktop\testE\add.js: line 4, col 12, Warning - Unnecessary 'else' after 'return'. (no-else-return)
C:\Users\Administrator\Desktop\testE\add.js: line 5, col 1, Warning - Expected indentation of 8 spaces but found 6. (indent)
C:\Users\Administrator\Desktop\testE\add.js: line 5, col 7, Error - Function 'add' expected
a return value. (consistent-return)
C:\Users\Administrator\Desktop\testE\add.js: line 5, col 13, Warning - Missing semicolon. (semi)
C:\Users\Administrator\Desktop\testE\add.js: line 7, col 2, Error - Unnecessary semicolon. (no-extra-semi)

9 problems

html格式

在终端执行如下命令：

eslint --f html add.js

输出：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ESLint Report</title>
        <style>
            body {
                font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
                font-size:16px;
                font-weight:normal;
                margin:0;
                padding:0;
                color:#333
            }
            #overview {
                padding:20px 30px
            }
            td, th {
                padding:5px 10px
            }
            h1 {
                margin:0
            }
            table {
                margin:30px;
                width:calc(100% - 60px);
                max-width:1000px;
                border-radius:5px;
                border:1px solid #ddd;
                border-spacing:0px;
            }
            th {
                font-weight:400;
                font-size:medium;
                text-align:left;
                cursor:pointer
            }
            td.clr-1, td.clr-2, th span {
                font-weight:700
            }
            th span {
                float:right;
                margin-left:20px
            }
            th span:after {
                content:"";
                clear:both;
                display:block
            }
            tr:last-child td {
                border-bottom:none
            }
            tr td:first-child, tr td:last-child {
                color:#9da0a4
            }
            #overview.bg-0, tr.bg-0 th {
                color:#468847;
                background:#dff0d8;
                border-bottom:1px solid #d6e9c6
            }
            #overview.bg-1, tr.bg-1 th {
                color:#f0ad4e;
                background:#fcf8e3;
                border-bottom:1px solid #fbeed5
            }
            #overview.bg-2, tr.bg-2 th {
                color:#b94a48;
                background:#f2dede;
                border-bottom:1px solid #eed3d7
            }
            td {
                border-bottom:1px solid #ddd
            }
            td.clr-1 {
                color:#f0ad4e
            }
            td.clr-2 {
                color:#b94a48
            }
            td a {
                color:#3a33d1;
                text-decoration:none
            }
            td a:hover {
                color:#272296;
                text-decoration:underline
            }
        </style>
    </head>
    <body>
        <div id="overview" class="bg-2">
            <h1>ESLint Report</h1>
            <div>
                <span>9 problems (5 errors, 4 warnings)</span> - Generated on Tue Feb 11 2020 17:55:25 GMT+0800 (中国标准时间)
            </div>
        </div>
        <table>
            <tbody>
                <tr class="bg-2" data-group="f-0">
    <th colspan="4">
        [+] C:\Users\Administrator\Desktop\testE\add.js
        <span>9 problems (5 errors, 4 warnings)</span>
    </th>
</tr>
<tr style="display:none" class="f-0">
    <td>1:10</td>
    <td class="clr-2">Error</td>
    <td>&#39;add&#39; is defined but never used.</td>
    <td>
        <a href="https://eslint.org/docs/rules/no-unused-vars" target="_blank" rel="noopener noreferrer">no-unused-vars</a>
    </td>
</tr>

<tr style="display:none" class="f-0">
    <td>2:9</td>
    <td class="clr-2">Error</td>
    <td>Use the isNaN function to compare with NaN.</td>
    <td>
        <a href="https://eslint.org/docs/rules/use-isnan" target="_blank" rel="noopener noreferrer">use-isnan</a>
    </td>
</tr>

<tr style="display:none" class="f-0">
    <td>3:16</td>
    <td class="clr-2">Error</td>
    <td>Unexpected space before unary operator &#39;++&#39;.</td>
    <td>
        <a href="https://eslint.org/docs/rules/space-unary-ops" target="_blank" rel="noopener noreferrer">space-unary-ops</a>
    </td>
</tr>

<tr style="display:none" class="f-0">
    <td>3:20</td>
    <td class="clr-1">Warning</td>
    <td>Missing semicolon.</td>
    <td>
        <a href="https://eslint.org/docs/rules/semi" target="_blank" rel="noopener noreferrer">semi</a>
    </td>
</tr>

<tr style="display:none" class="f-0">
    <td>4:12</td>
    <td class="clr-1">Warning</td>
    <td>Unnecessary &#39;else&#39; after &#39;return&#39;.</td>
    <td>
        <a href="https://eslint.org/docs/rules/no-else-return" target="_blank" rel="noopener noreferrer">no-else-return</a>
    </td>
</tr>

<tr style="display:none" class="f-0">
    <td>5:1</td>
    <td class="clr-1">Warning</td>
    <td>Expected indentation of 8 spaces but found 6.</td>
    <td>
        <a href="https://eslint.org/docs/rules/indent" target="_blank" rel="noopener noreferrer">indent</a>
    </td>
</tr>

<tr style="display:none" class="f-0">
    <td>5:7</td>
    <td class="clr-2">Error</td>
    <td>Function &#39;add&#39; expected a return value.</td>
    <td>
        <a href="https://eslint.org/docs/rules/consistent-return" target="_blank" rel="noopener noreferrer">consistent-return</a>
    </td>
</tr>

<tr style="display:none" class="f-0">
    <td>5:13</td>
    <td class="clr-1">Warning</td>
    <td>Missing semicolon.</td>
    <td>
        <a href="https://eslint.org/docs/rules/semi" target="_blank" rel="noopener noreferrer">semi</a>
    </td>
</tr>

<tr style="display:none" class="f-0">
    <td>7:2</td>
    <td class="clr-2">Error</td>
    <td>Unnecessary semicolon.</td>
    <td>
        <a href="https://eslint.org/docs/rules/no-extra-semi" target="_blank" rel="noopener
noreferrer">no-extra-semi</a>
    </td>
</tr>

            </tbody>
        </table>
        <script type="text/javascript">
            var groups = document.querySelectorAll("tr[data-group]");
            for (i = 0; i < groups.length; i++) {
                groups[i].addEventListener("click", function() {
                    var inGroup = document.getElementsByClassName(this.getAttribute("data-group"));
                    this.innerHTML = (this.innerHTML.indexOf("+") > -1) ? this.innerHTML.replace("+", "-") : this.innerHTML.replace("-", "+");
                    for (var j = 0; j < inGroup.length; j++) {
                        inGroup[j].style.display = (inGroup[j].style.display !== "none") ? "none" : "table-row";
                    }
                });
            }
        </script>
    </body>
</html>

还有其他的格式化程序，这里就不一一演示了，大家可以自己动手尝试一下。

链接：https://www.9xkd.com/