我想很多人都知道，如今在严肃的项目中，习惯于使用特殊工具来检查代码中的错误并匹配团队采用的样式。
今天，我想谈谈ESLint，这是一个检查JavaScript项目是否有错误的好工具。
我不会在本文中写一些明显的要点，例如为您的项目设置eslint：希望您自己阅读此部分的文档并将其连接到您自己。 在这里，我们将讨论可以连接到原始工具的其他“工具包”，以及如何配置它以使其发挥最大优势。
现在，我们使用准备好的配置以及来自airbnb团队的规则作为规则的基础。 现在，他们的JavaScript代码编写标准在github上已有73000万颗星，并且被许多知名组织使用 。 我想你可以相信他。
此配置将几个重要的软件包立即连接到项目： eslint ， eslint-plugin-import ， eslint-plugin-react和eslint-plugin-jsx-a11y ，其中包含用于验证代码的其他规则。 应该注意的是，此配置文件意味着您在项目中使用React.js。 如果不是这样，那么您始终可以安装eslint-config-airbnb-base配置，其中包含所有相同的配置，但React.js的插件依赖性除外。
让我们仔细研究一下插件包，找出它们将添加到您的项目代码中的哪些检查：
该插件将为您所有导入项目的项目添加验证，并确保所有导入的依赖项都存在于项目中，并以方便的顺序连接以进行后续工作，等等。
该插件使您可以在React.js上编写更正确的代码，并避免使用常见的反模式，还可以强制您将所有组件描述归因于它们接受的数据类型。
这个插件也适用于React.js上的项目，在工作中也非常有用。 这将迫使您编写符合可访问性标准的更好的HTML。 您的项目将为残疾人士带来更多便利。
通常，这组规则将使您的项目编写得更好，并扩展您对现代代码编写标准的了解。
但是在我们的世界中，不仅有这些用于eslint的插件，而且还有许多其他插件。 github上已经有一个关于这个主题的很棒的很棒的项目。 最近几天，我决定研究这个主题，我想向您的法庭介绍在我当前正在进行的项目中发现，亲自测试并实现的最有趣的事情。
ESLint的其他插件
您可以自己研究上述项目，并亲自为您找到有趣的插件，但是我将在这里写下我感兴趣的内容。
专为Node.js项目设计的插件。 我认为如果他们仍然不在家中使用它，许多人会派上用场。
该插件将使您“喜欢” Lodash，并将大多数本机JS方法重写为Lodash中的方法，并且它还包含有关使用lodash链编写代码的许多建议。 总的来说，这很有趣，但是到目前为止，我还没有简单地实现它，因为我们现在必须重写太多的代码才能遵守此插件的规则。 但是为了将来，我自己考虑了。
这个插件使您可以在开发过程中直接检查您编写的代码与当前在项目中定位的当前浏览器的兼容性。 目前，我没有将其连接到我的项目，因为我们现在使用polyfill.io服务，该服务将所有必要的polyfill自动连接到每个单独的浏览器，因此总的来说不存在代码兼容性问题。 但是对于未来，我也为自己做笔记：如果需要的话该怎么办？
告诉您如何优化正则表达式的插件。 为什么不安装？ 我想这不会是多余的。
从其他车身套件列表中最有趣的发现之一。 这个插件包含一整套检查，因此，它可以找到编写不良的代码部分，相同的功能以及简单的无意义的构造，并提供重写它们的功能（可惜他本人不知道如何重写它们：D）。 如果您不喜欢将代码分解成小的清晰的块并在100多行中编写复杂的函数-请等待此插件发出警告，指出项目中此类位置的认知复杂性对于长期支持而言太高了，应该重写。
当您要编写标准的for或while循环时，此插件将向您发誓。 如今，使用forEach ， map ， reduce等等早已成为惯例。 我通常同意作者的意见，并将插件插入我的项目。
该插件将阻止您扩展标准JavaScript对象的原型。 说不！ 猴子补丁。 没错。
一个插件，可帮助您编写正确的承诺并保护您避免使用它们时的常见错误。 我认为这也非常有用。
这是最后的插件列表。 您在项目中使用什么来测试代码？
最后，我将在当前项目中留下.eslintrc文件的示例配置：
.eslintrc { "parser": "babel-eslint", "extends": [ "airbnb", "plugin:import/errors", "plugin:import/warnings", "plugin:jsx-a11y/recommended", "plugin:sonarjs/recommended", "plugin:promise/recommended" ], "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"], "rules": { "react/jsx-filename-extension": "off", "jsx-a11y/click-events-have-key-events": "off", "import/no-extraneous-dependencies": [ "error", { "packageDir": "./" } ], "allowTernary": true, "optimize-regex/optimize-regex": "warn", "sonarjs/cognitive-complexity": ["error", 30], "no-loops/no-loops": 2, "no-use-extend-native/no-use-extend-native": 2, }, "settings": { "import/resolver": "webpack" } }