days
0
-23
-6
hours
-1
-1
minutes
-5
-6
seconds
-3
-7
search
Pretty, Prettier, Prettiest

Code formatter Prettier 2.0 improves CLI & upgrades to TypeScript 3.8

Sarah Schlothauer
prettier
© Shutterstock / Blackboard

Prettier helps enforce a consistent style by parsing re-printing your code line-by-line. The new 2.0 release introduces a new CLI that is now more user-intuitive and developer-friendly, changed default values, TypeScript 3.8 features, and more.

Initially released back in early 2017, Prettier has grown up into a more mature opinionated code formatter. The 2.0 release arrived on March 21, 2020. Prettier 2.0 improves defaults, includes a better, more user-friendly CLI, upgrades TypeScript to 3.8 and much more.

From the project’s GitHub README, Prettier “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”.

See how 2.0 expands upon its uses and makes Prettier even, well, prettier.

SEE ALSO: JavaScript on top, Python ties with Java in RedMonk rankings

Improved CLI

The new CLI is now more user-intuitive and developer-friendly. The new update includes:

  • Check pattern existence before glob: See the original issue. This will avoid potential errors encountered with Linux naming.
  • Expanded directories: See the pull request.
  • Error report changes: Prettier will print a “No matching files” for individual patterns.
  • Rearranged file order: When files are processed, they will now sort by order of the specified path. (In previous versions, files were arranged alphabetically.)

Changed default values

Prettier 2.0  changes the default values for the trailingCommaarrowParens, and endOfLine options.

  • Default value for trailingComma changed to es5 instead of none. Users can revert to the old configuration with { “trailingComma”: “none” }.
  • for arrowParens has been changed to default to always and will now wrap arrow function arguments with parenthesis
  • Changed the default value for endOfLine to of. Check the options documentation for information about configuration.

TypeScript update

With Prettier 2.0, TypeScript 3.8 syntax is now supported. The new additions include:

Prettier overview

Prettier isn’t just limited to JavaScript; it works with a large array of tools. Use it alongside TypeScript, Angular, Flow, JSON, CSS, GraphQL Schemas, Vue, Markdown, or YAML.

If that isn’t enough, community plugins expand its support to Java, Apex, PHP, Ruby, Swift, and more. (Note that some of these plugins are a work in progress.)

It removes original styling across your entire codebase and reprints your code line by line, doing all the heavy lifting for you.

From the documentation:

Prettier enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase because it disregards the original styling* by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

SEE ALSO: Experimental JavaScript bundler and minifier uses Go for speed

Upgrading to 2.0

Before you upgrade to version 2.0, check out the list of breaking changes and avoid broken code. Support for Node older than v10 has been dropped, as well as some API changes, new default values, and removed deprecated options and option values.

Install Prettier 2.0 with yarn or npm. Follow the documentation instructions here.

Brush up on the new features, try it out, and have some fun in the playground. Or, check out the source code on GitHub, open an issue, create a pull request, and help out.

Author
Sarah Schlothauer

Sarah Schlothauer

All Posts by Sarah Schlothauer

Sarah Schlothauer is an assistant editor for JAXenter.com. She received her Bachelor's degree from Monmouth University and is currently enrolled at Goethe University in Frankfurt, Germany where she is working on her Masters. She lives in Frankfurt with her husband and cat. She is also the editor for Conditio Humana, an online magazine about ethics, AI, and technology.

Leave a Reply

avatar
400