dprint / dprint-plugin-typescript

TypeScript and JavaScript code formatting plugin for dprint.

dprint

Monorepo for dprint—a pluggable and configurable code formatting platform.

Links

• Overview
• Getting Started
• Playground

Plugins

• dprint-plugin-typescript - TypeScript/JavaScript code formatter.
• dprint-plugin-json - JSON/JSONC code formatter.
• dprint-plugin-markdown - Markdown code formatter.
• dprint-plugin-toml - TOML code formatter.
• dprint-plugin-jupyter - Jupyter notebook code block formatter.
• dprint-plugin-dockerfile - Dockerfile code formatter.
• dprint-plugin-biome - Biome (JS/TS) wrapper plugin.
• dprint-plugin-prettier - Prettier wrapper plugin.
• dprint-plugin-roslyn - Roslyn (C#/VB) wrapper plugin.
• dprint-plugin-ruff - Ruff (Python) wrapper plugin.
• dprint-plugin-exec - Formats code with any CLI executable.

Notes

This repo is under active early development.

1. The interface between the CLI and plugins might change often. You may need to keep updating to the latest version of both the CLI and plugins (the CLI will let you know what to do).
   • An upgrade path will be outlined in the release notes when this occurs.
2. I do a lot of this development in my spare time. Please consider sponsoring if you are a commercial company using this.

dprint-plugin-typescript's Issues

Add tests for preferring to keep parenthesized node together when breaking

From dprint/dprint#66. I had accidentally removed it when removing elsewhere because there was no test for that.

Configuration for operator position

This is to control whether the user wants:

const test = 5 + 7 +
    4;
// or
const test = 5 + 7
    + 4;

operatorPosition: "sameLine" | "nextLine" (defaults to "nextLine")

Declare keyword erroneously added in ambient namespace

declare module "@dsherret/to-absolute-glob" {
    function toAbsoluteGlob(pattern: string, options?: toAbsoluteGlob.Options): string;
    namespace toAbsoluteGlob {
        interface Options {
            cwd?: string;
            root?: string;
        }
    }
    export = toAbsoluteGlob;
}

Formatted as:

declare module "@dsherret/to-absolute-glob" {
    function toAbsoluteGlob(pattern: string, options?: toAbsoluteGlob.Options): string;
    declare namespace toAbsoluteGlob {
        declare interface Options {
            cwd?: string;
            root?: string;
        }
    }
    export = toAbsoluteGlob;
}

Add configuration for forcing comment text to fit in line width

Right now comments are left as-is other than the space added on single line comments, but it might be good to add a configuration option that will split them up when they exceed the line width. I'm not sure if this should apply to trailing comments, but it should apply to ones on their own line.

Idea provided to me by @macterra while I was talking to him about this.

Also, would be cool to maybe have some kind of balancing in order to make the right side look somewhat justified.

Align default configuration with ones chosen in deno

As title.

Except for line width and indent width. I have warmed up to "next control flow position" being same line over the past few months as well.

Add spaceAfterTaggedTemplate

Description

It'd be nice if there is a way to customize how space is added in tagged template.

Actual sample code

function html() {}

a = html`<div>${run()}</div>`;

Formatted sample code

function html() {}

a = html `<div>${run()}</div>`; // Space is added in between `html` keyword and the template literal

Single line if statement with braces should not go to multi-line when useBraces: always and singleBodyPosition: sameLine

See here:

https://dprint.dev/playground/#code/JYMwBAFALgTgrgUwJRgN5gMYHsB2BnLAGwQDpCsBzCAViQG4wBfAWACg3RJZEk2x-MuAsTKUa9IA/config/N4IgNglgdgpg6hAJgFwBYgFwA4AMAaEaRGKZBFdDAFgIFcBnGAFQEMAjezAMxbEYMYBbCAGEA9mDFROGZACdaMAdADmYGAEVaY5DBk8+SkPJYRIUFeMGCWMkLABuMOSDqMAQnJYBjPZhC8AO4sAJ6cBGxevgAKYvQQyBBS-rAAHsgAMtAwAJJcABIsFqquIPEW6u5iiCGx8YnJGGUsgjBZsKVpyOKkchIAYpKBdQlJUCkw6e0wpWIADs4syGJyIw3jTV3TpVwrvgCytGCJ0wCCciq0raT6vPwgu3IHRyfZ0Sxerbpyt4ZuMABlOY+QEwYFeZY-TDyRQEEhXAAiMG8YA+SzGADpWoI2M4gT4Sk0bNBkKZxgQPn1Av1aFBvOsAKKpOZyPTxKQYhgwd6s0ioPR+Ilk0nQEAAXyAA

This:

if (true) { console.log(5); }

Should format as the same:

if (true) { console.log(5); }

When useBraces: "always" and singleBodyPosition: "sameLine".

JSX - Space removed where it should not be

return (<>[Error getting type: {type}]</>);

Should not remove space between type: and {type}.

Configuration to put params/args on newlines instead of hanging

Right now the default behaviour is to prefer hanging indentation:

funcCall(testing, testing, testing,
    testing, testing);

And someone can break that up by adding a newline after the first arg:

funcCall(
testing, testing, testing,
    testing, testing);

// formats as
funcCall(
    testing,
    testing,
    testing,
    testing,
    testing
);

But it would be nice if there was a setting so that it will always break it up to a newline when hanging.

Not sure what this should be called (and should it apply to union/intersection types and logical/binary expressions? Obviously there would be control for each kind of node)

• preferHanging - Current behaviour.
• forceNewlinesIfHanging - Forces newlines when it exceeds the line width. (Or maybe forceMultiLineIfHanging?)

Force multi-line arguments sometimes causes same call to appear twice

Not sure what's going on here. Reported by @doxxx

https://dprint.dev/playground/#code/LAKApgHgDg9gTgFwAQGMA2BDAzlpAVMLBASwDsBzJYgWyjTGrFIVwwoFdM4A6ASQGEYzODDT04SAN6gkqIUTjsUCeAAoAlFJmykCABbEs3OIRjs4KQkgC8SUmADuSAEqnzlrKoAkCOGyyYCGDqANzastgAJgBmUbFYMXHc5GAIAAoiEACeAEJZAHIYjACCWFmkKAA8vABqxI4AsjCRYGgAfKoA5HE9CfGJfZ0ANEheWCgwUMHc+kyqqpEYCBia1m1aIDo6+obccTZIi8thm1ujSV5xGidbAL6h2regTyBAA/config/N4IgNglgdgpg6hAJgFwBYgFwA4AMAaEaRGKZBFdDAFgIFcBnGAFQEMAjezAMxbEYMYBbCAGEA9mDFROGZACdaMAdADmYGAEVaY5DBnzFBeSwiQoK8YMEsZIKWACeAWVphkEADLQYIOowBCciwAxnqYIADuqCQAcjoAyqrqXrC+IGxBoQAKYvQQ7lLhsAAeyCkwAJJcABIs5qppeebq-mKIDjl5BVDh1tDIJj0EJcjipHISAGKSEZ35EIUYICPlaVxicqEubp7eAIJyKrSCJMj6Ckog65sw2+7lWSxBJ7pyMjx8lyTHACIwwWAnixugA6E6CNgwOTxAAOIQaSz6pEGaSeEwik1oUGC3QAosUYXI9HkpCCGDBHkTSNFGLYkQNoCAAL5AA

preferHangingArguments: true - Should make multiline in certain scenarios

The following:

it("should get the class descendants", () => {
    doTest("class Base {} class Child1 extends Base {} class Child2 extends Base {} class Grandchild1<T> extends Child1 {} class GreatGrandChild1<T> extends Grandchild1<T> {}",
        "Base", ["Child1", "Child2", "Grandchild1", "GreatGrandChild1"]);
});

Should not format as this:

it("should get the class descendants", () => {
    doTest(
    "class Base {} class Child1 extends Base {} class Child2 extends Base {} class Grandchild1<T> extends Child1 {} class GreatGrandChild1<T> extends Grandchild1<T> {}",
        "Base", ["Child1", "Child2", "Grandchild1", "GreatGrandChild1"]);
});

...when preferHangingArguments is true. Instead it should just make that multi-line.

Rename useSpaces

Too similar to useTabs. Probably useSpaceSeparators would be more clear.

Fix comments inside empty braces and brackets

Need to fix comments in empty braces and brackets (ex. [] or {}). Pretty sure that’s not working now in some scenarios based on looking at the code today while fixing something else. A common implementation of this would be nice.

Configuration for using braces in a switch statement

Some example code:

switch (test) {
    case 5: { return 5; }
    case 6: {
        return 6;
    }
    case 7:
        return 7;
}

This would tie into the "useBraces" configuration and could be turned off by setting switchCase.useBraces to false.

Incorrect newlines for binary expression with === operator

See here:

https://dprint.dev/playground/#code/MYewdgzgLgBFCm0CWYDmMC8dFRegZPjAIQLQB0ZuaAKgBZIQDyArlALABQMPvfPGQSSp5ilHHgDcQA/config/N4IgNglgdgpg6hAJgFwBYgFwA4AMAaEaRGKZBFdDAFgIFcBnGAFQEMAjezAMxbEYMYBbCAGEA9mDFROGZACdaMAdADmYGAEVaY5DBk8+SkPJYRIUFeMGCWMkLABuMOSDqMAQnJYBjPZhAA7qgkAHI6AMqq6gAy0DCuIGxevgAKYvQQyBBS-rAAHsixsACSXAASLBaqCRkW6u5iiACeaRlZORggNtDIplAJ+cjipHISAGKSAa2Z2f2dg0XxBGIADs4syGJy0+1z9jAFiwlcW74AsrRgWYsAgnIqtIIkyPq8-CAncueX13EpLF4nro5K9DAQSI8ACIwbxgAEbWYAOiegjYznCKx81U63VIfQSANGATGtCg3l2AFE8is5HoMlJEQwYP9aaRgow7LjetAQABfIA

Basically, === should not be put on a newline like that.

const testing = testing && !test.testingThisOut
    === !testing!.testing;

Configuration for placing logical/binary operators on previous or next line

For example, right now the default does this:

const mathResult = 1 + 2 * 6
    + moreMath * math;

But maybe someone would prefer:

const mathResult = 1 + 2 * 6 +
    moreMath * math;

The default should remain the same since it's easier to read though.

Probably "newLineOperatorPosition" or just "operatorPosition" with options "sameLine" and "nextLine" (or maybe "preferNextLine").

Also applies to ternary operators.

Line wrapping for object arguments

For a column limit of 80:

f("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", {
  a: 1
});

would get unnecessarily wrapped to

f(
  "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
  {
    a: 1
  }
);

which doesn't look good for options object functions. This is unlike prettier.

Remove `useSpaceSeparators` and only have per ast node configuration

It would be better to remove the global useSpaceSeparators because I don't want certain behaviour by default.

For example, I like a space after an if keyword:

if (true) {}

But I don't like it after the function name:

function test () {
}

I also don't like it after the new keyword in constructor types and constructor function signatures:

new (...etc...)

useSpaceSeparators implies that there should be a space in both those cases.

---

Instead of the above, leave it to just having per AST node configuration.

Relates to #164.

Break up binary expressions for easier formatting

Binary expressions should be broken up into a custom node with a flat structure. Only one of the nodes in the left and right should then have an operator (according to the configuration).

Format jsdocs

JSDocs should be formatted.

• Configuration to force single line JS docs when able (default).

Configuration to force each binary expressions' left & right to be on separate lines when multi-line

For example:

asdfasdfasdf && asdfasdfasdf && asdfasdfasdf && asdfasdfasdfasdf && asdfasasdfasdf;

Formats as:

asdfasdfasdf
  && asdfasdfasdf
  && asdfasdfasdf
  && asdfasdfasdfasdf
  && asdfasasdfasdf;

Support top level await

Example:

async function f() {
    
}
await f();

Opened swc-project/swc#626

Support type-only imports & exports

As title.

JSX -   should not change to space

For example, this:

<span>&nbsp;|&nbsp;</span>

Should not go to:

<span>|</span>

Just needs to use extra.raw:

Allow single line switch statement cases

For example:

switch (test) {
    case 5: return 5;
    case 6: return 6;
    case 7: return 7;
}

Leave empty blocks on the same line

For example:

function test() {}

Add preferHanging configuration for statements

Building on #173.

Applies to:

• If statements
• While statements
• For/for in/for of statements
• Do while statements
• Maybe more I can't remember off the top of my head at the moment :)

For example, the following:

if (testingThisOutWith && someIdentifiersThatAreReallyLong && goingFurtherAndFruther) {
}

Currently formats like so by default:

if (testingThisOutWith && someIdentifiersThatAreReallyLong
    && goingFurtherAndFruther)
{
}

But instead it should only format that way when its preferHanging configuration is true. By default, it should format like this:

if (
    testingThisOutWith && someIdentifiersThatAreReallyLong
    && goingFurtherAndFruther
) {
}

...and would format like so with #169:

if (
    testingThisOutWith
    && someIdentifiersThatAreReallyLong
    && goingFurtherAndFruther
) {
}

Configuration for leading commas

See https://github.com/dsherret/dprint/issues/25#issuecomment-529208825

There are other situations where people would like leading commas too.

This would be leadingCommas (boolean) with default false.

Add preferHanging configuration for expressions

Right now by default, array literals will be hanging unless they are explicitly made multi-line. This should be changed to be multi-line by default and work similarly to the new preferHangingArguments. The code between these two areas should be shared as well because arrays are comma separated values.

Configuration for switch statement single line position

For example:

switch (test) {
    case 5: return 5;
    case 6:
        return 6;
    case 7: { return 7; }
}

Allow variable declarations on multiple lines

For example:

var left  = '<pre><code\\b[^>]*>',
    right = '</code></pre>',
    flags = 'g',

Blank lines option

Is possible to have an option to add blank line rule(s) in the formatter?
Eg transform this

class Temp {
    @Dec1
    prop1! int;
    @Dec2
    prop2! string;
}

to this:

class Temp {
    @Dec1
    prop1! int;

    @Dec2
    prop2! string;
}

or this:

class Temp {

    @Dec1
    prop1! int;

    @Dec2
    prop2! string;

}

Missing semi-colon in export default statement in certain cases

https://dprint.dev/playground/#code/KYDwDg9gTgLgBAE2AMwIYFcA28DeBfIA/config/N4IgNglgdgpg6hAJgFwBYgFwA4AMAaEaRGKZBFdDAFgIFcBnGAFQEMAjezAMxbEYMYBbCAGEA9mDFROGZACdaMAdADmYGAEVaY5DBk8+SkPJYRIUFeMGCWMkLABuMOSDqMAQnJYBjPZhAA7qgkAHI6AMqq6gAy0DCuIGxevgAKYvQQyBBS-rAAHsixsACSXAASLBaqCRkW6u5iiACeaRlZORggNtDIplAJ+cjipHISAGKSAa2Z2f2dg0XxBFxicr4AsrRgWYsAgnIqtIIkyPq8-CArazCb2xCLKSxex7pyZ4YEJEcAIjDeYE8WO0oAA6Y6CNjOcIABx81U63VIfQST1GATGtCg3mBAFE8tC5HoMlIQQwYI9CaRgow7IjetAQABfIA

Also:

https://dprint.dev/playground/#code/KYDwDg9gTgLgBAE2AMwIYFcA28DGEB2+wOMAFALapgDKMqMwAKhAApQRgDOANHJWABEAlpzD0cAC2ZsOnAJSkAgmDBygA/config/N4IgNglgdgpg6hAJgFwBYgFwA4AMAaEaRGKZBFdDAFgIFcBnGAFQEMAjezAMxbEYMYBbCAGEA9mDFROGZACdaMAdADmYGAEVaY5DBk8+SkPJYRIUFeMGCWMkLABuMOSDqMAQnJYBjPZhAA7qgkAHI6AMqq6gAy0DCuIGxevgAKYvQQyBBS-rAAHsixsACSXAASLBaqCRkW6u5iiACeaRlZORggNtDIplAJ+cjipHISAGKSAa2Z2f2dg0XxBFxicr4AsrRgWYsAgnIqtIIkyPq8-CArazCb2xCLKSxex7pyZ4YEJEcAIjDeYE8WO0oAA6Y6CNjOcIABx81U63VIfQST1GATGtCg3mBAFE8tC5HoMlIQQwYI9CaRgow7IjetAQABfIA

Ability to increase line width of a node

It would be cool if in certain cases you could just say "I don't care... format this part, but let it go long".

Something like:

// dprint-line-width: 180

Edit: I think this would just need to be something like Signal::StartLineWidth(180) then Signal::EndLineWidth (stored in a stack with the first line width as the first item... the stack should never be empty)

No semi-colons should sometimes add a semi-colon at the start of a statement

Need to handle scenarios where not using a semi-colon would cause a bug:

https://standardjs.com/rules.html#semicolons

I think this will only need to be done when certain kinds of nodes don't have their semi-colon enabled.

Support `export * as ns` syntax

As title.

typescript: Allow line breaks between switch cases

Input:

switch (n) {
  case 1:
    break;

  case 2:
    break;
}

dprint output:

switch (n) {
  case 1:
    break;
  case 2:
    break;
}

Prettier output: (preserves)

Configuration for position of single line statements

For example, deciding on this:

if (test) statement;
// or
if (test)
    statement;

I will probably keep the second as the default because I’m a big fan of it over the first.

https://twitter.com/davidsherret/status/1143491015518621696?s=21

Should be 3 options, one for first, second, then "maintain".

For-like statements should put inner header on new line when open paren is on a different line

This is already done for IfStatements and the like, but should also be done for For/ForIn/ForOf statements.

Example:

for (
const test of something) {
}

Should go to:

for (
    const test of something
) {
}

Space Configuration

Building on #166.

It would be good to implement all the following scenarios and way more:

// from typescript compiler api (typescript.d.ts)
readonly insertSpaceAfterCommaDelimiter?: boolean;
readonly insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis?: boolean;
readonly insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets?: boolean;
readonly insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces?: boolean;
readonly insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces?: boolean;

// done
readonly insertSpaceBeforeAndAfterBinaryOperators?: boolean;
readonly insertSpaceAfterKeywordsInControlFlowStatements?: boolean;
readonly insertSpaceAfterFunctionKeywordForAnonymousFunctions?: boolean;
readonly insertSpaceBeforeFunctionParenthesis?: boolean;
readonly insertSpaceAfterTypeAssertion?: boolean;
readonly insertSpaceBeforeTypeAnnotation?: boolean;
readonly insertSpaceAfterSemicolonInForStatements?: boolean;
readonly insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces?: boolean;
readonly insertSpaceAfterConstructor?: boolean;

bracePosition: maintain should not put braces on next line when originally no braces

For example this:

if (true)
    statement;

Currently goes to:

if (true)
{
    statement;
}

But should be:

if (true) {
    statement;
}

Switch statement with braces should format with brace on same line

https://dprint.dev/playground/#code/KYDwDg9gTgLgBAMwK4DsDGMCWEVwIZhgBKwAJkmsFABQDOMeMwAXHAMozTAePBwA+cVKWAJMKMgBp8GbClYBBADZKFsnLQCUrDlx5M4AbwCwAKDgW4tAO6YYaABZxqedSgB0MAJ5hgmo2aWQXBoeLR8rlg4AHJ4ALbAtO5sAKIAKgD6qQAyKQDCaSkAIhnRAPJFKawm5sF1mAjO9LzuaBBxYJhKVHAAvL1wKEgqmoF14xZQwDBIULjNTADcZmMTk9OzuDVr4+57C8CSqzuWbR1dVNXHJ8F77get7Z3dUEe1N3Xh3Rhk0RAirEicncKH+wGuJwAvhC6pDlu9gtCEUjIUA/config/N4IgNglgdgpg6hAJgFwBYgFwA4AMAaEaRGKZBFdDAFgIFcBnGAFQEMAjezAMxbEYMYBbCAGEA9mDFROGZACdaMAdADmYGAEVaY5DBk8+SkPJYRIUFeMGCWMkLABuMOSDqMAQnJYBjPZhAA7qgkAHI6AMqq6gAy0DCuIGxevgAKYvQQyBBS-rAAHsixsACSXAASLBaqCRkW6u5iiACeaRlZORggNtDIplAJ+cjipHISAGKSAa2Z2f2dg0XxBFxicr4AsrRgWYsAgnIqtIIkyPq8-CArazCb2xCLKSxex7pyZ4YEJEcAIjDeYE8WO0oAA6Y6CNjOcIABx81U63VIfQST1GATGtCg3mBAFE8tC5HoMlIQQwYI9CaRgow7IjetAQABfIA

Fix try statement with empty catch

For example:

try {
    test;
} catch {}

// expected
try {
    test;
} catch {}

// actual
try {
    test;
} catch {
}

Also:

try {} catch {}

// expected
try {
} catch {}

// actual
try {} catch {
}

Via @nayeemrmn at https://github.com/dsherret/dprint/issues/65#issuecomment-580959847

Configuration for space between type assertion and expression

Example:

<Identifier> node
// or
<Identifier>node

Probably: "typeAssertion.useSpace": false (defaults to true).

(Note that the new type assertion is called an AsExpression)

Add configuration for optional arrow function parens

Example:

const t = (a) => 5;

Have a "force", "maintain", and "preferNone" (default).

Configuration for space after new keyword in constructor type

For example:

let test: new () => Test;
// or
let test: new() => Test;

Error about symbol being thrown

Ironically this is the same example as in dprint/dprint#35:

https://dprint.dev/playground/#code/HYQwtgpgzgDiDGEAEAXaKB0UD2kUAsBLYAcyQG8BYAKCTqQDMBXYeFQ7YVdACgEoKNesKSEGSHigBOTCAKq0RStFHakChHExST0xEgBUiUADTdV+o5oDy2zCABGhFC4wqUSALzekBvaSsMAGVbFABBABlnFAAbCAAhaJckAH5zNUNjUMwwbCl85AAudMssuz4AbiElJABfarp66lqgA/config/N4IgNglgdgpg6hAJgFwBYgFwEYBMAGAGhGkRimQRXQwBYiBXAZxgBUBDAI0cwDM2xmRZgFsIAYQD2YCVG4ZkAJ3owh0AOZgYARXoTkMOXwEqQithEhQ1k4cLZyQsAG4wFIBswBCCtgGMDmCAA7qhkAHJ6AMrqmgAy0DDuIBw+-gAKEowQyBAygbAAHsjxsACSPAASbFbqSVlWmp4SiACeGVk5eRggdtDI5lBJhciS5ApSAGLSQe3ZuYPdwyWJRBIADq5syBIKs50LjjBFy0k8O-4AsvRgOcsAggpq9MJkyIb8giBnCpfXtwlpNg+F76BTvYxEMjPAAiMF8YCBW3mADoXsIOK5Ims-LVur1yAMkkDxkEJvQoL59gBRAprBQGLIyZFMGCA+nkULMBz4-rQEAAXyAA

Support private fields

As title.

Allow single line methods and functions

For example:

prop: { method() { return 5; } },

// or
function test() { return 5; }

JSX - Keep text on same line beside JSXExpressionContainer

For example this:

<label>
    {this.props.title}:
    {this.props.children}
</label>

Should NOT format to:

<label>
    {this.props.title}
    :
    {this.props.children}
</label>