TypeScript and JavaScript code formatting plugin for dprint.
Home Page: https://dprint.dev/plugins/typescript
License: MIT License
TypeScript formatting plugin for dprint.
This uses the swc parser for TypeScript written in Rust (it's super fast).
See the GitHub releases.
The tests are in the ./tests/specs folder. To run the tests, run cargo test.
You may wish to try out the plugin by building from source:
cargo build --target wasm32-unknown-unknown --release --features "wasm"./target/wasm32-unknown-unknown/release/dprint_plugin_typescript.wasm in a dprint configuration file.
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.
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.
Not sure what's going on here. Reported by @doxxx
JSDocs should be formatted.
For example:
asdfasdfasdf && asdfasdfasdf && asdfasdfasdf && asdfasdfasdfasdf && asdfasasdfasdf;
Formats as:
asdfasdfasdf
&& asdfasdfasdf
&& asdfasdfasdf
&& asdfasdfasdfasdf
&& asdfasasdfasdf;
For example:
let test: new () => Test;
// or
let test: new() => Test;
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.
Building on #173.
Applies to:
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
) {
}
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)
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.
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).
For example this:
if (true)
statement;
Currently goes to:
if (true)
{
statement;
}
But should be:
if (true) {
statement;
}
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.
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
) {
}
Too similar to useTabs. Probably useSpaceSeparators would be more clear.
For example:
switch (test) {
case 5: return 5;
case 6:
return 6;
case 7: { return 7; }
}
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.
Example:
const t = (a) => 5;
Have a "force", "maintain", and "preferNone" (default).
Also:
See here:
Basically, === should not be put on a newline like that.
const testing = testing && !test.testingThisOut
=== !testing!.testing;
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.
For example:
function test() {}
return (<>[Error getting type: {type}]</>);
Should not remove space between type: and {type}.
For example:
prop: { method() { return 5; } },
// or
function test() { return 5; }
Example:
<Identifier> node
// or
<Identifier>node
Probably: "typeAssertion.useSpace": false (defaults to true).
(Note that the new type assertion is called an AsExpression)
Ironically this is the same example as in dprint/dprint#35:
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;
}
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
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.
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
As title.
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.
From dprint/dprint#66. I had accidentally removed it when removing elsewhere because there was no test for that.
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.
As title.
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.
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?)For example, this:
<span> | </span>
Should not go to:
<span>|</span>
Just needs to use extra.raw:
For example:
var left = '<pre><code\\b[^>]*>',
right = '</code></pre>',
flags = 'g',
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 example this:
<label>
{this.props.title}:
{this.props.children}
</label>
Should NOT format to:
<label>
{this.props.title}
:
{this.props.children}
</label>
As title.
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;
}
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")
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;
For example:
switch (test) {
case 5: return 5;
case 6: return 6;
case 7: return 7;
}
See here:
This:
if (true) { console.log(5); }
Should format as the same:
if (true) { console.log(5); }
When useBraces: "always" and singleBodyPosition: "sameLine".
Input:
switch (n) {
case 1:
break;
case 2:
break;
}
dprint output:
switch (n) {
case 1:
break;
case 2:
break;
}
Prettier output: (preserves)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.