@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 3.3.2.

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-indent option 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.
• Extends jest.each template string table formatting

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]
    ),
  ]
);

Extend jest.each template string table formatting

Prettier formats template strings like jest.each tables if the preceding chained expression matches describe.each, it.each or test.each. This fork extends this to include functions or chained expressions which include the word "table" (case-insensitive).

// Before: using prettier
table`
a|b|expected
${1}|${1}|${2}
${1}|${2}|${3}
${2}|${1}|${3}
`

// After: using @marketgridsys/prettier
table`
  a    | b    | expected
  ${1} | ${1} | ${2}
  ${1} | ${2} | ${3}
  ${2} | ${1} | ${3}
`

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

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!

Documentation

Install · Options · CLI · API

Playground

Badge

Show the world you're using Prettier →

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

Contributing

See CONTRIBUTING.md.