在VS Code中使用ESLint进行整理和格式化

Tooling for JavaScript is too good to not take advantage of, especially when paired with Visual Studio Code! In a recent article, I posted about Code Formatting with Prettier in Visual Studio Code to help you automatically format your code. ESLint can do that and more!

JavaScript工具太好了，无法利用，特别是当与Visual Studio Code配对时！ 在最近的一篇文章中，我发布了有关在Visual Studio Code中使用Prettier进行代码格式化的信息，以帮助您自动格式化代码。 ESLint可以做到的甚至更多！

ESLint can format your code as well as tell you how to make it better!

ESLint可以格式化您的代码，并告诉您如何使其变得更好！

Not only can ESLint format your code, but it can also analyze it and make suggestions on how to improve it. ESLint is configurable, so you can choose the formatting issues you care about. Let's take a look!

ESLint不仅可以格式化您的代码，还可以对其进行分析并提出改进建议。 ESLint是可配置的，因此您可以选择您关心的格式化问题。 让我们来看看！

项目设置 ( Project Setup )

Let's get started with a simple project. I've got one JavaScript file to start. From a formatting perspective, notice there are several things that don't look so good.

让我们从一个简单的项目开始。 我要启动一个JavaScript文件。 从格式化的角度来看，请注意有些事情看起来不太好。

• inconsistent use of quotes
  引号使用不一致
• inconsistent use of semi colons
  半冒号用法不一致
• spacing
  间距

With the JavaScript file in place, now we need to initialize this project as an NPM project by running npm init. I'm going to accept all of the default values.

有了JavaScript文件之后，现在我们需要通过运行npm init将该项目初始化为NPM项目。 我将接受所有默认值。

ESLint设置 ( ESLint Setup )

With an NPM project that contains a JavaScript file in place, we can start to setup ESLint. First, we will need to install it globally on our machine by running npm install -g eslint.

通过一个包含JavaScript文件的NPM项目，我们可以开始设置ESLint。 首先，我们需要通过运行npm install -g eslint将其全局安装到我们的计算机上。

Now, we can use that package to initialize an ESLint configuration by running eslint --init. You will be prompted with a few different questions about your project to create the best configuration.

现在，我们可以使用该软件包通过运行eslint --init来初始化ESLint配置。 系统将提示您有关项目的几个不同问题，以创建最佳配置。

One question will be what style guide do you want to follow. In other words, do you want to start fresh or use an existing configuration template. An incredibly popular one is from Airbnb, which I've chosen below.

一个问题将是您要遵循什么样式指南。 换句话说，您要重新开始还是使用现有的配置模板。 来自Airbnb的是一款非常受欢迎的产品，我在下面选择了它。

You will also be asked to install extra packages. Choose yes.

您还将被要求安装额外的软件包。 选择是。

After that finishes, you should have a brand new .eslintrc file in your project. Mine is a JSON file based on my answer during initialization.

完成之后，您的项目中应该有一个全新的.eslintrc文件。 我的是一个基于我在初始化期间的回答的JSON文件。

ESLint在行动 ( ESLint in Action )

With our configuration file in place, you might be surprised that it still doesn't do anything for us. If you open the JavaScript file back up, it still looks the same.

使用我们的配置文件后，您可能会惊讶于它仍然对我们没有任何帮助。 如果您打开JavaScript文件进行备份，则看起来仍然相同。

To integrate ESLint into Visual Studio Code, we will need to install the ESLint extension for Visual Studio Code.

要将ESLint集成到Visual Studio Code中，我们需要为Visual Studio Code安装ESLint扩展。

Now, if you look at the JavaScript file again, notice all of the colorful squigglies. The suigglies are color coded based on severity. Let's look a few of the issues.

现在，如果您再次查看JavaScript文件，请注意所有五颜六色的曲线。 根据严重性对下陷进行颜色编码。 让我们看一些问题。

On line one, it tells me that I should be using single quotes instead of double quotes. We'll fix this in a second.

在第一行，它告诉我应该使用单引号而不是双引号。 我们将在一秒钟内解决此问题。

Next on line 5, I get a message saying that I should't leave console.log() messages in the code.

接下来的第5行，我收到一条消息，说我不应该在代码中保留console.log（）消息。

