将eslint安装为扩展和安装为npm package有什么区别？

Question

我一直在关注有关为 vscode 和开发设置和配置 eslint 和 prettier 的各种博客和视频。 但是每篇文章都没有解释why do we need to separately install eslint as an npm package and vs code extension?

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

Answer 1

为什么我们需要单独安装eslint as npm package 和vscode扩展？

简短的回答：你没有。

长答案：

安装 ESLint/Prettier 作为扩展，允许您在 VSCode 中格式化/检查您的代码。

但是，将它们也作为依赖项安装会带来额外的好处：

• VSCode 将使用与安装时完全相同的 package。 所以当 VSCode 说 OK 时你不会发现这种情况，但是你的 CI 服务器说：NOT OK
• 您将控制版本，并可以随时更新
• 您将能够为不同的项目使用不同的版本。 当您无法迁移旧项目，但想为新项目使用最新的可能性时，这一点尤其重要
• 您将能够通过 package.json 的script块访问 Prettier/ package.json ，并能够根据需要编写带有参数的自定义命令
• 您将能够将它们与 Husky 或 NPM 挂钩配对以自动验证/格式化代码

根据我的经验，如果你可以在本地安装一些东西——将它安装为 package 依赖项（除了像 create-react-app 或 angular-cli 这样的 CLI 可以帮助你启动应用程序）。 这会让你的生活有点可预测。

Answer 2

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

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

• 实时波浪线；
• 和格式保存。

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

当作为 npm 包安装时（并包含在管道中的某处，或者在 npm 开始，或者在你的持续部署中，或者......）

• 你不会得到实时的波浪线，
• 但你仍然可以获得自动格式化（虽然不一定在保存时，取决于配置），
• 您可以获得阻止规则（这意味着您不仅可以看到错误/警告，还可以实际阻止管道，直到开发人员修复所述错误/警告）
• 您可以确保从任何 IDE 开始该项目的任何人都能获得包含的软件包