介绍 (Introduction)

When writing JavaScript with an editor such as Visual Studio Code, there are a number of ways you can ensure your code is syntactically correct and in line with current best practices. For example, it is possible to integrate a linter such as ESLint into your Visual Studio Code setup in order to ensure code integrity.

使用诸如Visual Studio Code之类的编辑器编写JavaScript时，可以通过多种方法来确保代码在语法上正确无误并符合当前的最佳实践。 例如，可以将诸如ESLint之类的linter集成到您的Visual Studio Code安装程序中，以确保代码完整性。

ESLint can both format your code and analyze it to make suggestions for improvement. It is also configurable, so you can customize how your code is evaluated.

ESLint可以格式化您的代码并对其进行分析，以提出改进建议。 它也是可配置的，因此您可以自定义代码的评估方式。

In this tutorial, you will set up ESLint on Visual Studio Code and implement a custom configuration to deal with log statements in debugging.

在本教程中，您将在Visual Studio Code上设置ESLint，并实现自定义配置以处理调试中的日志语句。

项目设置 (Project Setup)

Let’s get started with a demo project. We will write one JavaScript file to start:

让我们开始一个演示项目。 我们将编写一个JavaScript文件开始：

From a formatting perspective, there are several things that could be improved:

从格式化的角度来看，有几件事可以改进：

• Inconsistent use of quotes
  引号使用不一致
• Inconsistent use of semicolons
  分号用法不一致
• Spacing
  间距

With this JavaScript file in place, we can now initialize this project as an NPM project by running npm init and accepting 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 set up 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 you want to follow: do you want to start fresh or use an existing configuration template? We will rely on a widely-used configuration template from Airbnb:

一个问题是您要遵循的样式指南：您要重新开始还是使用现有的配置模板？ 我们将依靠Airbnb广泛使用的配置模板：

You will also be asked to install extra packages; choose yes:

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

After that finishes, you should have a brand new .eslintrc file in your project:

完成之后，您的项目中应该有一个全新的.eslintrc文件：

ESLint在行动 (ESLint in Action)

With this configuration file in place, you might be surprised that it still doesn’t do anything for you. If you open your JavaScript file, it looks the same:

有了此配置文件后，您可能会惊讶于它仍然无法为您做任何事情。 如果打开JavaScript文件，则外观相同：

To integrate ESLint into Visual Studio Code, we will need to install the ESLint extension for Visual Studio Code. Click Install once you have located the extension:

要将ESLint集成到Visual Studio Code中，我们将需要为Visual Studio Code安装ESLint扩展。 找到扩展后，单击“ 安装 ”：

Now, if you look at the JavaScript file again, you will notice colorful squiggles indicating errors. These markers are color-coded based on severity. Let’s look at a few of the issues:

现在，如果您再次查看JavaScript文件，您将注意到指示错误的彩色花键。 这些标记根据严重性进行颜色编码。 让我们看一些问题：

On line one, ESLint suggests single quotes instead of double quotes:

在第一行，ESLint建议使用单引号而不是双引号：

Another error occurs on line 5, with a message indicating that we should not leave console.log() messages in the code:

第5行发生另一个错误，出现一条消息，指示我们不应在代码中留下console.log()消息：

Finally, on line 7, there is a message saying that we have defined a variable ( an arrow function) that is not used. If the code isn’t being used anywhere, then we should eliminate it. In this way, ESLint helps us find and remove unnecessary code.

最后，在第7行，有一条消息说我们已经定义了一个未使用的变量(箭头函数)。 如果未在任何地方使用该代码，则应消除它。 这样，ESLint可以帮助我们查找和删除不必要的代码。

保存时格式化 (Formatting on Save)

With this knowledge of ESLint messages in mind, we can modify VS Code to tell ESLint to fix any issues (mainly formatting) every time we save. To open the settings menu, click on the gear icon in the lower left, and then choose Settings.

考虑到对ESLint消息的了解，我们可以修改VS Code，以告知ESLint每次保存时都解决任何问题(主要是格式设置)。 要打开设置菜单，请点击左下角的齿轮图标，然后选择设置 。

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

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

Now, save your JavaScript file. You should see some changes, including fewer squiggles. Some of the formatting issues that we have fixed include:

现在，保存您JavaScript文件。 您应该看到一些变化，包括更少的花鼓。 我们已解决的一些格式问题包括：

• Consistent use of single quotes
  一致使用单引号
• Proper indentation inside of the function
  函数内部正确缩进
• Consistent use of semicolons
  一致使用分号

自定义ESLint配置 (Customizing ESLint Configuration)

There are still a few squiggly messages left, including one about console.log() messages. In some cases, removing these may not be a priority: if, for example, we are working on a Node app and want to leave log statements in for debugging later. We can customize the ESLint configuration file to allow this.

仍然有一些混乱的消息，包括有关console.log()消息的消息。 在某些情况下，删除这些内容可能不是优先事项：例如，如果我们正在开发Node应用程序，并希望保留日志语句以供以后调试。 我们可以自定义ESLint配置文件以允许这样做。

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

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

VS Code can help you find rules using intellisense, which provides suggestions as you type. For example, by typing console you will see the no-console option suggested:

VS Code可以帮助您使用智能感知来查找规则，在您键入时会提供建议。 例如，通过键入console您将看到建议的“ no-console选项：

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

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

• Error
  错误
• Off
  关
• Warn
  警告

“Error” will produce a red squiggly, “Warn” a yellow one, and “Off” nothing. We can turn this off in order to continue working with log statements in debugging mode:

“错误”将产生红色波浪状，“警告”将产生黄色，而“关闭”则无任何变化。 我们可以关闭此功能，以便在调试模式下继续使用日志语句：

This removes the error messages from our log statements:

这将从我们的日志语句中删除错误消息：

Some rules are a bit more complicated, and require multiple pieces of information, a severity level, and a value. For example, when you need to choose between single and double quotes, you must pass in both the chosen type of quotes and the severity levels, putting both strings in an array:

一些规则稍微复杂一些，并且需要多条信息，严重性级别和一个值。 例如，当您需要在单引号和双引号之间进行选择时，必须同时传递所选的引号类型和严重性级别，并将两个字符串都放入数组中：

结论 (Conclusion)

This tutorial provides an introduction to some of what you can do with linting on Visual Studio Code. These linting tools can help create time for more complex tasks by automating and simplifying how you verify syntax and best practices.

本教程提供了有关在Visual Studio Code上进行linting的操作的简介。 这些整理工具可以自动化并简化验证语法和最佳做法的方式，从而有助于为更复杂的任务创造时间。

翻译自: https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code