what is the difference between installing prettier as a NPM package and installing prettier extension in VS Code

Question

I'm new to web programming and I learned that we can type npm i -D prettier to install prettier as one of the devDependency and use it to format our code. Then I found that there is a VS Code extension Pretty that does exactly the same thing.

I don't know what the differences are between the two.

If I only install the extension, can I format the codebase where the prettier npm package is not installed?

Also does the configuration process differ for these two? Which one is preferred?

Answer 1

Functionally there is no difference, they will both work.

The VS Code extension Prettier (not Pretty Formatter, that's different) includes a recent copy of the prettier npm package inside it, which it will use by default if you don't have the package installed via npm in your repo. See the extension page's section on Prettier Resolution.

I want to use an example to illustrate why you might use npm over the extension.

Lets say you worked on a team and you wanted everyone to have the same version of prettier. It would be pretty hard to get everyone on the same version by VS Code extension. Developers would have to manage the versioning on their own, and would be difficult to all be on the same version (if needed). But If you used npm and had the package.json/lock file in a repository you could all easily be on the same version. If you needed to update to the same version you can just npm install and that will bring everyone on the same page. It might not be so important for prettier, but think about packages with breaking changes to the latest version.

so to answer your questions:

If I only install the extension, can I format the codebase where the prettier npm package is not installed?

When using the VS Code extension, you can use it to format any file. If you don't have the npm package installed in a given project, the extension will use its built-in default package.

Also does the configuration process differ for these two? Which one is preferred?

Both use .prettierrc for the (small) amount of things you can configure in Prettier. The VS Code extension comes with some additional configuration for how it should interact with your editor.

If you want your editor to do things like run prettier on save, or to be able to run it from the VS Code command palette, you should use the VS Code extension. Additionally, if you need a specific version of Prettier, or you need to run it from the command line, you can install it as an npm package in your repo. These two options are not mutually exclusive.