不要只是为您的代码做些毛-用Prettier修复它

Linting makes our lives easier because it tells us what’s wrong with our code. But how can we avoid doing the actual work that goes into fixing it?

Linting使我们的生活更轻松，因为它告诉我们代码有什么问题。 但是，如何避免进行修复工作呢？

Previously I wrote about linting, what it is, and how it makes your life easier. At the end, I actually included a way that you could automatically fix your code. So why am I writing this?

以前，我写过关于棉绒的介绍 ，它是什么，以及它如何使您的生活更轻松。 最后，我实际上提供了一种可以自动修复代码的方法。 那我为什么要写这个？

你是什​​么意思解决？ (What do you mean fix it?)

Before we roll into it, let’s hit this quick. Linters are powerful and provide an easy way to scan your code for syntax errors that could lead to bugs. Or they can simply help keep a codebase clean, healthy, and consistent. When run, it will show all the issues and let you go through each one individually to fix them.

在深入探讨之前，让我们快速开始吧。 Linters功能强大，可提供一种简便的方法来扫描代码以查找可能导致错误的语法错误。 或者，他们可以简单地帮助保持代码库干净，健康和一致。 运行时，它将显示所有问题，并让您逐一解决每个问题。

Taking that to the next level, some linters will actually allow you to pass in an argument to the command running the linter that allows it to fix it for you automagically. This means you don’t have to manually go through and make all of those little whitespace and semicolon (add them! 🔥) tweaks yourself!

将其带入一个新的水平，实际上一些短毛猫实际上将允许您将参数传递给运行短毛猫的命令，从而可以自动为您修复它。 这意味着您不必手动检查并调整所有这些小空格和分号(添加它们！🔥)。

那么，我还能做些什么来解决问题呢？ (So what more can I do to fix things?)

If you already use the fix option, thats a good start. But there are tools out there that have been developed specifically to tackle this problem beyond just a flag into your command. The one I’m going to cover is Prettier.

如果您已经使用了修复选项，那就是一个好的开始。 但是，有一些专门开发的工具可以解决此问题，而不仅仅是在您的命令中添加标记。 我要讲的是Prettier。

什么是漂亮？ (What is Prettier?)

Prettier pegs itself as “an opinionated code formatter." It takes an input of your code and outputs it in a consistent format stripping any of the original code style. It actually converts your code to a syntax tree, then rewrites it using the styles and rules you and Prettier provide together via your ESLint config and Prettier’s default rules.

Prettier认为自己是“自以为是的代码格式化程序”。它接收您的代码输入，并以一致的格式输出它，以剥离任何原始代码样式。它实际上将您的代码转换为语法树 ，然后使用这些样式和您和Prettier通过您的ESLint配置和Prettier的默认规则一起提供的规则。

You can easily use Prettier alone just to format your code, which works just fine. But if you combine this with an underlying ESLint process, you get both a powerful linter and a powerful fixer. I’m going to show you how to make those work together.

您可以轻松地单独使用Prettier来格式化您的代码，这很好用。 但是，如果将此与基础的ESLint流程结合使用，则将获得功能强大的Linter和强大的修复程序。 我将向您展示如何使它们一起工作。

Prettier入门 (Getting started with Prettier)

For this walkthrough, I’m going to assume that you have ESLint set up and configured in an application. Particularly, I’m going to pick up where I left off in my previous walkthrough where we installed ESLint to a React application.

在本演练中，我将假定您已在应用程序中设置并配置了ESLint。 特别是，我将在上一个演练中将我从ESLint安装到React应用程序中的上一个停下来的地方继续学习 。

Additionally of note, Prettier tells us right from the start that it's an opinionated code formatter. You should expect that it will format your code in a consistent way, but maybe a different way than you currently have it configured. But don’t fret! You can tweak this configuration.

另外值得注意的是，Prettier从一开始就告诉我们这是一个自以为是的代码格式化程序。 您应该期望它会以一致的方式设置代码格式，但可能与您当前配置的方式不同。 但是不要担心！ 您可以调整此配置。

So what are we starting off with? We already:

那么，我们从什么开始呢？ 我们已经：

• Have installed ESLint

  已安装ESLint

• Have added Babel as our parser

  已将Babel添加为我们的解析器

• Have added a plugin that includes React configurations

  添加了一个包含React配置的插件

Next, let’s get started by installing a few packages:

接下来，让我们开始安装一些软件包：

yarn add prettier prettier-eslint prettier-eslint-cli -D

Note: the command above is similar to using npm. If your project doesn't use yarn, swap out to npm as appropriate.

注意：上面的命令类似于使用npm 。 如果您的项目不使用yarn ，则视情况换成npm 。

Above, we’re installing:

上面，我们正在安装：

• prettier: core Prettier package and engine

  漂亮 ：核心漂亮的软件包和引擎

• prettier-lint: passes the Prettier result to ESLint to fix using your ESLint config

  prettier -lint ：将Prettier结果传递给ESLint以使用您的ESLint配置进行修复

