Line Wrapping Style

Line Wrapping Style

Table of Content

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

Introduction

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

• Line length, 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';

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

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

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

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.