绝对初学者 Linting 指南

我们可能都经历过这种情况。我们兴奋地安装 ESLint，希望它能整理我们所有的代码，让我们能够写出更好、更简洁的 JavaScript 代码。

您听说过应该进行 linting，但这是您并不真正理解其背后原因或方法的事情之一。

我们在网上找到了一些说明，不知不觉中，ESLint 就安装好了，可以开始使用了。我们加载代码，却发现一大堆红色波浪线和成千上万个问题。如果你和我一样，可能会慌了神，赶紧卸载它，再也不用尝试了。

Linter 的本质是需要配置。对于初学者来说，这可能是一项艰巨的任务，而且市面上也没有太多优秀的资源，所以我制作了一份“完全初学者指南”，教你如何设置 Linter，并让它指出代码中较大的错误。

棉绒？什么鬼？

Linters 解决了项目中代码混乱且不一致的问题，这通常是开发周期中至关重要的一环。它们的工作原理是定义一套团队中每个人都应该遵循的规则，但更重要的是，Linter 可以帮助您遵循最佳实践，并帮助预防潜在问题。如果发现任何不妥之处或值得关注的地方，它们会发出警告。

问题是，如果你刚开始学习，通常不会想一次性看到所有可以改进的地方，但找到需要解决的更大问题会很有帮助。比如语法问题、意外的全局变量等等。

NPM安装

此时，你的系统上应该已经安装了 Node 和 NPM。要再次检查，请运行：

node -v
npm -v

这应该会返回每个版本的版本号。如果没有，那么你只需要安装 Node 和 NPM。

要获取 ESLint，请在终端中运行以下命令：

npm install -g eslint

这会将 ESLint 安装到您的系统中。

接下来，切换到要安装 ESLint 的项目文件夹的根目录并运行以下命令：

eslint --init

这应该可以正常工作，但是，据记录，有时这可能会出现一些问题。如果出现任何问题，请尝试以下操作：

./node_modules/.bin/eslint --init

如果一切顺利，你的终端应该会显示一条文本，询问“你想如何配置 ESLint？”。选择以下内容：

Use a popular style guide
Standard
JS

太棒了！一切就绪，可以开始进行 linting 了。

设置超级基本配置

现在我估计大多数之前遇到过 linters 问题的人都会走到这一步，然后当他们打开他们的项目发现到处都是错误时就会失去思路。

这就是配置文件发挥作用的地方！

用你最喜欢的文本编辑器打开你的项目，你会发现在根目录中多了一个新版本的 .eslintrc.js 文件。打开它，你会看到类似这样的内容：

module.exports = {
   "extends": "standard"
};

首先，更改standard为eslint:recommended。

module.exports = {
   "extends": "eslint:recommended"
};

太棒了！如果你查看一下文件，你会发现仍然有相当多的错误。这是因为我们需要设置一个环境，以便 linter 能够理解一些全局变量。

module.exports = {
   "env": {
     "browser": true,
     "commonjs": true,
     "es6": true,
     "jquery": true
   },
   "extends": "eslint:recommended",
}

这是为了识别 ES6 和 JQuery 语法，因为我相信这可能是大多数人在他们的启动项目中会使用的语法，但是，如果您使用其他框架，那么您可以像我上面所做的那样将它们添加到“env”部分。

清除棉绒！

就这样！一个完美的 ESLint 配置就完成了！它不会在你每次犯错时都对你大喊大叫。

显然，随着您的进步和需求的变化，只需在此文件中添加额外的属性即可！就这么简单！