@marketgridsys/prettier
@marketgridsys/prettier is a fork of the popular code formatting tool Prettier that offers improved formatting. This fork is based on Prettier version 2.8.8.
It is fully compatible with all Prettier plugins and integrations, provided they support package aliasing (see usage section below). Try it out today and improve the readability and consistency of your codebase.
This fork:
- Moves binary and modified assignment operators to the beginning of the line.
- Places else, catch and finally statements on new lines.
- Adds braces around multiline if, else, for, while and do statements.
- Adds
--switch-indentoption to control switch case indentation. - Breaks multiline parenthesized logical expressions.
- Removes extra spaces from for loops.
- Improves wrapping for member chains.
- Breaks multiline function arguments.
Binary operators and modified assignment operators
Binary operators and modified assignment operators (e.g. +=, -=, *=, /=) are placed at the beginning of the line rather than the end of the line. This improves readability as the operators are aligned.
// Before: using prettier
someVeryLongStringA &&
someVeryVeryLongStringB &&
someVeryVeryVeryLongStringC &&
someVeryVeryVeryVeryLongStringD
let first_var =
10000000000000000000000000000000000 + 10000000000000000000000000000000000;
first_var +=
10000000000000000000000000000000000 + 10000000000000000000000000000000000;
first_var -=
10000000000000000000000000000000000 + 10000000000000000000000000000000000;// After: using @marketgridsys/prettier
someVeryLongStringA
&& someVeryVeryLongStringB
&& someVeryVeryVeryLongStringC
&& someVeryVeryVeryVeryLongStringD;
let first_var =
10000000000000000000000000000000000 + 10000000000000000000000000000000000;
first_var
+= 10000000000000000000000000000000000 + 10000000000000000000000000000000000;
first_var
-= 10000000000000000000000000000000000 + 10000000000000000000000000000000000;Else, catch and finally statements
else, catch and finally statements are placed on new lines rather than inline.
// Before: using prettier
function foo(x: string | Array<string>): string {
if (typeof x === "string") {
return x;
} else {
return x.join();
}
}
try {
doSomething()
} catch (e) {
onError(e)
} finally {
doSomethingElse()
}// After: using @marketgridsys/prettier
function foo(x: string | Array<string>): string {
if (typeof x === "string") {
return x;
}
else {
return x.join();
}
}
try {
doSomething()
}
catch (e) {
onError(e)
}
finally {
doSomethingElse()
}Braces for multiline statements
Braces are automatically added to multiline if, else, for, while and do statements. This improve the readability and structure of your code.
// Before: using prettier
if (somethingTrue())
makeACallToAVeryLongFunctionThatPreventsThisFromBeingAOneLineStatement();
if (foo)
// A comment that makes this a multiline statement
bar();
while (foo)
// A comment that makes this a multiline statement
bar();// After: using @marketgridsys/prettier
if (somethingTrue()) {
makeACallToAVeryLongFunctionThatPreventsThisFromBeingAOneLineStatement();
}
if (foo) {
// A comment that makes this a multiline statement
bar();
}
while (foo) {
// A comment that makes this a multiline statement
bar();
}Adds --switch-indent option to control switch case indentation
Switch case indentation can be controlled using the --switch-indent boolean option.
-
true: Indent switch statements -
false(default): Do not indent switch statements
// Using @marketgridsys/prettier with --switch-indent=true
switch (op) {
case "plus":
return "+";
case "minus":
return "-";
case "divide":
return "/";
case "multiply":
return "*";
default:
throw new Error("Invalid binary operator: " + op);
}
// Using @marketgridsys/prettier with --switch-indent=false (default)
switch (op) {
case "plus":
return "+";
case "minus":
return "-";
case "divide":
return "/";
case "multiply":
return "*";
default:
throw new Error("Invalid binary operator: " + op);
}Break multiline parenthesized logical expressions
Line breaks are automatically added to multiline parenthesized logical expressions. This makes it easier to read complex logic.
// Before: using prettier
const funnelSnapshotCard =
(report === MY_OVERVIEW && !ReportGK.xar_metrics_active_capitol_v2) ||
(report === COMPANY_OVERVIEW &&
!ReportGK.xar_metrics_active_capitol_v2_company_metrics) ? (
<ReportMetricsFunnelSnapshotCard metrics={metrics} />
) : null;// After: using @marketgridsys/prettier
const funnelSnapshotCard =
(report === MY_OVERVIEW && !ReportGK.xar_metrics_active_capitol_v2)
|| (
report === COMPANY_OVERVIEW
&& !ReportGK.xar_metrics_active_capitol_v2_company_metrics
) ? (
<ReportMetricsFunnelSnapshotCard metrics={metrics} />
) : null;Remove extra spaces from for loops
Empty expressions in for statements are collapsed together.
// Before: using prettier
for ((x in a); ; ) {}
for (a = (a in b); ; ) {}
for (let a = (b in c); ; );
for (a && (b in c); ; );
for ((a) => (b in c); ; );// After: using @marketgridsys/prettier
for ((x in a);;) {}
for (a = (a in b);;) {}
for (let a = (b in c);;);
for (a && (b in c);;);
for ((a) => (b in c);;);Improves wrapping for member chains
Member chains automatically wrap to limit the number of function calls per line to enforce a vertical style that is more readable.
// Before: using prettier
expect(pet).to.have.property("OwnerAddress").that.deep.equals({
AddressLine1: "Alexanderstrasse",
AddressLine2: "",
PostalCode: "10999",
Region: "Berlin",
City: "Berlin",
Country: "DE",
});// After: using @marketgridsys/prettier
expect(pet)
.to.have.property("OwnerAddress")
.that.deep.equals({
AddressLine1: "Alexanderstrasse",
AddressLine2: "",
PostalCode: "10999",
Region: "Berlin",
City: "Berlin",
Country: "DE",
});Break multiline function arguments
Line breaks are automatically added to multiline function arguments to enforce a vertical style that is more readable.
// Before: using prettier
instantiate(game, [
transform([-0.7, 0.5, 0]),
render_colored_diffuse(
game.MaterialDiffuse,
game.Meshes["monkey_flat"],
[1, 1, 0.3, 1]
),
]);// After: using @marketgridsys/prettier
instantiate(
game,
[
transform([-0.7, 0.5, 0]),
render_colored_diffuse(
game.MaterialDiffuse,
game.Meshes["monkey_flat"],
[1, 1, 0.3, 1]
),
]
);Usage
If you use Yarn, you can install using an alias so that require('prettier') transparently resolves to this fork:
$ yarn add -D prettier@npm:@marketgridsys/prettier
Opinionated Code Formatter
JavaScript
· TypeScript
· Flow
· JSX
· JSON
CSS
· SCSS
· Less
HTML
· Vue
· Angular
GraphQL
· Markdown
· YAML
Your favorite language?
Intro
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Input
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());Output
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!
Badge
Show the world you're using Prettier →
[](https://github.com/prettier/prettier)Contributing
See CONTRIBUTING.md.