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

Question

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

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

Answer 1

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

简短的回答：你不知道。

长答案：

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

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

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

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

Answer 2

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

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

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

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

当作为 npm 包安装时（并包含在管道中的某个位置，无论是在 npm start 中，还是在持续部署中，或者......）

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