stable

Prettier 1.8: Markdown Support

November 7, 2017

Lucas Azzola (@azz)

This release adds Markdown support, a new --insert-pragma flag, fixes a number of formatting issues, adds support for some new experimental operators, and improves our editor integration support.

Highlights

Markdown Support

Support markdown (#2943) by @ikatyang

You can now run Prettier on Markdown files! 🎉

The implementation is highly compliant with the CommonMark spec, and backed by the excellent remark-parse package.

Word Wrap

One of Prettier's core features is its ability to wrap code at a specified line length. This applies to Markdown too, which means you can maintain nice and clean 80-character-wide Markdown files without having to re-adjust line breaks manually when you add or delete words.

Input:

Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valourous visitation of a bygone vexation stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition! The only verdict is vengeance; a vendetta held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it's my very good honour to meet you and you may call me V.

Output:

Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim
and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity,
is a vestige of the vox populi, now vacant, vanished. However, this valourous
visitation of a bygone vexation stands vivified and has vowed to vanquish these
venal and virulent vermin vanguarding vice and vouchsafing the violently vicious
and voracious violation of volition! The only verdict is vengeance; a vendetta
held as a votive, not in vain, for the value and veracity of such shall one day
vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage
veers most verbose, so let me simply add that it's my very good honour to meet
you and you may call me V.

Note: We're considering adding an option for this, check #3183 for discussion. Update: We've added an option in 1.8.2 called --no-prose-wrap

Note for CJK users: If your markdown renderer does not support CJK line ending, you'll have to use plugin like markdown-it-perfect-newline-for-cjk, hexo-filter-fix-cjk-spacing, etc. to remove additional spaces.

// Source
一二三
四五六
七八九

// Rendered content with unsupported renderer
一二三 四五六 七八九

// Rendered content with supported renderer or via plugin
一二三四五六七八九

Code Formatting

Powered by Prettier's generic "multiparser", Prettier will format code blocks in Markdown! We use the language code provided with the code block to determine which language it is, and thus we can format any language that Prettier supports (including Markdown itself, if you're into that).

Input:

```js
reallyUgly    (
javascript
  )
```

```css
.h1 {     color : red }
```

Output:

```js
reallyUgly(javascript);
```

```css
.h1 {
  color: red;
}
```

Note: In some cases you may not want to format your code in Markdown, and just like in other languages, in Markdown you can use an ignore comment before the code block to ignore it from formatting:

<!-- prettier-ignore -->
```js
ugly   ( code ) ;
```

Lists

When rearranging list items, after running Prettier all the numbers will be fixed!

Markdown Lists

Note: you can actually opt out of this by using 1. for all list items if you want to optimize for cleaner diffs.

Tables

Tables will also automatically be adjusted to fit their contents. This could be completely unmaintainable without an automated tool.

Markdown Tables

Markdown-in-JS

By using either md or markdown tagged template literals, you can format markdown code inside JavaScript.

const markdown = md`
  # heading

  1. list item
`;

CLI

