How to use Prettier plugins with Yarn PnP in VSCode?
Tags: yarn, prettier, vscode
Published: 2023-10-07 05:59:00

If you're using **yarn berry** and **prettier** in **Visual Studio Code**, you could be stuck on using prettier plugins.

```js
module.exports = {
  // ❌ It's not working!
  plugins: ['prettier-plugin-organize-imports'],
}
```

> I used these version for the explanation:
> - prettier: v3.0.3
> - prettier-vscode: v10.1.0
> - yarn: v3.6.4
>
> Note that the solution can't work if major version is different.

## TL;DR

### 1. Unplug your plugins

First, unplug your plugins. You can do it with this command:

```bash
$ yarn unplug <your-plugin>
```

For example, let's unplug `prettier-plugin-organize-imports`.

```bash
$ yarn unplug prettier-plugin-organize-imports
```

You can find more information about `yarn unplug` [here](https://yarnpkg.com/cli/unplug)

### 2. Edit .prettierrc.js

🚨 To use plugin, your prettier config file **must be a JS file** (`.prettierrc.js`).
Because we're going to use `require.resolve` - it's very important!

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

Using `prettier-plugin-organize-imports`, config file can be like this:

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

### 3. Reload Window

Finnaly, reload VSCode to restart prettier-vscode.

Press `F1` to open command prompt, type 'reload window' and run "*Developer: Reload Window*".

![Open command prompt, type 'reload window' and run 'Developer: Reload Window'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuhck28l3awkvc6ew9fk.png)

You can also close VSCode and open it again - it's the same thing.

🎉 Now it's done! 🎉

---

## Okay, so what was the problem?

Basically, yarn berry was the problem. Let me explain.

If you pass plugin name as a plain string (like me), you would face the issue.

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

When a plugin is specified as a string, prettier-vscode attempts to load it on its own. However, due to our usage of yarn PnP, it cannot handle this properly.

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

The next approach is to provide an absolute path directly using `require.resolve`. If the plugins are passed with an absolute path, prettier-vscode uses the value as it is.

Unfortunately, it still didn't work. This is the error log I got:

```text
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?
```

🧐 Hmm.. I had to think why prettier-vscode couldn't import even with an absolute path.

I finally figured it out. 

When you open `.yarn/cache`, you will see it's full of zip files. This is why prettier-vscode can't load the module by the path. **The extension can't load the plugin because it doesn't use `.pnp.cjs`**

If you want to avoid managing specific packages as zip files, you can unpack them using **[`yarn unplug`](https://yarnpkg.com/cli/unplug)**.

```bash
$ yarn unplug prettier-plugin-organize-imports
```

Eventually! We made it!

## Conclusion

The problem was yarn PnP. If you still not solved the problem, feel free to let me know about your problem :)