Line Wrapping Style

Line Wrapping Style

Table of Content

• Introduction
• maxLineLength
• wrappingStyle
  • maxBindingNamesPerLine
  • maxDefaultAndBindingNamesPerLine
  • maxExportNamesPerLine
  • maxNamesPerWrappedLine
  • ignoreComments
• Prettier Compatibility

Introduction

There are a few factors might trigger line wrapping for an import/export declaration:

• Line length, ex- or including comments.
• Number of names in the declaration.
  • Imports and exports are treated differently.

When a declaration is wrapped, the number of names per line is also customizable.

There is also a preset style compatible with Prettier for ease of use.

maxLineLength

If a declaration exceeds maxLineLength (when it's non-zero), it might be wrapped.

Exceptions are if there is no feasible way to wrap the line, e.g.:

import 'a-veeeeeeeeeery-looooooooooooooong-line';

If it's 0, there is no limit for the line length.

wrappingStyle

wrappingStyle defines numbers of names triggering the line wrapping for imports and exports.

maxBindingNamesPerLine

For a declaration importing only binding names, maxBindingNamesPerLine determines how many names are allowed before wrapping.

For example, if you set:

"maxBindingNamesPerLine": 2,

then

import { A } from 'a';    // No wrap as there is 1 name
import { B, C } from 'b'; // No wrap as there are 2 names

import {
  D,
  E,
  F,
} from 'c';   // Wrapped as there are more than 2 names

If it's 0, there is no limit.

maxDefaultAndBindingNamesPerLine

For a declaration importing default and binding names, maxDefaultAndBindingNamesPerLine determines how many names are allowed before wrapping.

For example, if you set:

"maxDefaultAndBindingNamesPerLine": 2,

then

import A from 'a';        // No wrap as there is 1 name
import B, { C } from 'b'; // No wrap as there are 2 names

import D, {
  E,
  F,
} from 'c'; // Wrapped as there are more than 2 names

If it's 0, there is no limit.

maxExportNamesPerLine

For export and export from declarations, maxExportNamesPerLine determines how many names are allowed before wrapping.

For example, if you set:

"maxExportNamesPerLine": 2,

then

export { A };             // No wrap as there is 1 name
export { B, C } from 'b'; // No wrap as there are 2 names
export {
  D,
  E,
  F,
} from 'c'; // Wrapped as there are more than 2 names

maxNamesPerWrappedLine

If an import/export declaration is wrapped, maxNamesPerWrappedLine decides how many names per line.

For example, if you set:

"maxNamesPerWrappedLine": 2,

then

import {
  A, B,
  C, D,
  E,
} from 'a'; // There are 2 names at most per wrapped line

export {
  A, B,
  C, D,
  E,
};          // There are 2 names at most per wrapped line

If it's 0, there is no limit.

ignoreComments

Whether to skip trailing comments when calculating line length against maxLineLength. This is to mimic the behavior of some tools ignoring trailing comments, e.g. Prettier and ESlint max-len.

Prettier Compatibility

Prettier is a code formatter widely used in JS/TS projects, but has a much simpler (and non-customizable) line wrapping style. (See its doc and this discussion)

To be compatible with Prettier, this package introduced a preset wrapping style:

"wrappingStyle": "prettier"

It could be useful when, e.g., you are using prettier --check in your CI/CD process.