ESLint 样式

外观

@stylistic/js/

语句间填充行 ​

此规则要求或禁止在给定的两种语句之间使用空行。适当的空行有助于开发人员理解代码。

例如，以下配置要求在变量声明和return语句之间使用空行。

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "var", next: "return" }
]*/

function foo() {
    var a = 1;

    return a;
}

规则详细信息 ​

如果未提供任何配置，则此规则不会执行任何操作。

配置是一个具有 3 个属性的对象；blankLine、prev 和 next。例如，{ blankLine: "always", prev: "var", next: "return" } 表示“在变量声明和return语句之间需要一个或多个空行”。您可以提供任意数量的配置。如果语句对匹配多个配置，则将使用最后匹配的配置。

json
{
    "padding-line-between-statements": [
        "error",
        { "blankLine": LINEBREAK_TYPE, "prev": STATEMENT_TYPE, "next": STATEMENT_TYPE },
        { "blankLine": LINEBREAK_TYPE, "prev": STATEMENT_TYPE, "next": STATEMENT_TYPE },
        { "blankLine": LINEBREAK_TYPE, "prev": STATEMENT_TYPE, "next": STATEMENT_TYPE },
        { "blankLine": LINEBREAK_TYPE, "prev": STATEMENT_TYPE, "next": STATEMENT_TYPE },
        ...
    ]
}

  • LINEBREAK_TYPE 是以下之一。

    • "any" 只是忽略语句对。
    • "never" 禁止空行。
    • "always" 需要一个或多个空行。请注意，它不会将存在注释的行计算为空行。

  • STATEMENT_TYPE 是以下之一，或以下的数组。

    • "*" 是通配符。这匹配任何语句。
    • "block" 是独立的块。
    • "block-like" 是块状语句。这匹配最后令牌是块的闭合大括号的语句；例如 { }、if (a) { } 和 while (a) { }。也匹配立即调用的函数表达式语句。
    • "break" 是 break 语句。
    • "case" 是 switch 语句中的 case 子句。
    • "cjs-export" 是 CommonJS 的 export 语句；例如 module.exports = 0、module.exports.foo = 1 和 exports.foo = 2。这是赋值的特殊情况。
    • "cjs-import" 是 CommonJS 的 import 语句；例如 const foo = require("foo")。这是一种特殊的变量声明情况。
    • "class" 是 class 声明。
    • "const" 是 const 变量声明，包括单行和多行。
    • "continue" 是 continue 语句。
    • "debugger" 是 debugger 语句。
    • "default" 是 switch 语句中的 default 子句。
    • "directive" 是指令序言。这匹配指令；例如 "use strict"。
    • "do" 是 do-while 语句。这匹配所有以 do 关键字开头的语句。
    • "empty" 是空语句。
    • "export" 是 export 声明。
    • "expression" 是表达式语句。
    • "for" 是 for 循环家族。这匹配所有以 for 关键字开头的语句。
    • "function" 是函数声明。
    • "if" 是 if 语句。
    • "iife" 是立即调用的函数表达式语句。这匹配对函数表达式的调用，可以选择性地在前面加上一元运算符。
    • "import" 是 import 声明。
    • "let" 是 let 变量声明，包括单行和多行。
    • "multiline-block-like" 是块状语句。这与 block-like 类型相同，但仅当块为多行时。
    • "multiline-const" 是多行 const 变量声明。
    • "multiline-expression" 是表达式语句。这与 expression 类型相同，但仅当语句为多行时。
    • "multiline-let" 是多行 let 变量声明。
    • "multiline-var" 是多行 var 变量声明。
    • "return" 是 return 语句。
    • "singleline-const" 是单行 const 变量声明。
    • "singleline-let" 是单行 let 变量声明。
    • "singleline-var" 是单行 var 变量声明。
    • "switch" 是 switch 语句。
    • "throw" 是 throw 语句。
    • "try" 是 try 语句。
    • "var" 是 var 变量声明，包括单行和多行。
    • "while" 是 while 循环语句。
    • "with" 是 with 语句。

示例 ​

此配置要求所有return语句之前有空行，类似于newline-before-return规则。

[{ blankLine: "always", prev: "*", next: "return" }]配置的错误代码示例

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "*", next: "return" }
]*/

function foo() {
    bar();
        
return;

}
错误

[{ blankLine: "always", prev: "*", next: "return" }]配置的正确代码示例

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "*", next: "return" }
]*/

function foo1() {
    bar();

    return;
}

function foo2() {
    return;
}
正确

此配置要求在每个变量声明序列之后有空行，类似于newline-after-var规则。

[{ blankLine: "always", prev: ["const", "let", "var"], next: "*"}, { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"]}]配置的错误代码示例

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: ["const", "let", "var"], next: "*"},
    { blankLine: "any",    prev: ["const", "let", "var"], next: ["const", "let", "var"]}
]*/

function foo1() {
    var a = 0;
        
bar();

}

function foo2() {
    let a = 0;
        
bar();

}

function foo3() {
    const a = 0;
        
bar();

}

class C {
    static {
        let a = 0;
                
bar();

    }
}
错误

[{ blankLine: "always", prev: ["const", "let", "var"], next: "*"}, { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"]}]配置的正确代码示例

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: ["const", "let", "var"], next: "*"},
    { blankLine: "any",    prev: ["const", "let", "var"], next: ["const", "let", "var"]}
]*/

function foo1() {
    var a = 0;
    var b = 0;

    bar();
}

function foo2() {
    let a = 0;
    const b = 0;

    bar();
}

function foo3() {
    const a = 0;
    const b = 0;

    bar();
}

class C {
    static {
        let a = 0;
        let b = 0;

        bar();
    }
}
正确

此配置要求所有指令序言之后有空行，类似于lines-around-directive规则。

[{ blankLine: "always", prev: "directive", next: "*" }, { blankLine: "any", prev: "directive", next: "directive" }]配置的错误代码示例

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "directive", next: "*" },
    { blankLine: "any",    prev: "directive", next: "directive" }
]*/

"use strict";

foo();
错误

[{ blankLine: "always", prev: "directive", next: "*" }, { blankLine: "any", prev: "directive", next: "directive" }]配置的正确代码示例

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "directive", next: "*" },
    { blankLine: "any",    prev: "directive", next: "directive" }
]*/

"use strict";
"use asm";

foo();
正确

此配置要求在switch语句中的子句之间有空行。

[{ blankLine: "always", prev: ["case", "default"], next: "*" }]配置的错误代码示例

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: ["case", "default"], next: "*" }
]*/

switch (foo) {
    case 1:
        bar();
        break;
        
case 2:

        
case 3:

        baz();
        break;
        
default:

        quux();
}
错误

[{ blankLine: "always", prev: ["case", "default"], next: "*" }]配置的正确代码示例

js
/*eslint @stylistic/js/padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: ["case", "default"], next: "*" }
]*/

switch (foo) {
    case 1:
        bar();
        break;

    case 2:

    case 3:
        baz();
        break;

    default:
        quux();
}
正确

何时不使用它 ​

如果您不想收到有关换行符的警告，则可以安全地禁用此规则。

兼容性 ​