prettier 3.0 and prettier-vscode v10.1.0 won't load plugins

[lewisflude]

trafficstars

Summary

In my project, VS Code successfully loads my Prettier config, but when I try and format a tsx file it logs an error. Visual Studio Code is on version 1.80.2.

My config is as follows, and is exported as a package in a monorepo and used in the root of the monorepo (it seems to be loading successfully).

export default {
  plugins: ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
  tailwindFunctions: ["cva"],
  singleQuote: false,
};

Steps To Reproduce:

1. Use VS Code 1.80.2
2. Set up a Turborepo project
3. Make a package called prettier-config and export the config
4. List packages "prettier": "^3.0.0",, "prettier-plugin-organize-imports": "^3.2.3", and "prettier-plugin-tailwindcss": "^0.4.1" as peerDependencies.
5. Make sure the VS Code plugin is set up correctly
6. Try formatting a React TSX file using Prettier from the command palette

Expected result

The files should be formatted

Actual result

I get a pop up with the error.

Command 'Format Document With...' resulted in an error Error resolve node module 'prettier-plugin-organize-imports'

I have tried multiple steps including removing plugins one at a time (same result for them all) as well as repositioning my prettier config and taking it out of the monorepo structure. I have tried require, import as well as pure text plugin definition based on the official docs as well as tried both esm and commonjs exports for the config.

I appreciate between Prettier and Prettier VS Code there are a fair few related issues, but on the off chance this bug report is useful I thought it would be worth posting.

Additional information

package.json of the prettier-config package:

  "name": "prettier-config",
  "version": "0.0.0",
  "main": "./index.js",
  "exports": {
    ".": "./index.js"
  },
  "type": "module",
  "engine": {
    "node": ">=16.0.0"
  },
  "peerDependencies": {
    "prettier": "^3.0.0",
    "prettier-plugin-organize-imports": "^3.2.3",
    "prettier-plugin-tailwindcss": "^0.4.1"
  }
}

VS Code Version:

Version: 1.80.2 (Universal) Commit: 2ccd690cbff1569e4a83d7c43d45101f817401dc Date: 2023-07-27T21:05:41.366Z Electron: 22.3.14 ElectronBuildId: 22695494 Chromium: 108.0.5359.215 Node.js: 16.17.1 V8: 10.8.168.25-electron.0 OS: Darwin arm64 23.0.0

Prettier Extension Version: v10.1.0

OS and version: macOS 14.0 Beta (23A5276g)

Prettier Log Output

["ERROR" - 18:34:42] Error handling text editor change
["ERROR" - 18:34:42] Error resolve node module 'prettier-plugin-organize-imports'
Error: Error resolve node module 'prettier-plugin-organize-imports'
    at n (/Users/lewisflude/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:2718)
    at /Users/lewisflude/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:3068
    at Array.map (<anonymous>)
    at t.resolveConfigPlugins (/Users/lewisflude/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:3003)
    at t.ModuleResolver.resolveConfig (/Users/lewisflude/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:7290)
    at t.default.getSelectors (/Users/lewisflude/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:11562)
    at t.default.handleActiveTextEditorChanged (/Users/lewisflude/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:10924)
