ESLint Stylistic

Appearance

list-style ​

Enforce consistent spacing and line break styles inside brackets.

Rule Details ​

This rule requires or disallows a line break between object/array/named imports/exports and function parameters and other similar structures.

It checks the newline style of the first property or item and applies the same style to the rest of the properties or items. This allows you to easily wrap or unwrap your code consistently.

Options ​

This rule accepts an object option:

  • "singleLine": Options for when the node is single-line
    • "spacing": Whether spaces are required inside the enclosing brackets
    • "maxItems": Maximum number of elements allowed before auto-fixing to multi-line
  • "multiLine": Options for when the node is multi-line
    • "minItems": Minimum number of elements allowed before auto-fixing to single-line
  • "empty": How spacing and line breaks are handled for empty structures
  • "overrides": Override options based on bracket type or node type

The default configuration of this rule is:

ts
defaultOptions: [{
  empty: 'ignore',
  singleLine: {
    spacing: 'never',
    maxItems: Number.POSITIVE_INFINITY,
  },
  multiLine: {
    minItems: 0,
  },
  overrides: {
    '{}': { singleLine: { spacing: 'always' } },
  },
}],

singleLine ​

spacing ​

"always" requires spaces, "never" disallows spaces.

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

ts
/* eslint @stylistic/list-style: ["error", { "singleLine": { "spacing": "always" } }] */

let foo = {
a: 1, b: 2
};
let bar = [
1, 2
];
let {
a, b
} = foo;
let [
c, d
] = bar;
function foo(
a
) {}
const foo = function (
a
) {}
foo(
a, b
);
new Foo<
Bar
>(
a, b
);
import {
name
} from 'package.json' with {
type: 'json'
}
export {
name
} from 'package.json' with {
type: 'json'
}
export * from 'package.json' with {
type: 'json'
}
type Foo<
T
> = {
a: number; b: T
};
type Bar = [
1, 2
];
type Baz<
T
> = (
a: number, b: T
) => void
function foo<
T
>(
a: number, b: T
): void;
incorrect

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

ts
/* eslint @stylistic/list-style: ["error", { "singleLine": { "spacing": "always" } }] */

let foo = { a: 1, b: 2 };
let bar = [ 1, 2 ];
let { a, b } = foo;
let [ c, d ] = bar;
function foo( a ) {}
const foo = function ( a ) {}
foo( a, b );
new Foo< Bar >( a, b );
import { name } from 'package.json' with { type: 'json' }
export { name } from 'package.json' with { type: 'json' }
export * from 'package.json' with { type: 'json' }
type Foo< T > = { a: number; b: T };
type Bar = [ 1, 2 ];
type Baz< T > = ( a: number, b: T ) => void
function foo< T >( a: number, b: T ): void;
correct

maxItems ​

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

ts
/* eslint @stylistic/list-style: ["error", { "singleLine": { "maxItems": 1 } }] */

let foo = {
a: 1,
 
b: 2
};
let bar = [
1,
 
2
];
let {
a,
 
b
} = foo;
let [
a,
 
b
] = bar;
incorrect

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

ts
/* eslint @stylistic/list-style: ["error", { "singleLine": { "maxItems": 1 } }] */

let foo = {
  a: 1,
  b: 2
};
let bar = [
  1,
  2
];
let {
  a,
  b
} = foo;
let [
  a,
  b
] = bar;
correct

multiLine ​

minItems ​

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

ts
/* eslint @stylistic/list-style: ["error", { "multiLine": { "minItems": 3 } }] */

let foo = {

    a: 1,

    b: 2,

};
let bar = [

    1,

    2,

];
let {

    a,

    b,

} = foo;
let [

    a,

    b,

] = bar;
incorrect

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

ts
/* eslint @stylistic/list-style: ["error", { "multiLine": { "minItems": 1 } }] */

let foo = {
  a: 1,
  b: 2,
};
let bar = [
  1,
  2,
];
let {
  a,
  b
} = foo;
let [
  a,
  b
] = bar;
correct

empty ​