• prettier-eslint-cli: helps Prettier and ESLint work together on various files across your project

  prettier-eslint-cli ：帮助Prettier和ESLint在项目中的各种文件上协同工作

And we’re installing them as a dev dependency, as we don’t need it outside development.

而且我们正在将它们安装为开发依赖项，因为我们不需要在开发之外使用它。

配置新的格式化程序 (Configuring your new formatter)

Now that our packages are installed, we can set up yarn to run this command for us.

现在已经安装了我们的软件包，我们可以设置yarn为我们运行此命令。

Previously, we set up a lint script to look like this in our package.json:

以前，我们在package.json设置了一个lint脚本，如下所示：

"scripts": {..."lint": "eslint . --ext .js"...
}

We’re going to leave that as it is, but we’ll do something similar and create a new script right next to it called format for our formatter Prettier:

我们要留下，因为它是，但我们会做同样的事情，并创建一个新的脚本就在旁边叫format为我们的格式更漂亮：

"scripts": {..."format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'","lint": "eslint . --ext .js"...
}

So what’s going on there? We’re:

那到底是怎么回事？ 我们是：

• Adding a new script called format, that we can run as yarn format

  添加一个名为format的新脚本，我们可以将其作为yarn format运行

• We’re utilizing our prettier-eslint-cli package to run the formatting for us

  我们正在利用我们prettier-eslint-cli软件包为我们运行格式化

• We’re passing in our ESLint config located next to our package.json in the root of the project (change this if it’s in a different location)

  我们在项目根目录中传入位于package.json旁边的ESLint配置(如果位于其他位置，请更改此设置)

• And finally, we’re telling prettier to write all files matching **/*.js, or any JS files it finds recursively through our project

  最后，我们告诉漂亮的是写所有与**/*.js匹配的文件，或通过我们的项目递归找到的所有JS文件。

The beauty here is that we're passing in our ESLint config to Prettier. This means we only have to maintain 1 config for both tools, but we still leverage the linting power of ESLint along with the formatting power of Prettier.

这里的好处是我们正在将我们的ESLint配置传递给Prettier。 这意味着我们只需要为这两个工具维护1个配置，但是我们仍然利用ESLint的整理功能以及Prettier的格式化功能。

运行格式化程序！ (Run your formatter!)

Now that we’re all set up, let’s run it! Run this following:

现在我们已经完成设置，让我们运行它吧！ 运行以下命令：

yarn format

and immediately, we see that it works:

马上，我们看到它起作用：

嘿，我的代码看起来不一样！ (Hey, my code looks different!)

As I mentioned earlier, Prettier tells us straight up, it’s an opinionated formatter. It ships with its own rules, sort of like its own ESLint config, so it will go through and make those changes as well.

正如我之前提到的，Prettier直截了当地告诉我们，这是一个自以为是的格式化程序。 它附带了自己的规则，有点像自己的ESLint配置，因此它也会进行更改。

Don’t abandon your code! Instead, you can review the changes, see if maybe it makes sense to keep it that way (it will be very consistent) or you can update your ESLint config (.eslintrc.js) to overwrite the rules you don’t like. This is also a good way to maybe learn some new things that you might not have expected to get caught before.

不要放弃您的代码！ 相反，您可以查看所做的更改，以使其保持这种方式(这将是非常一致的)是否有意义，或者可以更新ESLint配置( .eslintrc.js )以覆盖您不喜欢的规则。 这也是学习一些新事物的好方法，而这些新事物可能是您以前可能不会想到的。

那么，这会把我们留在哪里呢？ (So where does this leave us?)

If you’ve followed along so far, we now have two commands:

如果到目前为止，您现在有两个命令：

• lint: which will check your code for you and tell you what's wrong

  lint ：它将为您检查代码并告诉您什么地方不对

• format: will automatically try to fix the problems for you

  format ：将自动尝试为您解决问题

When using these in practice, your best bet is to always run format first to let it try to automatically fix anything it can. Then immediately run lint to catch anything Prettier wasn’t able to fix automatically.

在实践中使用它们时，最好的选择是始终始终运行format以使其尝试自动修复所有可能的问题。 然后立即运行lint来捕获Prettier无法自动修复的所有内容。

下一步是什么？ (What’s next?)

Now that we can format our code automatically, we should be able to fix our code automatically!

现在我们可以自动格式化代码了，我们应该能够自动修复代码！

Next time we’ll take this a step further and set up a git hook that will allow this to run before you commit. This means you won't ever have to worry about forgetting to run this again!

下次，我们将更进一步，并设置一个git钩子， git可以在提交之前运行。 这意味着您将不必担心忘记再次运行它！

• 🐦 Follow Me On Twitter

  Twitter在Twitter上关注我

• 📽️ Subscribe To My Youtube

  Subscribe️订阅我的YouTube

• ✉️ Sign Up For My Newsletter

  ✉️注册我的时事通讯

Originally published at https://www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/

最初发布于https://www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/

翻译自: https://www.freecodecamp.org/news/dont-just-lint-your-code-fix-it-with-prettier/