Lastly, on line 7, I get a message saying that I've defined a variable ( an arrow function) that is never being used. If the code isn't being used anywhere, then we should get rid of it. These kind of messages are great for finding and removing dead code!

最后，在第7行，我收到一条消息，说我已经定义了一个永远不会使用的变量（箭头函数）。 如果该代码未在任何地方使用，那么我们应该摆脱它。 这些消息非常适合查找和删除无效代码！

保存时格式化 ( Formatting on Save )

Setup ESLint to format your code every time you save!

设置ESLint以便每次保存时格式化代码！

Now that we have read through some of the squiggly messages, we can tweak VS Code to tell ESLint to fix any issues (mainly formatting) it can every time we save. To open the settings menu, you can hit the gear icon in the lower left, then choose settings.

现在，我们已经阅读了一些混乱的消息，我们可以调整VS Code，告诉ESLint每次保存时可以解决的所有问题（主要是格式设置）。 要打开设置菜单，您可以点击左下方的齿轮图标，然后选择设置。

WIthin the settings menu, you can search eslint. In the results you should see a checkbox for ESLint: Auto Fix on Save. Make sure this is checked.

在设置菜单中，您可以搜索eslint 。 在结果中，您应该看到ESLint复选框：保存时自动修复。 确保已选中。

Now, back in the JavaScript file, save it. You should see some changes and a few of the squigglies are gone. Here's a few of the formatting things that are fixed.

现在，返回JavaScript文件，保存它。 您应该看到一些更改，并且一些弯曲消失了。 这是一些固定的格式设置。

• consistent use of single quote
  一致使用单引号
• proper indentation inside of the function
  函数内部的适当缩进
• consistent use of semi colons
  一致使用半冒号

定制ESLint配置 ( Customizing ESLint Configuration )

You can fully customize your ESLint configuration to you and your teams needs!

您可以根据自己和团队的需要完全自定义ESLint配置！

Needless to say, we still have a few squiggly messages left, one about console.log() messages. Let's say we don't really care about that because this is a Node app and we want to leave log statements in for debugging later on. We can customize the ESLint configuration file to allow this.

不用说，我们还剩下一些混乱的消息，其中一个关于console.log（）消息。 可以说我们并不在乎，因为这是一个Node应用程序，我们希望保留日志语句以供以后调试。 我们可以自定义ESLint配置文件以允许这样做。

You can customize your configuration by going down to the rules section. You will need to input key -> value pairs, where the key is the name of the rule.

您可以通过转到“规则”部分来自定义配置。 您将需要输入键->值对，其中键是规则的名称。

VS Code is awesome because it provides you intellisense when you start typing rule names. For example, I start to type console and I see the no-console option pop up;

VS Code很棒，因为它在您开始键入规则名称时为您提供了智能感知。 例如，我开始键入console，然后看到no - console选项弹出。

The value then will be the severity level of the issue. You have three choices.

该值将成为问题的严重性级别。 您有三个选择。

• error
  错误
• off
  关
• warn
  警告

As you might expect, error leads to a red squiggly, warn to a yellow one, and off to nothing. Let's turn this rule off.

如您所料，错误会导致红色蠕变，警告为黄色，然后变为零。 让我们关闭此规则。

Yay! No more squigglies undernearth our log statements!

好极了！ 我们的日志语句下方不再有弯弯曲曲！

Some rules are a bit more complicated where they need two different pieces of information, a severity level and a value. One example is choosing between single and double quotes. To pass in both the chosen type of quotes and the severity levels, you can put both strings in an array like so.

有些规则需要两个不同的信息，即严重性级别和值，因此有些复杂。 一个示例是在单引号和双引号之间进行选择。 要同时传递所选的引号类型和严重性级别，可以将两个字符串都放入数组中，如下所示。

结语 ( Wrap Up )

I love getting to write about the tooling for JavaScript, especially in tandem with Visual Studio Code. It's so exciting that tools can automate the really boring part of your code while also keeping you in check with best practices. I hope this helps you write better code faster!

我喜欢撰写有关JavaScript工具的文章，尤其是与Visual Studio Code一起使用时。 令人兴奋的是，工具可以自动执行代码中非常无聊的部分，同时还可以确保您掌握最佳实践。 我希望这可以帮助您更快地编写更好的代码！

翻译自: https://scotch.io/tutorials/linting-and-formatting-with-eslint-in-vs-code