Skip to content

Prettier plugin doesn't load automatically after pnpm 7.0.0 hoisting #4700

@oedotme

Description

@oedotme

pnpm version: 7.0.1

Code to reproduce the issue:

Installing prettier and prettier-plugin-tailwindcss

pnpm add --save-dev prettier prettier-plugin-tailwindcss

Expected behavior

prettier-plugin-tailwindcss loads automatically as it's now hoisted since pnpm 7.0.0

Running prettier file.tsx should print the file content formatted correctly with tailwindcss classes sorted.

Actual behavior

prettier-plugin-tailwindcss doesn't load automatically, and requires specifying the plugins option at prettier config.

Running prettier file.tsx prints the file content formatted correctly but doesn't load/use prettier-plugin-tailwind.

Debugging

  • Installing the prettier and prettier-plugin-tailwindcss with npm 8.6.0 works as expected.
  • Replacing the symlinked node_modules/prettier installed with pnpm with the npm version made it work as expected.

Making plugins load manually

For prettier to load plugins as expected from my testing with pnpm version 7.0.0 to 7.20.0, its required to specify the plugins option in the prettier config:

// .prettierrc.js

module.exports = {
  arrowParens: 'always',
  printWidth: 120,
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: false,
  plugins: [require('prettier-plugin-tailwindcss')],
}

I also moved prettier config from JSON to JavaScript, to use plugins: [require('prettier-plugin-tailwindcss')] instead of "plugins": ["prettier-plugin-tailwindcss"] for text editors to resolve the plugins correctly as well.

Additional information

  • node -v prints: v18.0.0
  • Windows, macOS, or Linux?: Linux

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions