Prettier 3 and this plugin do not work as intended with Yarn 2 PNP #237
Comments
|
So, I'm not able to reproduce this with the eslint extension in VSCode. However, when I installed the project it used Yarn 4 rather than Yarn 2 like the title suggests (it's set to 4 in the I can however reproduce a similar error with the Prettier extension in VSCode but I suspect this is actually an issue with either the Prettier extension or Yarn and not our plugin because it works from the command line without issue. I'm purely speculating here but I think it has to do with the fact that our plugin is ESM and that may not work well with Yarn PnP. I tried another plugin like Astro which is also ESM only and get a similar error when using just it. On a holiday break right now but I'll take a closer look when back. |
|
@thecrypticace sorry that was my bad! I meant to say yarn 4 and was saying yarn 2 in the sense that it was the type of yarn version/executable that lives in the project rather than globally on the system. In regards to the plugin, I think you are correct. ESLint picks up and shows that the classnames are ordered wrong. It also shows this with other formatting issues. Take the following screenshot as an example: The issue I am seeing is that when I enable this plugin, format on save and running format from the command palette (cmd+shift+p) no longer formats the file. The error I get when i run the format with prettier command from vscode is as follows: So you may be right that the issue could reside with the vscode prettier extension, but it only occurs when this plugin is enabled. When I remove this plugin from the prettier config the formatting works automatically on save or when running from the command palette as expected. I am also on holiday break for the next few weeks but I will try to monitor this thread and reply if anything is needed! |
|
@liamlows I am running into the same issue on one of my projects. I'm using yarn 4 with pnp enabled, and I'm using the prettier vscode extension. As you noted, it's only an issue with the vs code extension enabled (have it set as my default formatter). However, if I remove the prettier tailwind css plugin, the prettier vscode extensions seems to works fine.. I have to unplug prettier, along with any other plugin I am using for it to work as well. I thought maybe there needed to be a dependency or peer dependency specified in the yarn rc file? I have yet to figure it out so I've resulted in just using the cli temporarily. I run format on save, and the output window for prettier will show me the exact error as you pointed above. Using the prettier cli in the command line works fine with the prettier tailwind plugin enabled. |
|
I have this issue with yarn 4. This plugin breaks prettier "Format on save" and "Format document with..." command, although it works when prettier is ran from the terminal. |
|
I encountered the same above mentioned issues with the VS code extension. When I add the plugin definition to my |
|
After nothing else worked, as a workaround I managed to get this working on yarn 4 by switching from PnP to the node_modules folder as described here: https://yarnpkg.com/configuration/yarnrc#nodeLinker |
I have found this also works for me as well although due to our use of the novel "zero-installs" feature I cannot use it as a workaround for now since it requires PNP. This makes me think that it could be a peer dependency issue or something along the lines of that. If it works fine when not in PNP, but breaks in PNP and prettier and plugins are installed unplugged then maybe a peer dep is not being install that also needs to be unplugged? I'll take a look at this later and see what I can find although im on vacation right now so a little tough. |
|
If u using prettier v3 and prettier-plugin-tailwindcss v0.5: |
|
I ended up creating a "node_modules" at the parent directory and placed "prettier" and "prettier-plugin-tailwindcss" inside it. If I had put them directly into the project's node_modules folder, they would have been removed every time I ran "yarn install." |
|
hmmm... |
|
i'm still have this issue, writing tailwind classes without sort in so bad |
|
Just an update from my end. We ultimately switched to PNPM and a monorepo for our projects and no longer have this issue. Now that we are using |
|
the issue persists |
|
Any progress? Creating |
|
My temporary solution is to use a config file like this. // .prettierc.js
module.exports = {
singleQuote: true,
trailingComma: 'all',
tabWidth: 2,
printWidth: 80,
// Using import()
plugins: [import('prettier-plugin-tailwindcss')],
};With this config But the problem is prettier extension in VSCode gets infinitely loaded. So I decided to temporarily replace "Format on save" with "format on pre-commit" by using |
관련 이슈 tailwindlabs/prettier-plugin-tailwindcss#237 답이 보이지 않는 상황이라 일단 플러그인을 제거하기로 함. tailwindcss 정렬 기능은 필수적이므로 대체 방안을 고안해야함.
|
I found a way to use this plugin with Yarn 2 First you type this command Edit your {
"semi": false,
"singleQuote": true,
"plugins": [
".yarn/unplugged/prettier-plugin-tailwindcss-virtual-6a7c69ed2e/node_modules/prettier-plugin-tailwindcss/dist/index.mjs"
]
}
But I don't want to use this with specific path. Are there any good solution? |
|
After an afternoon of searching, I finally found the perfect solution. unplug the prettier-plugin-tailwindcss yarn unplug prettier-plugin-tailwindcssfor the .prettierrc.cjs module.exports = {
plugins: [
require.resolve('prettier-plugin-tailwindcss'),
],
}Remember to restart the prettier(because it will not hot-reload the new config). Simply, you can restart the IDE. details are here |
What version of
prettier-plugin-tailwindcssare you using?For example: v0.5.9
What version of Tailwind CSS are you using?
For example: v3.3.0
What version of Node.js are you using?
For example: v18.18
What package manager are you using?
For example: Yarn 2 with PNP
What operating system are you using?
For example: macOS arm
Reproduction URL
https://github.com/liamlows/Prettier-Issues
NOTE: uses yarn 2 with PNP and zero installs, all you should need to do is ensure
corepack enableis run and runyarnto install unplugged dependencies.Describe your issue
I've been battling this issue for a few weeks now and just got around to finally making a reproduction repo for it.
When attempting to load plugins via prettier version 3, they dont seem to work as intended. I use two plugins one being a import sorting plugin and the other being this plugin. If i try and provide the plugin as stated in the installation instructions for prettier v3, eslint/prettier will fail to load the plugin saying it cannot be found. This is the error ESLint spits out (and prettier when you run a force format):
I first had this issue with the import sorting plugin but when i created an issue on their repo (IanVS/prettier-plugin-sort-imports#140), I was provided with a easy fix. Simply unplugging the plugin and adding it to the plugins array in the prettier config with
require.resolve(). That worked fine in isolation and format on save and linting worked fine, but the second I tried adding in the tailwind plugin it broke prettier's format on save. I also tried using therequire.resolve()trick on the prettier plugin and it did make the cannot find error go awayCurrently the repo linked above has it setup with
require.resolve()and the linting works but formatting on save does not. If you remove theprettier-plugin-tailwindcssfrom the plugins array, it will work again and format on save.I assume this is the correct place for this issue, however let me know if this also needs to be cross-posted to prettier or yarnpkg.
Thanks for any insight as to what the problem is!
The text was updated successfully, but these errors were encountered: