Prettier 1.0:您不再需要浪费时间来格式化代码

发布于:2021-01-16 13:38:04

0

89

0

javascript Prettier

Prettier可能一开始只是个实验,但自动格式化的成功已经说服了很多人来尝试一下。这个JavaScript格式化程序的1.0版本在这里,它带来了礼物。

Prettier是在2017年初发布的,现在1.0已经发布了。根据宣布发布的博客文章,这个JavaScript格式化程序的灵感来自refmt,它对ES2017、JSX和Flow的语言特性提供了高级支持。简而言之,它消除了所有原始样式,并通过将JavaScript解析为AST并漂亮地打印AST来保证一致性。

Shift Reset LLC的James Long提供了一个例子:

//                                           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>         );     }   }; }

从该示例可以看到,您可以在编辑器中键入任何内容,它将自动设置其格式。这里的最大行长是60。顶部的编辑器是原始源,底部的是格式化版本。

Prettier 1.0: 概述

pretty tier现在可以安全地用于生产。

这个工具是一个固执己见的代码格式化器;尽管团队最初认为没有像gofmt或refmt这样的配置是可行的,但他们意识到“这将会损害对prettier的采用,而那些本可以从中受益的人也不会使用它,因为它没有按照他们想要的方式打印代码。”

因此,他们决定提供关于语法基本方面的选项,其本质是“如果它不能做X,无论它有多好,我都不会使用它”。

他们不会为每一种类型的语法都引入选项(只针对更有影响力的东西),但他们已经确定了两个主要的选项属于这一类别:制表符vs空格符和semi vs no-semi,所以他们决定把它们添加到更漂亮的语法中。

// Before if (1) { ··console.log(); // Two spaces }   // After if (1) { » console.log(); // One Tab! }
// Before console.log(); [1, 2, 3].map(x => x + 1);   // After console.log() ;[1, 2, 3].map(x => x + 1)

事情的变化

根据宣布发布的博客文章,“来自AST的打印有利有弊的是,我们不得不重新打印程序中的所有括号。我们过去的立场是只打印程序有效所需的最小数量的括号,并以相同的方式执行。”

现在,我们愿意添加一些并不严格需要的括号,但可以帮助人们理解代码。

尽管在一些情况下,工具输出的代码是> 80列,但有可能不使用这种方法编写代码,您需要做的只是仔细寻找可能出错的地方,并确保它不会对常见情况产生负面影响。