Prettier plugin not working with vs code and nextjs project

[AyushKoul00]

What version of prettier-plugin-tailwindcss are you using?

^0.3.0

What version of Tailwind CSS are you using?

3.3.2

What version of Node.js are you using?

18.12.1

What package manager are you using?

npm

What operating system are you using?

Windows

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug.

Describe your issue

I have created a next js project using create-next-app using npm in vs code. I have the prettier extension in vs code and my code is formatting properly (however, the class orders isn't changing). Everything else is working in prettier.

I have tried a lot of things:

• I have made the default formatter in vs code to prettier
• I have changed the .prettierrc.json file to prettier.config.js and .prettierrc.cjs
• I have tried to reload the vs code editor
• I have tried to uninstall and then install prettier v2.8 based on this
• I have checked "format on save" in the vs code settings
• I have run npx prettier --write src/app/page.tsx (this does the same thing - formats the whole document but doesn't sort the class order. Everything else like tabs, spaces, etc is formatted)

[HenrijsS]

Wasn't working for me either, but I put the version for prettier "^2" and deleted my package-lock.json and reinstalled the packages.

Afterwards reloaded the VSCode window and it worked. Try to do those steps exactly like I did and see if it works for you.

[vestimir]

@AyushKoul00 I just did exactly the same steps and came here to report and saw your ticket.

For me it works in a plain HTML project, but with a Next project (same older and compatible prettier 2.8.8 version) it does not work at all.

[raulrpearson]

Same here, I get this error in the Prettier output pane:

["ERROR" - 02:21:52] Error resolving prettier configuration for [...]
["ERROR" - 02:21:52] Cannot read properties of undefined (reading 'parsers')

UPDATE: I fixed it by downgrading to Prettier 2.8.8 and restarting VS Code.

For reference: prettier/prettier#15020

[masterkain]

prettier 3+

["INFO" - 7:01:23 AM] Extension Name: esbenp.prettier-vscode.
["INFO" - 7:01:23 AM] Extension Version: 9.19.0.
["INFO" - 7:01:23 AM] Using config file at '/Users/kain/Sites/airbroke/.prettierrc.json'
["ERROR" - 7:01:24 AM] Error handling text editor change
["ERROR" - 7:01:24 AM] Cannot read properties of undefined (reading 'parsers')
TypeError: Cannot read properties of undefined (reading 'parsers')
    at Jz (/Users/kain/Sites/airbroke/node_modules/prettier-plugin-tailwindcss/dist/index.js:2368:52914)
    at Object.<anonymous> (/Users/kain/Sites/airbroke/node_modules/prettier-plugin-tailwindcss/dist/index.js:2368:43390)
    at Module._compile (node:internal/modules/cjs/loader:1188:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1243:10)
    at Module.load (node:internal/modules/cjs/loader:1058:32)
    at Module._load (node:internal/modules/cjs/loader:893:12)
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)

prettier 2.8.8 no issues

[AyushKoul00]

@HenrijsS I tried that. it doesnt work. did you delete the node modules folder also?

@raulrpearson I had tried that originally and I tried it again just now too. It is not working. Please tell me the version of tailwind, prettier, and prettier plugin you are using. also what is ur prettier config file name and what did u put in it?

Update:
Now when I format the document through cli using npx prettier --write src/app/page.tsx , the plugin is working. But it isn't working when I save or for the selection (i have format on save on in the vs code settings)

[raulrpearson]

@raulrpearson I had tried that originally and I tried it again just now too. It is not working. Please tell me the version of tailwind, prettier, and prettier plugin you are using. also what is ur prettier config file name and what did u put in it?

Same Tailwind, Prettier and Prettier Tailwind plugin as yourself, which I think are the culprits, but Node.js 18.16.1, pnpm and macOS. I.e. for me the fix was going from Prettier 3.0.0 to 2.8.8, as recommended.

If it's just not working "on save", could the esbenp.prettier-vscode VS Code extension be picking up a different Prettier version than the one you have installed in your project? Just a thought. You might be able to diagnose that by having a look at the Prettier output pane in VS Code. Mine dumps a JSON file mentioning the version:

["INFO" - 12:40:58] PrettierInstance:
{
  "modulePath": "...",
  "version": "2.8.8",

[narasimhajupally]

facing same issue

[jamesmt-95]

Wasn't working for me either, but I put the version for prettier "^2" and deleted my package-lock.json and reinstalled the packages.

Afterwards reloaded the VSCode window and it worked. Try to do those steps exactly like I did and see if it works for you.

Thanks @HenrijsS. It has worked for me.

"prettier": "^2.8.7",
 "prettier-plugin-tailwindcss": "^0.3.0",
 "tailwindcss": "^3.3.2"

If the problem still persists, try the package combo above.

As @HenrijsS mentioned,

• Install prettier": "^2.8.7 (Note: I tried with prev. 2.8.8, But doesn't work).
• Delete package-lock.json file.
• Reinstall the packages using npm install
• Close and Reopen the VSCode.

[rolanday]

Can confirm broken from my end as well -- prettier works on save if remove prettier-plugin-tailwindcss from prettier.config.js.

    "prettier": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.3.0",

Running Remix here, so nothing to do w/ Nextjs (may want to edit title)

[dev-garcia]

Português - Brasil.

Após perder horas tentando configurar a versão 3, apaguei a pasta "node_modules" e editei a versão do prettier nos arquivos "package-lock.json" e "package.json" para a versão 2.8.7, dei ">reload window" e voltou a funcionar normalmente!

• [ Deletar a pasta "node_modules" em seu projeto.]
• [ Editar a versão do Prettier nos arquivos "package-lock.json" e "package.json" para a versão 2.8.7]
• [ npm install] // ou yarn caso esteje usando
• [ Recarregar o Vs Code]

#178 #176 #

[actraiser]

Just to confirm too - when removing prettier-plugin-tailwindcss from the prettier.config.js's plugin array, prettier works fine, even in the latest 3.0.0-version.

Greest
-act

[csulit]

2.8.7

This one works

[thecrypticace]

Hey! We've released v0.4.0 with Prettier v3 support which should fix any issues you all are having.

@AyushKoul00 I saw you got it working with Prettier v2 CLI — great to hear. You can try v3 now as well. (I did with your repo and it worked).

As an aside "format on save" and the Prettier VSCode extension can be finicky. When it doesn't work it's usually related to settings in VSCode itself, package manager, the type of config file being used (.js, .json, etc…), and sometimes even Prettier itself. You can usually work around these problems by using "Format Document (Forced)".

You can read more about this in one of my replies to an earlier issue: #113 (comment)

[anthonydu]

Hey! We've released v0.4.0 with Prettier v3 support which should fix any issues you all are having.

v0.4.0 works wonders! Thank you! I literally just encountered this issue 10 minutes ago! Glad it is now fixed!

[Celarye]

Hey, I updated the plugin to v0.4.0 and prettier to v3.0.0, but it's somehow still not working for me in my Next.js project. Previously, I was using v0.3.0 of the plugin and v2.8.8 of Prettier, which worked flawlessly (exact same enviroment). Can someone help me troubleshoot this? Let me know if you need any additional information. Thanks!

[thecrypticace]

@Celarye a reproduction would be helpful here. Note: If you were relying on autoloading to load the plugin that won't work anymore as Prettier v3 has removed plugin autoloading entirely. You'll need to explicitly specify that you're using prettier-plugin-tailwindcss.

edit: also if you could, open a new issue with the reproduction please. It helps keep track of things so they don't get lost in the noise.

[cookernetes]

@thecrypticace I can confirm wholeheartedly what @Celarye is saying. Same thing is happening for me, using Next, Prettier, ESLint, and this plugin.

Only way I fixed it (after 3 god damn hours) is by uninstalling prettier, and installing version 2.8.7, as suggested in Portugese by @dev-garcia (so tysm).

This is still an issue, so I have no clue why it is a closed case/issue.

[thecrypticace]

@cookernetes Do you have a project / reproduction you can share?

Creating a fresh Next.js project, adding Prettier v3, and v0.4.0 of this plugin sorts classes via the CLI and VS Code.

Repo of my setup I just created: https://github.com/thecrypticace/next-prettier-tailwind

[thecrypticace]

Also, I'll need information about your environment to be able to troubleshoot this any further:

• Windows / macOS / Linux
• NPM / Yarn / PNPM
• The name and content of your Prettier config file

[sudiddo]

Hey, I updated the plugin to v0.4.0 and prettier to v3.0.0, but it's somehow still not working for me in my Next.js project. Previously, I was using v0.3.0 of the plugin and v2.8.8 of Prettier, which worked flawlessly (exact same enviroment). Can someone help me troubleshoot this? Let me know if you need any additional information. Thanks!

This also happened to me, but i fixed it with

1. If you don't have any prettier configuration file or prettierrc, create new / change it to prettier.config.js
2. Add this inside prettier.config.js

module.exports = {
  ... any config that you may have inside prettierrc
  plugins: ["prettier-plugin-tailwindcss"], <-- add this line
};

4. Reload vscode

Make sure that you have the right version of prettier tailwind plugin package.

This is my version.

"prettier": "^3.0.0",
"prettier-plugin-tailwindcss": "^0.4.0",

hope this help

[vestimir]

@thecrypticace here you go a reproducable repo: https://github.com/vestimir/next-tailwind-prettier

My environment is M2 Macbook Air, latest macOS, Node 19.7 (installed via asdf), VS Code with prettier extension (my editor is setup to format files on save).

Given https://github.com/vestimir/next-tailwind-prettier/blob/master/pages/index.js#L5 my expectation is the order of classes to be updated upon save.

[Celarye]

module.exports = {
  ... any config that you may have inside prettierrc
  plugins: ["prettier-plugin-tailwindcss"], <-- add this line
};

Adding this indeed fixed it for me. Thank you for the support!

[thecrypticace]

@vestimir I replicated your setup from that information (except I'm on an M1 Max MacBook Pro and use fnm to manage Node versions). Format on save is working for me. It could be that you have an outdated prettier extension installed perhaps (I'm using v9.19.0 — which looks to be the latest)?

I installed deps using npm. If you're using PNPM or Yarn v2/v3 PnP I'd try using npm install to see if that fixes it. Both have known problems with Prettier itself — especially in conjunction with the VSCode extension.

Screen.Recording.2023-07-13.at.09.42.38.mov

You can check to see if the prettier extension is even running on save by opening up the output window for it:

Screen.Recording.2023-07-13.at.09.55.11.mov

[vestimir]

@thecrypticace I've managed to get it working, you can ignore the sample repo. I had issues with the local VS Code configuration (which can become big mess after a couple of years with no cleanup) and hidden problem with an invalid prettier option that was swallowing errors.

Few details:

Verify your VS Code config

Check all keys that start with ["SOME_LANGUAGE"]: {. It's even better if you have "editor.defaultFormatter": "esbenp.prettier-vscode",.

Prettier configuration options

Very weirdly prettier config was complaining for a wrong configuration option on one machine, but the identical setup was failing quietly on another machine. I commented out all lines except the plugin include and started moving one by one until I've found the offender.

PS: Thanks for taking a look 🍻

[roddutra]

I had the same issue but mine was due to a different problem, in case it helps anyone that has the same issue:

It is obvious in hindsight, but I was working off of a Next.js template repo and I hadn't noticed that they had defined the Prettier config in the package.json of that project, which then meant that Prettier was not loading the plugin no matter which prettier config file and extension I tried using until I removed that or added the plugin there instead 🤦‍♂️

[djb160]

Same/similar issue here with:

• Win11
• VSCode v1.83.0
• npm v9.5.1
• Next v13.5.6
• prettier v3.0.3
• prettier-plugin-tailwindcss v0.4.0

Stepping down to:

• prettier v2.8.7
• prettier-plugin-tailwindcss v0.4.0

1. Delete package-lock.json
2. Close and re-open VSCode
3. npm -i
4. now my tailwind re-formats on save as expected

[elie222]

My prettier config:

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

I had to restart VS Code for it to work though.
Full project: https://github.com/elie222/inbox-zero

[kevinschaich]

For me – I had to make sure the Tailwind plugin comes last:

    plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],

This made it work in the CLI.

If it's not working for you with the esbenp.prettier-vscode extension, then you also need to globally install whatever plugins you're expecting to run:

npm i -g prettier-plugin-organize-imports
npm i -g prettier-plugin-tailwindcss

[thecrypticace]

@kevinschaich yes the plugin must come last. This is listed in the readme.

You should not have to install anything globally for the Prettier VSCode extension to work and I'm not sure why that'd fix something for you except maybe when prettier is only installed globally and not in your project itself.

[josh4mento]

I just started a new Nextjs project and I've found that sorting works fine with the className attribute but it fails to sort when trying to use "non-standard" attributes even after setting it up in tailwindAttributes in the prettier config file. Anyone else have insight on this issue?

My environment:

• macOS
• VSCode v1.84.2
• Yarn 1.22.21
• Next v14.0.3
• Node v20.10.0
• Prettier v3.1.0
• prettier-plugin-tailwindcss v0.5.9

[supriome]

Still not work for me, I start an empty nextjs project, and install tailwindcss, but it not work.

Project Url: https://github.com/supriome/nextjs-withtailwindcss-sort

@thecrypticace

[mrcn04]

Can confirm broken from my end as well -- prettier works on save if remove prettier-plugin-tailwindcss from prettier.config.js.

    "prettier": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.3.0",

Running Remix here, so nothing to do w/ Nextjs (may want to edit title)

This! For the people who are still facing the issue, if you're using prettier-plugin-tailwindcss pkg, just remove it or upgrade the prettier version. Both will work.

[Mostak-Ahamed-Nishat]

Go to vs code settings.json and push this line of code into the object. 

"files.associations": {
    "*.js": "javascriptreact"
  },

Hope that will work.

[sakird]

Adding *.{ts,tsx,js,jsx,html} into Prettier: Document Selectors in the VS Code settings solves this problem.

Source:
https://stackoverflow.com/a/77786959/3517339

[dileepainivossl]

For me – I had to make sure the Tailwind plugin comes last:

    plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],

This made it work in the CLI.

If it's not working for you with the esbenp.prettier-vscode extension, then you also need to globally install whatever plugins you're expecting to run:

npm i -g prettier-plugin-organize-imports
npm i -g prettier-plugin-tailwindcss

I installed the prettier-plugin-organize-imports as dev dependency and it worked