安装 eslint 扩展和安装 npm 包有什么区别？

Question

我一直在关注各种关于在 VS Code 和开发中设置和配置 ESLint 和 Prettier 的博客和视频。但是每篇文章都没有解释为什么需要分别安装 ESLint npm 包和 VS Code 扩展程序。

如果我只安装其中一个，会有什么不同呢？

- Jatin Mehrotra

---

请有人写一个比我更好的答案，因为我实际上也想知道这个问题的答案。 - Sheraff

ESLint作为npm包并没有提供任何编辑器集成，只有CLI可执行文件。 - Bergi

Answer 1

为什么我们需要分别安装ESLint作为npm包和VSCode扩展程序？

简短回答：不需要。

详细回答：

将ESLint/Prettier作为扩展程序安装，可以让你在VSCode中格式化/检查代码。

然而，将它们作为依赖项也带来了额外的好处：

- VSCode将使用与安装的完全相同的包。这样，你就不会出现VSCode说OK，但你的CI服务器说NOT OK的情况。 - 你将获得版本控制，并且可以随时更新。 - 你将能够为不同的项目使用不同的版本。当你不能迁移旧项目，但想要在新项目中使用最新的可能性时，这一点尤为重要。 - 你将能够通过package.json的script块访问Prettier/ESlint，并能够按照需要编写具有参数的自定义命令。 - 你将能够将它们与Husky或NPM钩子配对，以自动验证/格式化代码。

从我的经验来看，如果你可以本地安装某些东西，请将其安装为包依赖项（除了像create-react-app或angular-cli这样的CLI，它们帮助你启动应用程序）。这将使你的生活更加可预测。

- Drag13

---

为什么要“除了CLI”？这些也可以作为开发依赖项本地安装。特别是，eslint也是一个CLI。 - Pedro A

我所说的CLI是指像create-react-app或angular这样的东西。感谢您的指点，我会更新答案。 - Drag13

Answer 2

这些程序可以格式化您的代码（ESLint和Prettier），并检测特定的语法错误（ESLint）。

当作为IDE扩展安装时（例如vscode），您可以获得：

- 实时显示波浪线； - 保存时自动格式化。

但是，在其他环境中启动您的项目的人可能没有安装这些扩展（甚至可能没有相同的IDE），因此可能无法获得这些功能。

当作为npm包安装时（并在某个流程中包含，例如npm start或连续部署中...）

- 您将无法获得实时显示波浪线， - 但仍然可以自动格式化（根据配置，可能不会在保存时进行）， - 您可以获取阻止规则（这意味着除了看到错误/警告外，您还可以实际阻止管道直到开发人员修复了这些错误/警告）， - 您可以确保任何从任何IDE启动项目的人都已经包含了这些npm包。

- Sheraff

Answer 3

使用ESLint的两种不同方式可以增强团队协作和个人编码效率：

1. ESLint作为一个NPM包：适用于团队项目，以保持不同设置下的一致代码质量。确保每个人都遵循相同的编码标准，及早发现问题。

2. ESLint作为VSCode扩展：提供实时代码格式化，即时检测和纠正问题。通过促进即时解决问题，提高生产力。

同时采用这两种方法提供了全面的解决方案：团队间的标准化质量和高效的实时编码增强。

- james_00s

---

嗨 @james_00s，感谢你的贡献，请注意这个答案并不完整。它没有明确说明拥有每种方法的好处，也没有说明为什么选择每种方法以及每种方法的利弊。 - Itay Wolfish