将 prettier 作为 NPM 包安装和在 VS Code 中安装 prettier 扩展有啥区别

Posted 2023-02-22

【中文标题】将 prettier 作为 NPM 包安装和在 VS Code 中安装 prettier 扩展有啥区别

【英文标题】：what is the difference between installing prettier as a NPM package and installing prettier extension in VS Code将 prettier 作为 NPM 包安装和在 VS Code 中安装 prettier 扩展有什么区别

【发布时间】：2020-09-07 13:48:18

【问题描述】：

我是网络编程的新手，我了解到我们可以输入 npm i -D prettier 来将 prettier 安装为 devDependency 之一，并使用它来格式化我们的代码。然后我发现有一个 VS Code 扩展 Pretty 可以做完全相同的事情。

我不知道这两者有什么区别。

如果我只安装扩展，我可以在没有安装更漂亮的 npm 包的地方格式化代码库吗？

这两者的配置过程也不同吗？哪个更受欢迎？

【参考方案1】：

在功能上没有区别，它们都可以工作。

VS Code 扩展 Prettier（不是 Pretty Formatter，这是不同的）在其中包含 prettier npm 包的最新副本，如果您没有通过 npm 安装该包，它将默认使用它你的回购。请参阅Prettier Resolution 上的扩展页面部分。

我想用一个例子来说明为什么你可以在扩展上使用 npm。

假设您在一个团队中工作，并且您希望每个人都拥有相同版本的 prettier。通过 VS Code 扩展让每个人都使用相同的版本是相当困难的。开发人员必须自己管理版本控制，并且很难全部使用相同的版本（如果需要）。但是，如果您使用 npm 并将 package.json/lock 文件放在存储库中，那么您可以轻松地使用相同的版本。如果您需要更新到相同的版本，您可以npm install，这将使每个人都在同一页面上。对 prettier 来说可能不是那么重要，但请考虑对最新版本进行重大更改的软件包。

所以回答你的问题：

如果我只安装扩展，我可以在没有安装更漂亮的 npm 包的地方格式化代码库吗？

使用 VS Code 扩展时，您可以使用它来格式化任何文件。如果您没有在给定项目中安装 npm 包，则扩展将使用其内置的默认包。

这两者的配置过程也不同吗？哪个更受欢迎？

两者都使用.prettierrc 来表示您可以在 Prettier 中配置的（少量）内容。 VS Code 扩展附带了一些额外的配置，说明它应该如何与您的编辑器交互。

如果您希望您的编辑器在保存时运行更漂亮，或者能够从 VS Code 命令面板运行它，您应该使用 VS Code 扩展。此外，如果您需要特定版本的 Prettier，或者您需要从命令行运行它，您可以将它作为 npm 包安装在您的 repo 中。这两个选项并不相互排斥。