ESLint 格式化程序

最新推荐文章于 2024-08-23 09:47:07 发布

书和咖啡

最新推荐文章于 2024-08-23 09:47:07 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/ivenqin/article/details/104746654

版权

本文介绍了ESLint的内置格式化程序，如checkstyle、codeframe、compact和html，展示了如何在命令行中指定格式并给出了不同格式的示例输出。

摘要由CSDN通过智能技术生成

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