Skip to content

@stylistic/js/

padded-blocks

Some style guides require block statements to start and end with blank lines. The goal is to improve readability by visually separating the block content and the surrounding code.

js
if (a) {

    b();

}

Since it's good to have a consistent code style, you should either always write padded blocks or never do it.

Rule Details

This rule enforces consistent empty line padding within blocks.

Options

This rule has two options, the first one can be a string option or an object option. The second one is an object option, it can allow exceptions.

First option

String option:

  • "always" (default) requires empty lines at the beginning and ending of block statements, function bodies, class static blocks, classes, and switch statements.
  • "never" disallows empty lines at the beginning and ending of block statements, function bodies, class static blocks, classes, and switch statements.

Object option:

  • "blocks" require or disallow padding within block statements, function bodies, and class static blocks
  • "classes" require or disallow padding within classes
  • "switches" require or disallow padding within switch statements

Second option

  • "allowSingleLineBlocks": true allows single-line blocks

always

Examples of incorrect code for this rule with the default "always" option:

js
/*eslint @stylistic/js/padded-blocks: ["error", "always"]*/

if (a) 
{
b();
} if (a)
{
b();
}
if (a)
{
b();
} if (a)
{
b(); } if (a)
{
// comment b(); } class C
{
static
{
a();
}
}
incorrect

Examples of correct code for this rule with the default "always" option:

js
/*eslint @stylistic/js/padded-blocks: ["error", "always"]*/

if (a) {

    b();

}

if (a)
{

    b();

}

if (a) {

    // comment
    b();

}

class C {

    static {

        a();

    }

}
correct

never

Examples of incorrect code for this rule with the "never" option:

js
/*eslint @stylistic/js/padded-blocks: ["error", "never"]*/

if (a) 
{
b();
} if (a)
{
b();
} if (a)
{
b(); } if (a) { b();
} class C
{
static
{
a();
}
}
incorrect

Examples of correct code for this rule with the "never" option:

js
/*eslint @stylistic/js/padded-blocks: ["error", "never"]*/

if (a) {
    b();
}

if (a)
{
    b();
}

class C {
    static {
        a();
    }
}
correct

blocks

Examples of incorrect code for this rule with the { "blocks": "always" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "blocks": "always" }]*/

if (a) 
{
b();
} if (a)
{
b();
}
if (a)
{
b();
} if (a) { b();
} if (a)
{
b(); } if (a)
{
// comment b(); } class C { static
{
a();
} }
incorrect

Examples of correct code for this rule with the { "blocks": "always" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "blocks": "always" }]*/

if (a) {

    b();

}

if (a)
{

    b();

}

if (a) {

    // comment
    b();

}

class C {

    static {

        a();

    }

}

class D {
    static {

        a();

    }

}
correct

Examples of incorrect code for this rule with the { "blocks": "never" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "blocks": "never" }]*/

if (a) 
{
b();
} if (a)
{
b();
} if (a)
{
b(); } if (a) { b();
} class C { static
{
a();
} }
incorrect

Examples of correct code for this rule with the { "blocks": "never" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "blocks": "never" }]*/

if (a) {
    b();
}

if (a)
{
    b();
}

class C {
    static {
        a();
    }
}

class D {

    static {
        a();
    }

}
correct

classes

Examples of incorrect code for this rule with the { "classes": "always" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "classes": "always" }]*/

class  A 
{
constructor(){ }
}
incorrect

Examples of correct code for this rule with the { "classes": "always" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "classes": "always" }]*/

class  A {

    constructor(){
    }

}
correct

Examples of incorrect code for this rule with the { "classes": "never" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "classes": "never" }]*/

class  A 
{
constructor(){ }
}
incorrect

Examples of correct code for this rule with the { "classes": "never" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "classes": "never" }]*/

class  A {
    constructor(){
    }
}
correct

switches

Examples of incorrect code for this rule with the { "switches": "always" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "switches": "always" }]*/

switch (a) 
{
case 0: foo();
}
incorrect

Examples of correct code for this rule with the { "switches": "always" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "switches": "always" }]*/

switch (a) {

    case 0: foo();

}

if (a) {
    b();
}
correct

Examples of incorrect code for this rule with the { "switches": "never" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "switches": "never" }]*/

switch (a) 
{
case 0: foo();
}
incorrect

Examples of correct code for this rule with the { "switches": "never" } option:

js
/*eslint @stylistic/js/padded-blocks: ["error", { "switches": "never" }]*/

switch (a) {
    case 0: foo();
}

if (a) {

    b();

}
correct

always + allowSingleLineBlocks

Examples of incorrect code for this rule with the "always", {"allowSingleLineBlocks": true} options:

js
/*eslint @stylistic/js/padded-blocks: ["error", "always", { allowSingleLineBlocks: true }]*/

if (a) 
{
b();
} if (a) { b();
} if (a)
{
b(); }
incorrect

Examples of correct code for this rule with the "always", {"allowSingleLineBlocks": true} options:

js
/*eslint @stylistic/js/padded-blocks: ["error", "always", { allowSingleLineBlocks: true }]*/

if (a) { b(); }

if (a) {

    b();

}
correct

When Not To Use It

You can turn this rule off if you are not concerned with the consistency of padding within blocks.

Released under the MIT License.