Prettier 2.0 Supports Typescript 3.8, Improves CLI

The opinionated code formatter Prettier recently released its second major iteration. Prettier 2.0 adds support for TypeScript 3.8. The new Prettier also strives to provide better defaults, a better CLI and better heuristics.

Prettier now supports new syntax included in the TypeScript 3.8 release, covering type-only imports and exports, ECMAScript private fields, and export * as ns syntax.

The new type-only imports and exports TypeScript syntax enables developers to import declarations to be used for type annotations and declarations:

import type { SomeThing } from "./some-module.js";

export type { SomeThing };

TypeScript 3.8 newly supports the stage 3 ECMAScript’s private fields proposal. Private fields are fields whose identifier is preceded by a # within a class definition:

class X {
  #foo;
  method() {
    console.log(this.#foo)
  }
}

The new Prettier additionally fixed several TypeScript-related formatting edge cases, involving complex types, comments, and others. The improved TypeScript syntax support is being positively received by developers. One Twitter user for instance said:

It’s amazing when things align with your work :). Like this Friday we were discussing when will Prettier upgrade to TypeScript 3.8 and here you are :). Awesome

Prettier 2.0 changed the default values for the trailingComma, arrowParens, and endOfLine options. With Prettier 2.0, trailing commas become the default, as allowed in ECMAScript 5. The former default was driven by the desire to retain compatibility down to IE8 browsers. The new default can be reverted back to its previous value by configuring Prettier with { "trailingComma": "none" }.

The Prettier arrowParens configuration option now defaults to always. The resulting formatting changes are as follows:

// Input  
const  fn  =  (x)  =>  y  => x + y;  
// Prettier 1.19  
const  fn  =  x  =>  y  => x + y;  
// Prettier 2.0  
const  fn  =  (x)  =>  (y)  => x + y;

The seemingly minor change is poised to serve TypeScript developers better, as wrapping arrow function parameters makes it easier to add type annotations. Additionally, the wrapping parenthesis cover many other frequent patterns summarized by Manuel Bieh on Twitter as follows:

The Prettier endOfLine configuration option now defaults to lf. With the previous default, Prettier preserved whichever flavor of line endings was already present in a given file. In git repositories with contributors on different operating systems, this led in some cases to large git diff results and made the line-by-line history for a file (git blame) harder to explore.

Prettier 2.0’s CLI now tries to resolve globs as literal file names before treating them as globs. The change comes to resolve discrepancies occurring between Windows and Linux filenames, the latter which can contain almost any character.

The new CLI syntax additionally finally expands directories, including ., thus allowing developers to write prettier --write . to format all supported files in the current directory and its subdirectories.

Prettier 2.0 includes improved heuristics for breaking method chains. The new heuristic is based on the complexity of the call arguments in the chain. The following code formatted with Prettier 1.19 as:

if (
  foo
    .one()
    .two()
    .three() ===
  bar
    .four()
    .five()
    .six()
) {
  // ...
}

is now formatted as follows:

// Prettier 2.0
if (foo.one().two().three() === bar.four().five().six()) {
  // ...
}

Additionally, Prettier improved its heuristic handling JSDoc type casts. As TypeScript may use JSDoc types for type information (for instance when run with the option --checkJs), reformatting JSDoc sometimes led to bug reports. The new heuristic behaves as follows:

// Input
const nestedAssertions = /** @type {MyType} */
  (/** @type {unknown} */
      (x));

// Prettier 1.19
const nestedAssertions /** @type {MyType} */ /** @type {unknown} */ = x;

// Prettier 2.0
const nestedAssertions = /** @type {MyType} */ (/** @type {unknown} */ (x));

The new Prettier also comes with a host of changes improving its treatment of miscellaneous file formats, like Flow, CSS, Vue, Angular, GraphQL, Markdown, and more.

Prettier is an opinionated code formatter that removes the original styling and ensures that the outputted code conforms to a consistent style. Prettier guarantees consistency by parsing JavaScript (and other supported languages) into an abstract syntax tree (AST) and pretty-printing back that AST. While Prettier is configurable, it resists adding configuration options, as its primary goal is to put an end to arguments among developers about code style.