Add option to insert @format to first docblock if absent (#2865) by @samouri

In 1.7, we added an option called --require-pragma to require files contain an /** @format */ pragma to be formatted. In order to add this pragma to a large set of files you can now use --insert-pragma flag.

prettier --write "folder/**/*.js" --insert-pragma

Add --loglevel option (#2992) by @ikatyang

This nifty feature allows you to opt in (or out) of Prettier's logging. We've also cleaned up the logging substantially since 1.7.

$ prettier --loglevel=debug blarg
$ ./bin/prettier.js --loglevel=debug blarg
[debug] normalized argv: {"_":["blarg"],"bracket-spacing":false,"color":true,"debug-check":false,"debug-print-doc":false,"flow-parser":false,"insert-pragma":false,"jsx-bracket-same-line":false,"list-different":false,"require-pragma":false,"semi":false,"single-quote":false,"stdin":false,"use-tabs":false,"version":false,"with-node-modules":false,"write":false,"loglevel":"debug","ignore-path":".prettierignore","config-precedence":"cli-override"}
[error] No matching files. Patterns tried: blarg !**/node_modules/** !./node_modules/**

JavaScript

Fix indentation for JSDoc comments (#2470) by @maxdeviant

This has been a long-time known issue with Prettier. When formatting code that results in a change of indentation level, the JSDoc comments would end up being out of alignment. We're happy to report this is now fixed!

// Before
function theFunction2(action$, store) {
  /*
     * comments
     */
  return true;
}

// After
function theFunction2(action$, store) {
  /*
   * comments
   */
  return true;
}

Print pipeline and nullish-coalescing operators (#3036) by @azz

We've added support for two new proposed operators to Prettier: the pipeline operator and the nullish coalescing operator.

The pipeline operator is currently a stage one proposal.

This proposal introduces a new operator |> similar to F#, OCaml, Elixir, Elm, Julia, Hack, and LiveScript, as well as UNIX pipes. It's a backwards-compatible way of streamlining chained function calls in a readable, functional manner, and provides a practical alternative to extending built-in prototypes.

// Before
let result = exclaim(capitalize(doubleSay("hello")));

// After
let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;

The nullish coalescing operator is another stage one proposal.

When performing optional property access in a nested structure in conjunction with the optional chaining operator, it is often desired to provide a default value if the result of that property access is null or undefined.

This operator is similar to || except it only evaluates the right-hand-side if the left is undefined or null, not "", 0, NaN, etc.

const foo = object.foo ?? "default";

Improved template literal expressions line breaks (#3124) by @duailibe

This was another known issue with Prettier, when printing a template literal string with expressions inside that went over the print width, it would wrap the code in weird places inside the expressions. Now, if Prettier needs to insert a line break, it should happen right between ${ and }.

// Before
const description = `The value of the ${cssName} css of the ${this
  ._name} element`;

const foo = `mdl-textfield mdl-js-textfield ${className} ${content.length > 0
  ? "is-dirty"
  : ""} combo-box__input`;

// After
const description = `The value of the \${cssName} css of the \${
  this._name
} element`;

const foo = `mdl-textfield mdl-js-textfield ${className} ${
  content.length > 0 ? 'is-dirty' : ''
} combo-box__input`

JSX

Don't inline trailing } for arrow functions attributes (#3110) by @duailibe

In order to align closer to the Airbnb style guide, and since it was never intentionally printed this way, we've moved the } from to the next line in JSX. This is more diff friendly, and makes it easier to move code around by shifting lines in your editor.

// Before
<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)}
/>;

// After
<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
/>;

Other Changes

JavaScript

Make the factory detection handle multiple elements (#3112) by @vjeux

There was a bug in the heuristic that Prettier uses to determine whether an expression is a factory or not. It now works correctly with longer member expressions.

// Before
window.FooClient
  .setVars({
    locale: getFooLocale({ page }),
    authorizationToken: data.token
  })
  .initVerify("foo_container");

// After
window.FooClient.setVars({
  locale: getFooLocale({ page }),
  authorizationToken: data.token
}).initVerify("foo_container");

Handle comments between function name and open paren (#2979) by @azz

Printing comments in the right place is an endless challenge 😉. This fix ensures that comments next to function names are re-printed correctly.

// Before
function f(/* comment*/ promise) {}

// After
function f /* comment*/(promise) {}

Support sequential CallExpressions in member chains (#2990) by @chrisvoll

Member chains are one of the most complex parts of Prettier. This PR fixes an issue where repeated calls lead to the next method not being pushed to the next line.

// Before
wrapper
  .find("SomewhatLongNodeName")
  .prop("longPropFunctionName")().then(function() {
  doSomething();
});

// After
wrapper
  .find("SomewhatLongNodeName")
  .prop("longPropFunctionName")()
  .then(function() {
    doSomething();
  });

Account for empty lines in long member call chain (#3035) by @jackyho112

Previously, Prettier would delete all newlines within a member chain. Now we keep up to one if it's in the source. This is nice for fluent APIs that you want to break up over multiple lines.

angular
  .module("AngularAppModule")

  // Constants.
  .constant("API_URL", "http://localhost:8080/api")

  // App configuration.
  .config(appConfig)
  .run(appRun);

Fix issue where first argument is left behind when line breaks (#3079) by @mutdmour

This addresses an issue where due to our special object inline behaviour, the indentation missing from the function call.

// Before
db.collection("indexOptionDefault").createIndex({ a: 1 },
{
  indexOptionDefaults: true
},
function(err) {
  // code
});

// After
db.collection("indexOptionDefault").createIndex(
  { a: 1 },
  {
    indexOptionDefaults: true
  },
  function(err) {
    // code
  }
);

Break parens for binaries in member expression (#2958) by @duailibe

Similarly, there was another edge case where indentation was missing from logical expressions. This is fixed, too.

// Before
const someLongVariable = (idx(
  this.props,
  props => props.someLongPropertyName
) || []
).map(edge => edge.node);

// After
const someLongVariable = (
  idx(this.props, props => props.someLongPropertyName) || []
).map(edge => edge.node);

Prevent breaking MemberExpression inside NewExpression (#3075) by @duailibe

There are so many ways to break a line. Some of them look much worse than others. Breaking between in this case looked really weird, so it has been fixed!

// Before
function functionName() {
  if (true) {
    this._aVeryLongVariableNameToForceLineBreak = new this
      .Promise((resolve, reject) => {
        // do something
      });
  }
}

// After
function functionName() {
  if (true) {
    this._aVeryLongVariableNameToForceLineBreak = new this.Promise(
      (resolve, reject) => {
        // do something
      }
    );
  }
}

Fix array accessors in method chains (#3137) by @duailibe

In a method chain we split lines by grouping elements together and accessing an array should be printed in the end of a group instead of the beginning.

// Before
find('.org-lclp-edit-copy-url-banner__link')
  [0].getAttribute('href')
  .indexOf(this.landingPageLink)

// After
find('.org-lclp-edit-copy-url-banner__link')[0]
  .getAttribute('href')
  .indexOf(this.landingPageLink)

Flow and TypeScript

Fix indentation of intersection object types (#3074) by @duailibe

This was a minor alignment bug in intersection types, and has now been fixed.

// Before
type intersectionTest = {
  propA: X
} & {
  propB: X
} & {
    propC: X
  } & {
    propD: X
  };

// After
type Props = {
  propA: X
} & {
  propB: X
} & {
  propC: X
} & {
  propD: X
};

Keep parens around TSAsExpression in ConditionalExpression (#3053) by @azz

We missed a case where we need to keep the parenthesis with TypeScript's as assertions. This is now fixed.

// Before
aValue as boolean ? 0 : -1;

// After
(aValue as boolean) ? 0 : -1;

JSX

Collapse multiple JSX whitespaces (#2973) by @karl

This fixes up the issue where JSX formatting occasionally needed to be run twice to become stable. This occurred when you had multiple JSX whitespace elements or JSX whitespace followed by a space.

// Before
<div>
    {" "} <Badge src={notificationIconPng} />
</div>;

// After
<div>
  {" "}
  <Badge src={notificationIconPng} />
</div>

Don't print JSX bracket on same line when it has trailing comments (#3088) by @azz

This was an issue with the --jsx-bracket-same-line option. Turns out you can't always put the bracket on the same line...

// Input
<div
  // comment
>
  {foo}
</div>

// Before
<div>
// comment
  {foo}
</div>;

// After
<div
// comment
>
  {foo}
</div>;

CSS

Preserve line breaks in grid declarations (#3133) by @duailibe

Prettier will now preserve line breaks included in the source code when formatting the grid and grid-template-* rules, since those are important to keep in separate lines, but still applies the formatting like other rules (e.g., numbers and quotes).

/* Original Input */
div {
  grid:
    [wide-start] 'header header header' 200.000px
    [wide-end] "footer footer footer" .50fr
    / auto 50.000px auto;
}

/* Before */
div {
  grid: [wide-start] "header header header" 200px [wide-end]
    "footer footer footer" 0.5fr / auto 50px auto;
}

/* After */
div {
  grid:
    [wide-start] "header header header" 200px
    [wide-end] "footer footer footer" 0.5fr
    / auto 50px auto;
}

SCSS

Format SCSS maps like CSS rules (#3070) by @asmockler

Turns out SCSS maps are much prettier when printed over multiple lines.

// Before
$map: (color: [#111111](https://github.com/prettier/prettier/pull/111111), text-shadow: 1px 1px 0 salmon)

// After
$map: (
  color: [#111111](https://github.com/prettier/prettier/pull/111111),
  text-shadow: 1px 1px 0 salmon
);

CSS-in-JS

Fix formatting styled(Foo).attrs(...)`` (#3073) by @existentialism

Prettier will now format the CSS in styled-components code that looks like this:

styled(Component).attrs({})`
  color: red;
`;

GraphQL

Prevent formatting GraphQL template literals with expressions (#2975) by @duailibe

Prettier doesn't support formatting JavaScript expressions in GraphQL. See #2640 for tracking. There was a bug where formatting an expression lead to invalid code, so we've completely disabled formatting GraphQL when it contains JavaScript expressions until we fully support it.

// Before
(invalid code)

// After
graphql(schema, `{ query test { id }} ${fragment}`)

CLI

Don't use ANSI codes if stdout isn't a TTY (#2903) by @Narigo

Previously, piping the output of --list-different to other tools was troublesome due to the ANSI color codes we use to show whether a file was modified or not. This PR disables the use of color when Prettier is piped to a different process.

Configuration

Use relative paths with CLI (#2969) by @ahmedelgabri

This fixes a bug where passing a path starting with ./ to the CLI wouldn't match patterns used in .prettierignore.

## .prettierignore
path/to/*.js

After this fix, no files will be written to when executing:

$ prettier --write ./path/to/*.js

Resolve file paths relative to config file (#3037) by @azz

This fixes an issue where .prettierrc overrides, under certain conditions, were not being respected for absolute paths with the resolveConfig API.

Core

Respect CJK width and Combined Characters (#3003, #3015) by @ikatyang

Chinese, Japanese and Korean characters are now considered two characters wide.

// Before (exceeds print width when CJK characters are 2x monospace chars)
const x = ["中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文"];

// After
const x = [
  "中文",
   // ...
  "中文"
];

##3015 also ensures that combining characters (e.g. Á) are counted as one character.

Editor Support

Implement getSupportInfo() and use it for inference (#3033) by @azz

We've added a new function to the API (prettier.getSupportInfo([version])), and the CLI --support-info. This can be used to interrogate Prettier to find out which languages the current version, or an older version, supports. It also provides useful information such as CodeMirror IDs, tmScopes, etc, which can be used to automate some of the work done with lookup tables in text editor integrations.

Internally, we use this information to drive which extensions trigger which parsers, and support some common files that don't have extensions, like .prettierrc, Jakefile, etc.

## prettier knows that this file is JSON now.
$ prettier --write .prettierrc

Split source elements relative to their language. (#3069) by @CiGit

This fixes an issue in editors that support range formatting, where formatting an object would cause Prettier to crash.

Thanks! ❤️

Thanks to everyone who contributed to this release, as well as those who raised issues! Prettier has become a highly stable piece of software that a large amount of people trust with their code. We take that trust seriously, and fix rare issues that break code with the highest priority. We can't fix these issues if we don't know about them, so never be afraid to create an issue!

Recent Posts