什么是棉绒，它如何节省您的时间？

One of the biggest challenges in software development is time. It’s something we can’t easily get more of, but linting can help us make the most out of the time we have.

时间是软件开发中最大的挑战之一。 这是我们无法轻易获得的更多东西，但是棉绒可以帮助我们充分利用自己的时间。

那么什么是棉绒呢？ (So what is linting?)

lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. https://en.wikipedia.org/wiki/Lint(software)

lint或linter ，是一种分析源代码以标记编程错误，bug，样式错误和可疑结构的工具。 https://zh.wikipedia.org/wiki/林特(软件)

Simply put, a linter is a tool that programmatically scans your code with the goal of finding issues that can lead to bugs or inconsistencies with code health and style. Some can even help fix them for you!

简而言之，lint是一种以编程方式扫描您的代码的工具，旨在发现可能导致错误或代码健康状况和样式不一致的问题。 有些甚至可以帮您修复它们！

Take for instance, the following example:

例如，以下示例：

const test = 'I am a test';
console.log(`Test: ${test}`);
const test = 'Another one.';

We’re declaring the constant test twice, which our javascript engine won’t be happy about. With the proper linter settings and watch configuration, instead of getting caught later as an error when the code runs, you’ll immediately get an error through your linter running in the background:

我们将两次声明常数test ，这对于我们的javascript引擎不会感到满意。 有了正确的lint设置和监视配置，您不会立即在后台运行lint时得到错误，而不会在代码运行时稍后被捕获为错误：

10:9  error  Parsing error: Identifier 'test' has already been declared8 |   const test = 'I am a test';9 |   console.log(`Test: ${2}`);
> 10 |   const test = 'Another one.';|         ^

It might be pretty obvious that you have 2 of the same const declarations given this is only 3 lines, but in a more complex application, this can save tons of time having to hunt down a pesky bug that’s not always obvious.

很显然，由于只有3行，所以您有2个相同的const声明，但是在更复杂的应用程序中，这可以节省大量时间来寻找讨厌的bug(这并不总是很明显)。

棉绒能提供什么帮助？ (What all can linting help with?)

Lots of things, including but not limited to:

很多东西 ，包括但不限于：

• Flagging bugs in your code from syntax errors
  标记语法错误中的错误
• Giving you warnings when code may not be intuitive
  在代码可能不直观时发出警告
• Providing suggestions for common best practices
  提供常见最佳做法的建议
• Keeping track of TODO’s and FIXME’s
  跟踪TODO和FIXME
• Keeping a consistent code style
  保持一致的代码风格

Most things you can think of probably already exist in one form or another, and if not, you can even create custom rules that fit your needs!

您可以想到的大多数事情可能已经以一种或另一种形式存在 ，如果没有，您甚至可以创建适合您需求的自定义规则 ！

这实际上有什么帮助？我为什么要关心呢？ (How is this actually helping or why should I care?)

Probably the biggest overlying theme of the list above is the fact that these issues will be called out immediately. No longer will these issues creep up on you in the middle of running your app or give someone anxiety during a code review. No longer will you and your reviewer endlessly fight passive aggressively through the comments about whether or not to include a semicolon at the end of JS statements (you should 🔥).

上面列表中最大的潜在主题是这些问题将立即被消除。 在运行应用程序的过程中，这些问题不再会蔓延到您身上，也不会在代码审查过程中让您感到焦虑。 您和您的审阅者将不再通过有关是否在JS语句末尾添加分号的注释来进行无休止的消极战斗( 您应该 🔥)。

All of those moments that stop you from being productive because of a silly syntax error or the micro-interactions you and your teammates have during a review take time. They add up and end up taking away the time you can spend fixing another bug or developing the next great feature of your product.

所有这些由于愚蠢的语法错误或您和您的队友在审阅过程中发生的微交互而使您无法工作的时刻都需要花费时间。 他们累加起来，最终浪费了您花费时间修复另一个错误或开发产品的下一个强大功能的时间。

那我该如何开始呢？ (So how do I actually get started?)

Even though there are linters for most, if not all, other mainstream languages, for the purpose of this post, I’m going to focus on Javascript. The same principles apply, but the tooling may be a bit different.

