How to use Prettier plugins with Yarn PnP in VSCode?

Javien Lee — Sat, 07 Oct 2023 05:59:00 +0000

When using Yarn Berry with Prettier in VS Code, you might encounter issues loading Prettier plugins. For example:

module.exports = {
  // ❌ This doesn't work!
  plugins: ['prettier-plugin-organize-imports'],
};

This results in an error:

[ERROR] Error resolve node module 'prettier-plugin-organize-imports'

For this explanation, I used the following versions:

prettier: v3.0.3

prettier-vscode: v10.1.0

yarn: v3.6.4

Note that the solution might not work if major versions are different.

Quick Fix (TL;DR)

1. Unplug your plugins

$ yarn unplug <your-plugin>

For example, to unplug prettier-plugin-organize-imports, use:

$ yarn unplug prettier-plugin-organize-imports

You can find more information about yarn unplug here

2. Edit .prettierrc.js

🚨 Important: Your Prettier configuration file must be a .prettierrc.js file (not .json, .yml, etc.) to use this method. We'll be using require.resolve, which is a Node.js function that resolves the absolute path to a module.

/** @type {import("prettier").Options} */
module.exports = {
  plugins: [require.resolve('your-plugin')]
}

Replace 'your-plugin' with the name of your plugin. For example, if you're using prettier-plugin-organize-imports, the configuration should look like this:

/** @type {import("prettier").Options} */
module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  organizeImportsSkipDestructiveCodeActions: true,
  plugins: [require.resolve('prettier-plugin-organize-imports')],
}

3. Reload Window

Finally, you need to reload VS Code.

Press F1 or cmd+shift+P to open the command palette.
Type "reload window".
Select "Developer: Reload Window".

Alternatively, you can simply close and reopen VS Code.

🎉 You should now have Prettier working correctly with your plugins! 🎉

Okay, so what was the problem?

The core issue lies in how Yarn Berry (with PnP enabled) manages packages. Instead of storing packages in a traditional node_modules directory, Yarn Berry often stores them as zip files in its folder (.yarn/cache).

When you specify a plugin as a plain string:

module.exports = {
  // ❌ Doesn't work
  plugins: ['prettier-plugin-organize-imports'],
}

prettier-vscode attempts to load the plugin on its own. However, because Yarn Berry uses zip files and the .pnp.cjs loader, prettier-vscode fails to locate the plugin, resulting in an error like this:

["ERROR" - 11:43:14 PM] Error resolve node module 'prettier-plugin-organize-imports'
Error: Error resolve node module 'prettier-plugin-organize-imports'

Even when providing an absolute path using require.resolve, you might encounter issues because the path points to a zip file:

Cannot find module '(~).yarn/__virtual__/prettier-plugin-organize-imports-virtual-9cbb536fbb/0/cache/prettier-plugin-organize-imports-npm-3.2.3-7f40e110b3-e97dd707ce.zip/node_modules/prettier-plugin-organize-imports/index.js' imported from (~).yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/index.mjs
Did you mean to import (~).yarn/__virtual__/prettier-plugin-organize-imports-virtual-9cbb536fbb/0/cache/prettier-plugin-organize-imports-npm-3.2.3-7f40e110b3-e97dd707ce.zip/node_modules/prettier-plugin-organize-imports/index.js?

The prettier-vscode doesn't inherently know how to handle these zip files or use the .pnp.cjs loader.

By using yarn unplug, you extract the plugin from the zip file, making it directly accessible. Then, require.resolve provides the correct path to the extracted plugin, allowing prettier-vscode to load it successfully.

Conclusion

The primary challenge arises from Yarn PnP's use of zip files, which prettier-vscode cannot directly interpret. Unplugging the plugin and using require.resolve to specify the path resolves this issue.

If you're still encountering problems, feel free to provide more details about your specific setup, and I'll do my best to assist you!

Do you use semicolon in JS?

Javien Lee — Sun, 05 Jun 2022 06:53:31 +0000

Do you usually use semicolon when you program? And why?

In my case, I don't use semicolon. I know how ASI(Auto Semicolon Insertion) works and it's rule makes my code more clean and readable.

Let me give you an example. The code below is an incorrect way to use ASI.

let foo = 'bar'
[1, 2].map(e => e + 1)

because ASI will fix the code like this.

let foo = 'bar'[1, 2].map(e => e + 1)

However, most of developer do not write code like this. In that code, we can't figure out what [1, 2] means. So we store it in a variable with name, that everyone can understand.

const ids = [1, 2]
const newIds = ids.map(e => e + 1)

I'm not blaming people for using semicolons in their code, but I don't think there's a particular reason for me to use semicolons. Please share your opinion :p

DEV Community: Javien Lee