"ignore" (default) does not check empty structures. "always" requires a space inside an empty structure, while "never" disallows spaces. When enabled, empty multiline structures count as having zero items, so multiLine.minItems controls whether they collapse to a single line.

Examples of correct code with the default "ignore" option:

ts
/* eslint @stylistic/list-style: ["error", { "empty": "ignore" }] */

const array = [ ]
const object = {}
foo( )
correct

Examples of correct code with the "always" option:

ts
/* eslint @stylistic/list-style: ["error", { "empty": "always" }] */

const array = [ ]
const object = { }
foo( )
correct

Examples of incorrect code with the "never" option and multiLine.minItems set to 1:

ts
/* eslint @stylistic/list-style: ["error", { "empty": "never", "multiLine": { "minItems": 1 } }] */

const array = [
 
]
const object = {

}
foo(
 
)
incorrect

Examples of correct code with the "never" option and multiLine.minItems set to 1:

ts
/* eslint @stylistic/list-style: ["error", { "empty": "never", "multiLine": { "minItems": 1 } }] */

const array = []
const object = {}
foo()
correct

overrides ​

You can specify different options for specific bracket types:

  • {} - curly braces (objects)
  • [] - square brackets (arrays)
  • () - parentheses (function calls, parameters)
  • <> - angle brackets (TypeScript generics)

Examples of correct code for this rule with the "overrides" option specified for brackets:

js
/* eslint @stylistic/list-style: ["error", { "overrides": { "{}": { "singleLine": { "spacing": "always" } } } }] */

let foo = { a: 1 };
let bar = [1];
let { a } = foo;
let [b] = bar;
correct

You can also specify different options for various node types:

  • ArrayExpression: array expressions
  • ArrayPattern: array patterns of destructuring assignments
  • ArrowFunctionExpression: parameters of arrow function expressions
  • CallExpression: arguments of call expressions
  • ExportNamedDeclaration: named exports
  • FunctionDeclaration: parameters of function declarations
  • FunctionExpression: parameters of function expressions
  • IfStatement: condition of if statements
  • ImportDeclaration: named imports
  • ImportAttributes: import attributes
  • NewExpression: arguments of new expressions
  • ObjectExpression: object literals
  • ObjectPattern: object patterns of destructuring assignments
  • TSDeclareFunction: parameters of ambient function declarations and overload signatures
  • TSFunctionType: parameters of TypeScript function types
  • TSInterfaceBody: interface declarations
  • TSEnumBody: enum declarations
  • TSTupleType: tuple types
  • TSTypeLiteral: type literals
  • TSTypeParameterDeclaration: type parameter declarations
  • TSTypeParameterInstantiation: type parameter instantiations
  • JSONArrayExpression: array expressions in JSON files
  • JSONObjectExpression: object literals in JSON files

Example of node-specific override:

js
/* eslint @stylistic/list-style: ["error", {
  "overrides": {
    "ImportAttributes": { "singleLine": { "spacing": "never" } },
  }
}] */

import def, { a, b } from 'foo' with {type: 'raw'};

let foo = { a: 1 };
let bar = [1];
let { a } = foo;
let [b] = bar;
correct

You can also set an override to "off" to disable checking for a specific bracket type or node type:

js
/* eslint @stylistic/list-style: ["error", {
  "overrides": {
    "IfStatement": "off",
  }
}] */

if (node.callee.type !== 'Identifier'
  || (node.callee.name !== 't' && node.callee.name !== 'n')
) {
  // ...
}
correct

When Not To Use It ​

If you do not want to enforce consistent line breaks after opening and before closing brackets, or if your project has existing inconsistent formatting that you don't wish to change, you can safely disable this rule.

Changelog ​

Not released yet

v6.0.0-beta.6 on

v5.10.0 on

v5.8.0 on

v5.7.0 on

  • fixc2ac348replace text range with delimiter directly (#1062)

Released under the MIT License.

Copyright OpenJS Foundation and other contributors, www.openjsf.org.
Copyright © 2023-PRESENT ESLint Stylistic contributors.