就本文而言，即使大多数(如果不是全部)其他主流语言都存在问题，我还是将重点放在Javascript上。 适用相同的原则，但工具可能有所不同。

I’m going to run through how you can get set up for basic linting in a React app. You can easily follow along by spinning up your own React app or using my Gatsby starter: https://github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

我将介绍如何在React应用程序中设置基本的棉绒。 您可以通过旋转自己的React应用程序或使用我的Gatsby入门程序轻松地进行跟踪： https : //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

你的林特 (Your Linter)

To get started, we first need a linter. Probably the most popular in the Javascript world is ESLint. Your linter will actually be the engine for defining rules and parsing your files to test against. ESLint is available as an npm package by itself and once installed, out of the box it allows you to set up a basic configuration file and hit the ground running with some command line tools.

首先，我们首先需要一头短绒。 ESLint 可能是 Java语言世界中最受欢迎的 。 您的linter实际上将是定义规则和解析要测试的文件的引擎。 ESLint本身可作为npm软件包提供， 一旦安装 ，即开即用，它使您可以设置基本配置文件并使用某些命令行工具运行。

Let’s first add our ESLint dependency:

首先添加我们的ESLint依赖项：

yarn add eslint -D

We’re installing this as a devDependency (hence the -D flag), because this isn’t something our application needs to run. After it’s successfully installed, let’s add it to our package.json as a script:

我们将其安装为devDependency (因此devDependency -D标志)，因为这不是我们的应用程序需要运行的东西。 成功安装后，让我们将其作为脚本添加到package.json中：

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

In the above, we’re running our linter on the entire project directory on any file that has an extension of .js. If you're working with a large project with many file types, maybe even some you don't want linted, you can change that flag or be more specific with other options.

在上面，我们在扩展名为.js任何文件上的整个项目目录上运行linter。 如果您正在处理具有许多文件类型的大型项目，甚至可能不需要删除某些文件类型，则可以更改该标志，或者使用其他选项进行更具体的描述 。

To support ESLint, we’ll need to do one more thing. Let’s add a file at the root of our project (probably where your package.json is) called .eslintrc.js and make the contents of the file simply:

为了支持ESLint，我们还需要做一件事。 让我们在项目的根目录(可能是package.json所在的位置)添加一个名为.eslintrc.js的文件，并使文件内容简单：

module.exports = {};

Once you’re ready, you can run yarn lint and… get an error.

准备就绪后，就可以运行yarn lint ，…报错。

This is okay, and expected in our project, so let’s move on.

没关系，并且在我们的项目中可以预期，所以让我们继续。

您的解析器 (Your Parser)

A common tool in the chain for Javascript developers is Babel, which allows you to write code with features that may not be supported in all browsers, such as using arrow functions, that are available in ES6, and other conventions like importing files via import.

Babel是Java开发人员链中常用的工具，它使您可以编写具有并非所有浏览器都支持的功能的代码，例如使用ES6中可用的箭头功能 ，以及通过import导入文件等其他约定。

The code you write may already run through Babel to work in a browser, but that doesn’t apply to ESLint by default, so ESLint allows you to specify a parser that allows the linting processing to look at the same code as your browser sees. In this case we’ll want to use Babel’s ESLint parser that’s made available to us.

您编写的代码可能已经通过Babel运行，可以在浏览器中运行，但是默认情况下不适用于ESLint，因此ESLint允许您指定一个解析器，该解析器允许lint处理查看与您浏览器所见相同的代码。 在这种情况下，我们将要使用向我们提供的Babel ESLint解析器。

To set that up, we’ll want to first install our dependency:

要进行设置，我们首先要安装依赖项：

yarn add babel-eslint -D

Typically if you're using babel-eslint you'll want to make sure babel is installed next to it, but in our case, Gatsby already uses babel, so we don’t necessarily need to add it. After that’s set up, we’ll want to update our .eslintrc.js config file with some new options:

通常，如果您正在使用babel-eslint ，则需要确保在其旁边安装了babel ，但是在我们的情况下，Gatsby已经使用了babel ，因此我们不一定需要添加它。 设置完之后，我们将要使用一些新选项来更新.eslintrc.js配置文件：