["INFO" - 18:34:44] Formatting file:///Users/lewisflude/Code/redacted/packages/ui/src/components/DataGrid/DataGrid.tsx
["INFO" - 18:34:44] Using config file at '/Users/lewisflude/Code/redacted/package.json'```

[nadbad]

I have also been having this issue for the past few days on linux. You can easily solve this issue by downgrading to v9.19.0!

[mike-hosseini]

Same issue here, I even added it to settings.json in VSCode but it is being ignored.

[virtuallyunknown]

Please allow prettier.plugins as a vscode setting. I am not really a fan of having ton of static configuration files across all of my projects, and for that reason I keep all my prettier settings in the global vscode user settings.json.

But the problem is now that whenever you want to use a plugin, you have to:

1. Create a prettier configuration file in project root where you define your plugins.
2. Copy/paste your vscode settings into this configuration file.

I was using prettier-plugin-tailwindcss for ages without any issues whatsoever, but because of this now it no longer works.

[arx-8]

I was encountering the same problem, but now I can get formatOnSave to work perfectly with the following combination.

• vscode: 1.82.0
• esbenp.prettier-vscode: v10.1.0
• npm: 9.6.7
• node: v18.17.0
• prettier: 3.0.3
• prettier-plugin-organize-imports: 3.2.3

In my case, the cause was "prettier.prettierPath" in "settings.json".

"prettier.prettierPath": "./node_modules/prettier",

I had written the above value, but when I removed it, formatOnSave now works. I hope this will help.

---

The following comment may also be helpful: https://github.com/prettier/prettier-vscode/issues/3007#issuecomment-1628836459

[steve-taylor]

I have also been having this issue for the past few days on linux. You can easily solve this issue by downgrading to v9.19.0!

@nadbad I tried many things and, in the end, this is the only thing that worked. This seems to be the most recent version that works with Prettier v3.

[github-actions[bot]]

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

[frederikhors]

Nope

[vincerubinetti]

Wasted several hours of my life thinking I was doing something wrong. Turns out Prettier just hasn't worked for a pretty significant length of time.

Related: #3071 #3224 #3142

FYI, I think problems like this are likely the reason for this rating:

I've gone and written a 1 star review myself, unfortunately. It seems like this issue has been here almost a year? I get that Prettier is donation funded, and not VC-backed or something, but as the official first-party extension, this still really needs to be better. I'd gladly revert my rating if these issues start to be addressed.

[leonardsimonse]

What worked for me with:

• Prettier 3.1.1
• Prettier VSCode 10.1.0
• prettier-plugin-svelte
• prettier-plugin-organize-imports
• prettier-plugin-tailwindcss

config:

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": [
		"prettier-plugin-svelte",
		"prettier-plugin-organize-imports",
		"prettier-plugin-tailwindcss"
	]
}

was setting:

"prettier.requireConfig": true
"prettier.configPath": "./.prettierrc"

only then the plugins started getting resolved

[lts20050703]

Can confirm that setting "prettier.configPath": "./.prettierrc" works. I don't think "prettier.requireConfig": true is necessary, though.

[Eprince-hub]

As shown in the prettier-vscode docs, you can use the prettier.documentSelectors to target a specific file extension. The issue I had was with a .sql file, but you can also have the same setting for the .tsx file issues you are having

Example: Adding the settings below to the .vscode/settings.json will enable formatting for your .sql files

"prettier.documentSelectors": ["**/*.sql"],

I think I prefer this way instead of changing the prettier configPath as mentioned here https://github.com/prettier/prettier-vscode/issues/3104#issuecomment-1879606539

[github-actions[bot]]

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

[CartoonFan]

Please keep open :+1:

[SLanberg]

Unusable. Issue still happening.

[nielsbom]

Issue still occurring.

[lts20050703]

@SLanberg @nielsbom Have you tried setting "prettier.configPath": "./.prettierrc" in .vscode/settings.json? (Or you can open settings, search for prettier.configPath, and set it to ./.prettierrc)

[nielsbom]

@SLanberg @nielsbom Have you tried setting "prettier.configPath": "./.prettierrc" in .vscode/settings.json? (Or you can open settings, search for prettier.configPath, and set it to ./.prettierrc)

No. Is that useful without an actual .prettierrc file? (I'm fine with all the defaults)

[lts20050703]

Oh you don't have a .prettierrc file? Maybe try this?

As shown in the prettier-vscode docs, you can use the prettier.documentSelectors to target a specific file extension. The issue I had was with a .sql file, but you can also have the same setting for the .tsx file issues you are having

Example: Adding the settings below to the .vscode/settings.json will enable formatting for your .sql files

"prettier.documentSelectors": ["**/*.sql"],

I think I prefer this way instead of changing the prettier configPath as mentioned here #3104 (comment)

[negroamarante]

Hi! I don't know if the issue I'm having is regarding plugins or what but on an Apex class I have this line private static List<City__c> cities = [SELECT Id, Name FROM City__c] ?? new List<City__c>(); and when the prettier runs is giving this error: "ERROR" - 9:02:17 AM] Error formatting document. ["ERROR" - 9:02:17 AM] Unexpected token '?'.. Expecting ':' but was: ';'. Error: Unexpected token '?'.. Expecting ':' but was: ';'. This is what I've got on my package.json:

I've been reading and trying some things but nothing works.. If I've remove the null-coalescing operator it works...