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="'add' 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 '++'. (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 'else' after 'return'. (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 'add' 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>'add' 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 '++'.</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 'else' after 'return'.</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 'add' 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>
还有其他的格式化程序，这里就不一一演示了，大家可以自己动手尝试一下。
网友评论