module.exports = {"env": {"browser": true,"node": true,"es6": true},"parser": "babel-eslint"
};

Here, we’re letting ESLint know that our environment will be run in node (Gatsby’s precompiling), inside the browser (the app), and it will use ES6. This helps ESLint know how to run your code. Additionally, we want to set up our parser to be babel-eslint.

在这里，我们让ESLint知道我们的环境将在浏览器(应用程序)内部的节点(Gatsby的预编译)中运行，并且它将使用ES6。 这可以帮助ESLint知道如何运行您的代码。 另外，我们希望将解析器设置为babel-eslint 。

Once we’re ready to go, run yarn lint again and… well nothing really happened.

一旦我们准备好yarn lint再次运行yarn lint ，……实际上什么也没发生。

This is still expected, as we don’t have any rules set up!

由于我们没有设置任何规则，因此仍然可以预期！

您代码的插件 (Plugins for your code)

Writing a React app? The Babel parser may help you transform your code, but you might have a hard time being productive, as ESLint needs to understand how it should work to lint your React files.

写一个React应用？ Babel解析器可能会帮助您转换代码，但是您可能很难提高工作效率，因为ESLint需要了解它应该如何工作才能整理React文件。

Part of the beauty of ESLint is that it allows you to configure plugins that have the opportunity to create and set rules for you. Luckily, along with our Babel parser above that does some of the heavy lifting, we have a React plugin available that does just that and takes care of linting the JSX for us.

ESLint的部分优点在于，它允许您配置有机会为您创建和设置规则的插件 。 幸运的是，连同上面的Babel解析器可以完成一些繁重的工作，我们提供了一个React插件，可以做到这一点并为我们处理JSX。

Let’s first install our dependency:

首先安装依赖项：

yarn add eslint-plugin-react -D

Further, let’s update our .eslintrc.js file again:

此外，让我们再次更新.eslintrc.js文件：

module.exports = {"settings": {"react": {"version": "detect"}},"env": {"browser": true,"node": true,"es6": true},"plugins": ["react"],"parser": "babel-eslint"
};

What we’re adding here is a setting that automatically detects what React version you’re using, which is helpful to let your linting get parsed properly, and then set up our react plugin that we installed above.

我们在此处添加的设置会自动检测您正在使用的React版本，这有助于让您的棉绒被正确解析，然后设置上面安装的react插件。

For one last final time, we will run our lint script and get nothing:

最后的最后一次，我们将运行我们的lint脚本，但不会得到任何结果：

他人意见定义的规则 (Rules defined by others’s opinions)

If you’re not really sure where to get started or just want to quickly get up and running, it’s recommend that you enable ESLint’s own recommended rules. Let’s add this to our .eslintrc.js config file:

如果您不太确定从哪里开始，或者只是想快速启动并运行，建议您启用ESLint自己的推荐规则 。 让我们将其添加到我们的.eslintrc.js配置文件中：

module.exports = {"settings": {"react": {"version": "detect"}},"env": {"browser": true,"node": true,"es6": true},"plugins": ["react"],"extends": ["eslint:recommended"],"parser": "babel-eslint"
};

And let’s run our yarn lint.

然后运行我们的yarn lint 。

Woah! This will immediately give you a lot errors, it seems like something’s wrong.

哇！ 这会立即给您带来很多错误，似乎有些问题。

Since we’re running a React app, we also want to make sure our linter understands the rules it should follow, so let’s also add our React plugin to the .eslintrc.js config setup:

由于我们正在运行React应用，因此我们还想确保我们的linter理解它应该遵循的规则，因此我们还要将React插件添加到.eslintrc.js配置设置中：

"extends": ["eslint:recommended","plugin:react/recommended"],

Now if you run yarn lint, you get something a little more logical.

现在，如果您运行yarn lint ，您会得到一些合乎逻辑的东西。

If you’re following along, it looks like our starter app had a misplaced semicolon and a missing prop in our propTypes validation for Layout.js. Writing this helped me fix my own repo! 🎉

