DEV Community

Javien Lee
Javien Lee

Posted on • Edited on

How to use Prettier plugins with Yarn PnP in VSCode?

#yarn #prettier #vscode

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'],
};
Enter fullscreen mode Exit fullscreen mode

This results in an error:

[ERROR] Error resolve node module 'prettier-plugin-organize-imports'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

$ yarn unplug prettier-plugin-organize-imports
Enter fullscreen mode Exit fullscreen mode

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')]
}
Enter fullscreen mode Exit fullscreen mode

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')],
}
Enter fullscreen mode Exit fullscreen mode

3. Reload Window

Finally, you need to reload VS Code.

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

Open command prompt, type 'reload window' and run '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'],
}
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
fulldecent profile image
William Entriken •

Hi Javien thanks for sharing. To make this work with Yarn Berry 4, I had to do a couple extra steps

{
  "license": "UNLICENSED",
  "devDependencies": {
    "@shopify/prettier-plugin-liquid": "^1.5.0",
    "prettier": "^3.3.3"
  },
  "scripts": {
    "postinstall": "yarn dlx @yarnpkg/sdks vscode"
  },
  "packageManager": "yarn@4.4.1+sha512.f825273d0689cc9ead3259c14998037662f1dcd06912637b21a450e8da7cfeb4b1965bbee73d16927baa1201054126bc385c6f43ff4aa705c8631d26e12460f1",
  "dependencies": {
    "xml2js": "^0.6.2"
  },
  "dependenciesMeta": {
    "@shopify/prettier-plugin-liquid@1.5.0": {
      "unplugged": true
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Then in the plugin, I also had to do:

/** @type {import("prettier").Options} */
module.exports = {
  printWidth: 120,
  plugins: [require.resolve("@shopify/prettier-plugin-liquid/standalone")],
};
Enter fullscreen mode Exit fullscreen mode

Note that it is NOT just the module, but a specific "standalone" file in the module.

It took a ridiculous amount of effort to find these undocumented tricks. Using very careful search through public code on GitHub.

github.com/fulldecent/github-pages...

^ Here is a blank template implementing this approach for GitHub Actions, VS Code editing and command line usage for Prettier linting including plugins. It is targeted for people that want to publish a site on GitHub Pages, but the concepts should hold for other languages.

Collapse
 
doctorderek profile image
Dr. Derek Austin πŸ₯³ •

Thank you both, especially you William!