每次保存代码时，有没有办法在 React 项目上运行 linter？答案

【问题标题】：Is there a way to run a linter on a React project every time the code is saved?每次保存代码时，有没有办法在 React 项目上运行 linter？
【发布时间】：2020-06-05 01:51:33
【问题描述】：

这个问题真的很简单。

我来自 VueJS 的背景，所有这些都是自动为用户设置的。我希望我的 linter（tslint，如果这很重要）在项目中保存任何文件时自动运行，但我发现的所有资源都停止向 package.json 文件添加命令。为 linter 提供单独的命令非常棒，但我希望在开发服务器运行时在终端中显示这些 lint 警告。

编辑：不是“如何让 tslint 监视特定文件夹中的更改？”的副本。因为这并不能解决我想要做的事情。我可以看到我可以让文件观察程序与服务器分开运行，但我不希望这样。我想运行服务器来启动 linter。

【问题讨论】：

How do I get tslint to watch for changes in a specific folder?的可能重复
我相信 typescript create-react-app 的实现将 tslint 集成到编译中。如果没有人能给你一个满意的答案，你可能要考虑制作一个虚拟 cra 项目，将其弹出，然后查看所有配置文件。需要注意的一件事是，将 ts 类型检查器、babel 转译器和 linter 全部放在一个进程中会使编译停止。通过让所有 3 个进程分别运行，我将编译时间缩短到过去的 30%（17 秒 -> 5ish）
我有强烈的感觉，你最好设置你使用的 IDE，而不是在终端中将 linter 作为观察者任务运行。
@skyboyer 好吧，我并不总是使用 IDE，所以这只是愚蠢的建议。开发确实不应该与使用某些 IDE 相关联，因为我应该能够在 vim 中快速编辑文件并且如果需要仍然会收到警告。
我也有同样的问题。我想将 eslint 配置为像 Vue CLI 中的这个一样工作。你有没有为 React 找到一些类似的方法？

标签： reactjs

【解决方案1】：

这就是我正在做的事情：

"watch": {
    "lint": "src/main.ts"
},
"scripts": {
    "lint": "tslint src/**/*.ts -t verbose",
    "watch": "npm-watch"
},

为此，您需要 npm-watch。这里有一个很好的解释How do I get tslint to watch for changes in a specific folder?

希望对你有帮助。

编辑：我目前使用 VsCode，TSLint 插件只显示 IDE 上的所有内容，所以我不再这样设置了

【讨论】：

不是我在这里寻找的东西。 watch 应该内置到服务器的运行中，以便在服务器运行时，linter 也运行。您的建议仍然与服务器的运行分开，不是吗？
好吧，如果您查看我链接的答案，他会提供此工具github.com/paulmillr/chokidar 以便能够做我理解的您需要的事情

【解决方案2】：

您可以为此安装 vscode prettier plugin。

安装后，打开您的 vscode 设置（用户/工作空间）并启用 Format on save，因为它尊重设置。另外，您可以根据语言进行操作。

然后您可以configure your linters (ESLint/TSLint) 与 prettier 一起工作。

更多信息可以在 prettier 的 github repo - https://github.com/prettier/prettier-vscode

【讨论】：

好吧，我不使用 VSCode，也不想要可以格式化的东西。这就是我使用 TSLint 的原因，而不是使用 TSLint。
好吧，如果你不想在你的 package.json 中添加脚本，并且想运行 format-on-save 功能；在您的 IDE 中配置相同是要走的路。如果你不使用 VSCode，你可能会失去对开发者最好的 IDE 之一。
好吧，VSCode 不是 IDE，如果你真的想提出来的话。它是一个文本编辑器。我拥有并使用 WebStorm，一个实际的 IDE。无论如何，这不是我想要的行为。
您始终可以通过添加 Webstorm 为您的项目提供的构建工具来使 VScode 成为 IDE。但既然你不想要我建议的行为，我想你可以忽略这个答案。谢谢。

【解决方案3】：

也许答案为时已晚，但由于某些 CRA 版本您可以使用 EXTEND_ESLINT 环境变量扩展“标准”eslint 配置。您可以在official docs 和this tutorial 中了解它。

以这种方式配置的 Linter 正在与开发服务器一起运行。

【讨论】：

嗯，这与这个问题根本没有任何关系。这是关于在运行开发服务器时运行 linter，而不是关于自定义 linter。
以这种方式配置的 Linter 也在开发服务器上运行。
该配置与在开发服务器上运行没有任何关系。如果它现在这样做，则更改来自 CRA。