使用Prettier格式化代码

• Introduction to Prettier

  漂亮的入门

• Less options

  更少的选择

• Difference with ESLint

  与ESLint的区别

• Installation

  安装

• Prettier for beginners

  适合初学者

漂亮的入门 (Introduction to Prettier)

Prettier is an opinionated code formatter.

漂亮的是一个自以为是的代码格式化程序。

It supports a lot of different syntax out of the box, including:

它支持许多不同的现成语法，包括：

• JavaScript
  JavaScript

• Flow, TypeScript

  流， TypeScript

• CSS, SCSS, Less
  CSS，SCSS，更少

• JSX

  JSX

• GraphQL

  GraphQL

• JSON
  JSON格式
• Markdown
  降价促销

and with plugins you can use it for Python, PHP, Swift, Ruby, Java and more.

并且带有插件，您可以将其用于Python，PHP，Swift，Ruby，Java等。

It integrates with the most popular code editors, including VS Code, Sublime Text, Atom and more.

它与最流行的代码编辑器集成在一起，包括VS Code，Sublime Text，Atom等。

Prettier is hugely popular, as in February 2018 it has been downloaded over 3.5 million times.

Prettier非常受欢迎，截至2018年2月，它已被下载超过350万次。

The most important links you need to know more about Prettier are

您需要进一步了解Prettier的最重要链接是

• https://prettier.io/

  https://prettier.io/

• https://github.com/prettier/prettier

  https://github.com/prettier/prettier

• https://www.npmjs.com/package/prettier

  https://www.npmjs.com/package/prettier

更少的选择 (Less options)

I learned Go recently and one of the best things about Go is gofmt, an official tool that automatically formats your code according to common standards.

我最近学习了Go，Go的最好的功能之一就是gofmt ，这是一个官方工具，可以根据通用标准自动格式化代码。

95% (made up stat) of the Go code around looks exactly the same, because this tool can be easily enforced and since the style is defined for you by the Go maintainers, you are much more likely to adapt to that standard instead of insisting on your own style. Like tabs vs spaces, or where to put an opening bracket.

95％左右的Go代码看起来完全一样，因为此工具可以轻松实施，并且由于Go维护人员为您定义了样式，因此您更有可能适应该标准，而不必坚持根据自己的风格。 如制表符与空格，或在何处放置左括号。

This might sound like a limitation, but it’s actually very powerful. All Go code looks the same.

这听起来像一个限制，但实际上非常强大。 所有Go代码看起来都一样。

Prettier is the gofmt for the rest of the world.

漂亮的gofmt是世界其他地方的东西 。

It has very few options, and most of the decisions are already taken for you so you can stop arguing about style and little things, and focus on your code.

它只有很少的选择，并且大多数决定已经为您做出，因此您可以停止争论样式和小事，而专注于代码。

与ESLint的区别 (Difference with ESLint)

ESLint is a linter, it does not just format, but it also highlights some errors thanks to its static analysis of the code.

ESLint是一个linter ，不仅格式化，而且由于对代码进行静态分析，因此还突出了一些错误。

It is an invaluable tool and it can be used alongside Prettier.

它是一种宝贵的工具，可以与Prettier一起使用。

ESLint also highlights formatting issues, but since it’s a lot more configurable, everyone could have a different set of formatting rules. Prettier provides a common ground for all.

ESLint还强调了格式设置问题，但由于它的可配置性要强得多，因此每个人都可能有不同的格式设置规则集。 漂亮的东西为所有人提供了共同点。

Now, there are a few things you can customize, like:

现在，您可以自定义一些内容，例如：

• the tab width
  标签宽度
• the use of single quotes vs double quotes
  单引号与双引号的使用
• the line columns number
  行列号
• the use of trailing commas
  尾随逗号的使用

and some others, but Prettier tries to keep the number of those customizations under control, to avoid becoming too customizable.

以及其他一些，但是Prettier试图控制这些自定义项的数量，以避免过于自定义。

安装 (Installation)

Prettier can run from the command line, and you can install it using Yarn or npm.

Prettier可以从命令行运行，您可以使用Yarn或npm进行安装。

Another great use case for Prettier is to run it on PRs for your Git repositories, for example on GitHub.

Prettier的另一个很好用例是在您的Git存储库的PR上运行它，例如在GitHub上 。

If you use a supported editor the best thing is to use Prettier directly from the editor, and the Prettier formatting will be run every time you save.

如果使用受支持的编辑器，最好的做法是直接从编辑器使用Prettier，并且每次保存时都会运行Prettier格式。

For example here is the Prettier extension for VS Code: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

例如，这是VS Code的Prettier扩展名： https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

适合初学者 (Prettier for beginners)

If you think Prettier is just for teams, or for pro users, you are missing a good value proposition of this tool.

如果您认为Prettier仅适用于团队或专业用户，那么您会错过此工具的价值主张。

A good style enforces good habits.

好的风格会养成良好的习惯。

Formatting is a topic that’s mostly overlooked by beginners, but having clean and consistent formatting is key to your success as a new developer.

格式化是一个初学者通常忽略的主题，但是拥有清晰一致的格式化是成功成为新开发人员的关键。

Also, even if you started using JavaScript 2 weeks ago, with Prettier your code - style wise - will look just like code written from a JavaScript Guru writing JS since 1998.

同样，即使您在两周前开始使用JavaScript ，使用Prettier时，您的代码(在样式方面也是如此)看起来就像是自1998年以来由JavaScript Guru编写JS的代码一样。

翻译自: https://flaviocopes.com/prettier/