Cannot find package 'prettier-plugin-tailwindcss'

[skyfenton]

Describe the bug
Plugin cannot format document, error output in VSCode Output:
Error: Could not warm up worker. Formatting a file for the first time may take longer than usual. Message: Cannot find package 'prettier-plugin-tailwindcss' imported from /vscode/vscode-server/bin/linux-x64/dc96b837cf6bb4af9cd736aa3af08cf8279f7685/noop.js Stacktrace: Error: Cannot find package 'prettier-plugin-tailwindcss' imported from /vscode/vscode-server/bin/linux-x64/dc96b837cf6bb4af9cd736aa3af08cf8279f7685/noop.js at new NodeError (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:17822:5) at packageResolve (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18802:9) at moduleResolve (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18834:20) at defaultResolve (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18921:16) at resolve2 (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18938:12) at importFromFile (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18953:16) at importFromDirectory (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:23905:10) at importPlugin (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:23917:12) at async loadPluginWithoutCache (file:///workspaces/waller/react-frontend/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:23921:18) at async Promise.all (index 0)

Running prettier from the command line with "pnpm exec prettier --write ." works as expected.

To Reproduce
Run pnpm install -D prettier prettier-plugin-tailwindcss
Add "plugins": ["prettier-plugin-tailwindcss"] to .prettierrc file
Reload vscode window.
See error in VSCode "Prettier Eslint" Output, formatting document does not work.

Expected behavior
Worker should be warmed up with no errors, plugin should format document correctly.

Example Project

Versions (please complete the following information):

• VS Code Prettier ESLint extension: 6.0
• Visual Studio Code: 1.89.1
• Node: 20.13.1
• Package Manager: pnpm 9.1.1
• prettier: 3.2.5
• eslint: 8.57.0

System Specifications (please complete the following information):

• OS: Debian GNU/Linux 12 (bookworm) in a Devcontainer
• Processor: 12 × AMD Ryzen 5 PRO 4650U with Radeon Graphics
• RAM Size: 16 Gb

Additional context
Node_modules folder is in a subdirectory of the project root (in a monorepo with other folders for other utilities).

[sleeyax]

Same issue with regular NPM. #183 isn't helpful t either.

[Ganbin]

Same issue for me.

[ozyx]

I think you may need to install prettier-eslint as a dev dependency now? From my understanding, this used to come pre-packaged with the VSCode extension but that changed in v6.0 due to reasons. I have the extension working on our project now with

    "eslint": "8.57.0",
    "eslint-plugin-prettier": "5.1.3",
    "prettier": "3.2.5",
    "prettier-eslint": "16.3.0",

[sleeyax]

I think you may need to install prettier-eslint as a dev dependency now? From my understanding, this used to come pre-packaged with the VSCode extension but that changed in v6.0 due to reasons. I have the extension working on our project now with

    "eslint": "8.57.0",
    "eslint-plugin-prettier": "5.1.3",
    "prettier": "3.2.5",
    "prettier-eslint": "16.3.0",

I have the exact same versions as you in package.json dev dependencies and the issue is still there :/ I don't think it's related
tbh.

[sleeyax]

I ended up using Format Code Action instead. Works really well, no extra dependencies needed.

[github-actions]

This issue is stale because it has been open for 14 days with no activity.

[NullScope]

Hi, also having the same issue, regular prettier extension works just fine, the same goes for the CLI command, @idahogurl could you please look into this issue?

[gomez-git]

Same issue with prettier-plugin-organize-imports:

{
  "plugins": ["prettier-plugin-organize-imports"]
}

[resticker]

Since I couldn't get things, to work, I decided to not use any extension at all, and instead just use VS Code tasks and a keyboard shortcut.

My workaround:

Add to tasks.json or workspace settings:

"tasks": {
	"version": "2.0.0",
	"tasks": [
		{
			"label": "Format and Autofix ESLint",
			"dependsOrder": "sequence",
			"dependsOn": [
				"Format document",
				"Auto Fix ESLint"
			],
			"problemMatcher": []
		},
		{
			"label": "Format document",
			"command": "${command:editor.action.formatDocument}"
		},
		{
			"label": "Auto Fix ESLint",
			"command": "${command:eslint.executeAutofix}"
		},
	]
}

Add to keybindings.json:

{
    "key": "shift+alt+f",
    "command": "workbench.action.tasks.runTask",
    "args": "Format and Autofix ESLint",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
}

(I got the "when" by right-clicking the format command in VS Code's Keyboard Shortcuts and selecting Copy)

I just made this minutes ago, so I can't guarantee it will work well, but I love the idea of not relying on an extension for my formatting.

Hope this helps someone. Cheers 🍻

[github-actions]

This issue is stale because it has been open for 14 days with no activity.

[jsonMartin]

This is still an issue, see #234

[github-actions]

This issue is stale because it has been open for 14 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 14 days since being marked as stale.