days
0
4
hours
0
8
minutes
2
9
seconds
4
2
search
No more manual labor

Prettier 1.0: You no longer have to waste time formatting your code

Gabriela Motroc
prettier 1.0

Emoticon looking at the time image via Shutterstock

Prettier may have started as an experiment but the wins of automated formatting have convinced quite a few people to give it a try. The 1.0 version of this JavaScript formatter is here and it comes bearing gifts.

Prettier was released in early 2017 and now 1.0 is here. According to the blog post announcing the release, this JavaScript formatter was inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. In short, it eliminates all original styling and guarantees consistency by parsing JavaScript into an AST and pretty-printing the AST.

Shift Reset LLC’s James Long offered an example:

//                                           60 chars -->   |
function makeComponent() : int {
  return {
    longCall() {
      complicatedFunction(importantArgument(), secondaryArgument())
      weirdStyle({ prop: 1 },
        1, 2, 3);
    },
    render() {
      const user = {
        name: "James"
      };
	  return 
<div>
        hello ${name}! JSX is <strong>supported</strong>
      </div>

;
    }
  };
}

 

/                                           60 chars -->   |
function makeComponent(): int {
  return {
    longCall() {
      complicatedFunction(
        importantArgument(),
        secondaryArgument()
      );
      weirdStyle({ prop: 1 }, 1, 2, 3);
    },
    render() {
      const user = { name: "James" };
      return (
        
<div>
           hello ${name}! JSX is <strong>supported</strong>
        </div>

      );
    }
  };
}

As you can see from this example, you can type anything into the editor and it will format it automatically. The maximum line length here is 60. The top editor is the raw source and the bottom is the formatted version.

Prettier 1.0: Overview

Prettier is now safe to use for production.

This tool is an opinionated code formatter; although the team originally thought that having no configuration like gofmt or refmt was the way to go, they realized that “this was going to hurt the adoption of prettier and people that would have benefited from it wouldn’t use it because it wasn’t printing code the way they want.”

As a result, they decided to provide options regarding basic aspects of the syntax that are of the nature of “if it doesn’t do X, no matter how good it is, I’m never going to use it”.

They are not going to introduce options for every type of syntax (only for more impactful things) but they have identified two major options that fall in that category: tabs vs spaces and semi vs no-semi so they decided to add them in prettier.

  • use-tabs
// Before
if (1) {
··console.log(); // Two spaces
}

// After
if (1) {
» console.log(); // One Tab!
}
  • no-semi
// Before
console.log();
[1, 2, 3].map(x => x + 1);

// After
console.log()
;[1, 2, 3].map(x => x + 1)

Things change

According to the blog post announcing the release, “a blessing and curse of printing from the AST is that we have to reprint all the parenthesis of the program. Our stance used to be to print only the minimum number of parenthesis that were needed for the program to be valid and execute the same way.”

Now, we’re willing to add parenthesis that are not strictly needed but help people understand the code.

Although there are a few cases where the tool outputs code that’s > 80 columns where there’s a possible way to write it without, all you need to do is carefully find places where it’s possible to break and ensure that it doesn’t negatively impact common cases.

Head on over to James Long’s blog and read his post about prettier 1.0.

Author
Gabriela Motroc
Gabriela Motroc is an online editor for JAXenter.com. Before working at S&S Media she studied International Communication Management at The Hague University of Applied Sciences.

Comments
comments powered by Disqus