Prettier 一个风格独特的代码格式化程序

admin 2025-02-19 12:06:1866 187

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的Prettier是一个固执己见的代码格式化程序。它通过解析您的代码并使用自己的规则重新打印它来执行一致的样式，这些规则考虑了最大行长度，并在必要时包装代码。

什么是Prettier？

Prettier是一个固执己见的代码格式化程序，支持：

JavaScript(includingexperimentalfeatures)

JSX

Angular

Vue

Flow

TypeScript

CSS,Less,andSCSS

HTML

Ember/Handlebars

JSON

GraphQL

Markdown,includingGFMandMDX

YAML

Prettier通过考虑行长来获取您的代码并从头开始重新打印它。

例如，采用以下代码：

foo(arg1,arg2,arg3,arg4);

它适合一行，所以它会保持原样。但是，我们都遇到过这种情况：

foo(reallyLongArg(),omgSoManyParameters(),IShouldRefactorThis(),isThereSeriouslyAnotherOne());

突然之间，我们之前调用函数的格式就崩溃了，因为它太长了。Prettier会为你做这样的工作：

foo(reallyLongArg(),omgSoManyParameters(),IShouldRefactorThis(),isThereSeriouslyAnotherOne());

Prettier在整个代码库中强制执行一致的代码样式（即不会影响AST的代码格式），因为它忽略了原始样式*通过解析它并使用其自己的规则重新打印解析的AST，这些规则采用最大行长度考虑到，必要时包装代码。

基本原理

正确性

Prettier的第一个要求是输出与格式化之前具有完全相同行为的有效代码。请报告Prettier未能遵循这些正确性规则的任何代码——这是一个需要修复的错误！

字符串

双引号还是单引号？Prettier选择逃生次数最少的那个。"It'sgettin'better!"，不是'It\'sgettin\'better!'。如果平局或字符串不包含任何引号，Prettier默认使用双引号（但可以通过singleQuote选项更改）。

JSX有自己的引号选项：jsxSingleQuote。JSX源于HTML，其中属性引号的主要用途是双引号。即使源代码使用单引号，浏览器开发工具也始终使用双引号显示HTML，从而遵循此约定。一个单独的选项允许对JS使用单引号，对"HTML"(JSX)使用双引号。

空行
事实证明，空行很难自动生成。Prettier采用的方法是保留原始源代码中的空行。还有两个附加规则：

Prettier将多个空行折叠成一个空行。

块（和整个文件）开头和结尾的空行被删除。（不过，文件总是以一个换行符结尾。）

多行对象

默认情况下，Prettier的打印算法在适合的情况下将表达式打印在一行上。但是，对象在JavaScript中用于许多不同的事情，有时如果它们保持多行，它确实有助于提高可读性。例如，参见对象列表、嵌套配置、样式表和键控方法。我们无法为所有这些情况找到一个好的规则，所以如果{原始源代码中的第一个键和第一个键之间有换行符，Prettier会保持对象多行。这样做的结果是长的单行对象会自动展开，但短的多行对象永远不会折叠。
提示：如果您有一个多行对象，您想合并成一行：

constuser={name:"JohnDoe",age:30,};

您需要做的就是在以下内容之后删除换行符{：

constuser={name:"JohnDoe",age:30};

然后运行Prettier：

constuser={name:"JohnDoe",age:30};

如果您想再次使用多行，请在之后添加换行符{：

constuser={name:"JohnDoe",age:30};

然后运行Prettier：

constuser={name:"JohnDoe",age:30,};

JSX

当涉及JSX时，Prettier打印的内容与其他JS相比略有不同：

functiongreet(user){returnuser?`Welcomeback,${}!`:"Greetings,traveler!Signuptoday!";}functionGreet({user}){return(div{user?(pWelcomeback,{}!/p):(pGreetings,traveler!Signuptoday!/p)}/div);}

首先，很多人已经将他们的JSX包裹在括号中，尤其是在return语句中。Prettier遵循了这种常见的风格。

其次，备用格式使编辑JSX更容易。很容易留下分号。与普通JS不同，JSX中剩余的分号最终会以纯文本形式显示在您的页面上。

divpGreetings,traveler!Signuptoday!/p;{/*--Oops!*/}/div

注释

通常，将注释放在自己的行而不是行尾时，您会得到最好的结果。更喜欢//eslint-disable-next-line.//eslint-disable-line

请注意，由于Prettier将表达式分成多行，因此有时需要手动移动“魔术注释”，例如eslint-disable-next-lineand。$FlowFixMe

想象一下这段代码：//eslint-disable-next-lineno-evalconstresult=safeToEval?eval(input):fallback(input);

然后你需要添加另一个条件：

//eslint-disable-next-lineno-evalconstresult=?eval(input):fallback(input);

Prettier会将上述内容变为：

//eslint-disable-next-lineno-evalconstresult=?eval(input):fallback(input);

constresult=//?eval(input):fallback(input);

安装Prettier

首先，在本地安装Prettier：

npminstall--save-dev--save-exactprettier

然后，创建一个空配置文件，让编辑器和其他工具知道您正在使用Prettier：

echo{}.

接下来，创建一个.prettierignore文件，让PrettierCLI和编辑器知道哪些文件不能格式化。这是一个例子：

#Ignoreartifacts:buildcoverage

现在，使用Prettier格式化所有文件：

npxprettier--write.

prettier--write.非常适合格式化所有内容，但对于大型项目可能需要一点时间。你可以运行prettier--writeapp/格式化某个目录，或者prettier--writeapp/components/格式化某个文件。或者使用globlikeprettier--write"app/**/*."格式化目录中的所有测试（请参阅fast-glob以了解支持的glob语法）。

如果您有CI设置，请在其中运行以下命令以确保每个人都运行Prettier。这避免了合并冲突和其他协作问题！