如果您遵循，它看起来像我们启动的应用程序有一个错位的分号，并在我们缺少的道具propTypes验证了Layout.js 。 写这篇文章有助于我修复自己的仓库！ 🎉

Going further, if those don’t seem to fit your needs, lots of developers and teams have published their own configurations that ESLint allows you to easily tap into.

更进一步，如果那些看起来不符合您的需求，那么许多开发人员和团队都发布了自己的配置，ESLint允许您轻松地使用它们。

Some popular ones include:

一些受欢迎的包括：

• Airbnb’s config

  Airbnb的配置

• Semistandard

  半标准

• Google’s JS Style Guide

  Google的JS样式指南

Not happy with the options available? You can even create and publish your own to either layer on top of others as a starting point or give it a go from scratch.

对可用选项不满意？ 您甚至可以从头开始创建并发布到其他任何层之上，也可以从头开始。

让它完成工作(大部分) (Let it do the work (most of it))

You don’t think I’m going to make you fix all of those thing yourself do you? Well, you may have to fix some, but let’s try to get ESLint to fix some of it for us.

您认为我不会让您自己解决所有这些问题吗？ 好吧，您可能需要修复一些问题，但是让我们尝试让ESLint为我们修复一些问题。

If you noticed after we ran the command above, ESLint gave us an extra message:

如果您在执行上面的命令后注意到，ESLint给了我们额外的消息：

So let’s give it a try! Let’s run:

因此，让我们尝试一下！ 让我们运行：

yarn lint --fix

And what do you know, it now only gives us 1 linting error.

而且您知道吗，它现在只给我们带来1条棉绒错误。

Turns out ESLint was able to fix our semicolon issue automatically, but we’ll still have to add pageName to our Layout’s propTypes manually, not too much of a lift.

事实证明，ESLint能够自动解决分号问题，但我们仍然必须手动将pageName添加到Layout的propTypes ，而不必propTypes 。

Running one more time and finally nothing again! But this time because everything's looking good.

再运行一次，最后什么也没有！ 但是这次是因为一切都很好。

继续写凌乱的代码！ (Go forth and write messy code!)

Kidding 😜 The good news here, is now you can easily take a look at the general health of your codebase as well as hopefully fix most of it automatically. This is going to save a lot of headaches as you work with others on your team, and generally, it’s nice to have all of your code neat and tidy.

开玩笑here这里的好消息是，您现在可以轻松查看代码库的总体运行状况，并希望大多数代码可以自动修复。 当您与团队中的其他人一起工作时，这将省去很多麻烦，通常，将所有代码都整齐地整理是一件很不错的事情。

This post is just getting started. ESLint is a wide open book with tons of plugins and rules, and it’s not the only linting tool in the game. Play around and find what fits best for you and your team. The little time spent configuring it to your app will save you lots more time in the long run.

这篇文章才刚刚开始。 ESLint是一本开放式的书，其中包含大量的插件和规则，它不是游戏中唯一的整理工具。 游玩，找到最适合您和您的团队的东西。 从长远来看，花很少的时间配置到您的应用程序将为您节省更多时间。

其他起绒工具签出 (Other linting tools to check out)

• JSHint: an alternative to ESLint

  JSHint ：替代ESLint

• Stylelint: a linting tool for CSS and CSS-like syntaxes like Sass

  Stylelint ：一种用于CSS和类似Sass的 CSS语法的整理工具

• Awesome ESLint: a simple list of awesome configs, parsers, plugins, and other tools to boost your ESLint game

  很棒的ESLint ：一系列很棒的配置，解析器，插件和其他工具的简单列表，可用来增强您的ESLint游戏

• Webhint: linting tool for accessibility, speed, and more website best practices

  Webhint ： 整理工具，用于辅助功能，速度和更多网站最佳实践

• A11y JSX Plugin: ESLint plugin for checking accessibility rules on JSX elements

  A11y JSX插件 ：ESLint插件，用于检查JSX元素上的可访问性规则

• 🐦 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/10/what-is-linting-and-how-can-it-save-you-time

最初发布于https://www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time

翻译自: https://www.freecodecamp.org/news/what-is-linting-and-how-can-it-save-you-time/