TypeScript / JavaScript Code Formatter

Supports:

  • TypeScript
  • JavaScript - Supports all the JS syntax that the TS compiler supports.
  • JSX/TSX

Install and Setup

In your project's directory with a dprint.json file, run:

dprint config add typescript

This will update your config file to have an entry for the plugin. Then optionally specify a "typescript" property to add configuration:

{
  // ...etc...
  "typescript": {
    // TypeScript & JavaScript config goes here
  },
  "plugins": [
    // ...etc...
    "https://plugins.dprint.dev/typescript-x.x.x.wasm"
  ]
}

Configuration

See Configuration

Playground

See Playground

Ignoring Files

Add an ignore file comment as the first comment in the file:

// dprint-ignore-file

Ignore Comments

Add an ignore comment before the code:

// dprint-ignore
const identity = [
    1, 0, 0,
    0, 1, 0,
    0, 0, 1,
];

// or even...

const identity = /* dprint-ignore */ [
    1, 0, 0,
    0, 1, 0,
    0, 0, 1,
];

Explicit Newlines

For the most part, dprint allows you to place certain nodes like binary, logical, and member expressions on different lines as you see fit. It does this because newlines can often convey meaning or grouping.

// formats this as-is
const mathResult = 1 + 2 * 6
    + moreMath * math;

expect(someFunctionCall(1, 2))
    .to.equal(5);

Also, placing a node on the next line after an open paren will indent the text within the parens.

const mathResult = (
    1 + 2);
// formats as
const mathResult = (
    1 + 2
);

The same happens with statements like if statements.

if (
    someCondition && otherCondition) {
}
// formats as
if (
    someCondition && otherCondition
) {
}

Playground

Forcing a Line Per Expression

By default, dprint will leave line breaks between expressions in member expressions (ex. myObj.prop) and binary expressions (ex. value + other). If you don't want this behaviour, you can disable it by setting the following configuration:

  • "memberExpression.linePerExpression": true
  • "binaryExpression.linePerExpression": true

Example:

myObject.accessing.someProperty;
myObject
    .accessing.some
    .other.prop;
myObject.myLooooooooooonnnnnggggggg.propAccess;
// formats as (when line width is 40)
myObject.accessing.someProperty;
myObject
    .accessing
    .some
    .other
    .prop;
myObject
    .myLooooooooooonnnnnggggggg
    .propAccess;

You may want to use both "preferSingleLine": true in combination with this option:

myObject.accessing.someProperty;
myObject
    .accessing.some
    .other.prop;
myObject.myLooooooooooonnnnnggggggg.propAccess;
// formats as (when line width is 40)
myObject.accessing.someProperty;
myObject.accessing.some.other.prop;
myObject
    .myLooooooooooonnnnnggggggg
    .propAccess;

Statement & Member Spacing

Line breaks are maintained, but not when they are consecutive or if they are at the beginning or end of a block.

Playground