Prettier doesn't seem to be aware of the plugin when installed with pnpm

[Zerowalker]

Not sure how to give any useful info here. But when using this plugin with pnpm prettier doesn't seem to detect it.

I don't know what the root cause is, if it's in pnpm, prettier or the plugin. But i am issuing it here as it seem to be most reasonable to start.

I will gladly help out as much as i can as i am the one asking here with basically no useful information, so just ask don't be shy!

[Zerowalker]

// Works

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm i --save-dev prettier-plugin-svelte prettier
npx prettier src/App.svelte

// Fails - src\App.svelte[error] No parser could be inferred for file: src\App.svelte

pnpx degit sveltejs/template my-svelte-project
cd my-svelte-project
pnpm install
pnpm i --save-dev prettier-plugin-svelte prettier
pnpx prettier src/App.svelte

[Zerowalker]

Oh it works if you add the pnpx degit sveltejs/template my-svelte-project --plugin-search-dir=. Though not sure how to go about doing that when it's used in vscode, but as it doesn't seem to need it when installed with npm i am guessing it can be done here as well?

[bluwy]

Prettier currently has a PR that fixes this https://github.com/prettier/prettier/pull/9167

[jonatansberg]

I tried everything to get this to work. Upgrading to the latest version of pnpm that hoists prettier plugins by default and removing the prettier svelte file association in VSCode finally fixed this for me!

The prettier file association (if you have it) can be found in your user settings or by clicking on the "Svelte" button/label in the bottom right corner and selecting the appropriate option:

[dominikg]

got it to work with .prettierrc.js

module.exports = {
  useTabs: false,
  printWidth: 80,
  tabWidth: 2,
  semi: false,
  trailingComma: 'none',
  singleQuote: true,
  plugins: [require('prettier-plugin-svelte')],
  overrides: [
    {
      files: '**/*.svx',
      options: { parser: 'markdown' }
    },
    {
      files: '**/*.ts',
      options: { parser: 'typescript' }
    },
    {
      files: '**/CHANGELOG.md',
      options: {
        requirePragma: true
      }
    }
  ]
}

[JulianvonGebhardi]

Same here. It only worked with the .prettierrc as js file.

module.exports = { singleQuote: true, arrowParens: 'avoid', svelteStrictMode: true, svelteSortOrder: 'scripts-markup-styles', plugins: ['prettier-plugin-svelte'], };

But if I change the code json format as ".prettierrc" file it won’t work since there seems to be a problem with the plugin. Because once I added the plugin line it stopped working entirely.

[bluwy]

Strangely for me, keeping it as JSON and specifying the plugins option works too.

{
  "proseWrap": "never",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "plugins": ["prettier-plugin-svelte"]
}

Versions: pnpm: 5.17.3 prettier: 2.2.1 prettier-plugin-svelte: 2.2.0

EDIT: Seems like the above only works when running through the command line. Doesn't work in vscode. Setting to "./node_modules/prettier-plugin-svelte" however made it work on both scenarios. Thanks to this comment.

[aminya]

I have the same issue with prettier-plugins-jsdoc https://github.com/hosseinmd/prettier-plugin-jsdoc/issues/10#issuecomment-814487518

My npmrc

public-hoist-pattern[]=*
package-lock=false
lockfile=true
prefer-frozen-lockfile=false

[parischap]

In fact, there are two simultaneous issues:

• first issue has been described and solved above : the prettier package does not detect automatically a plugin when using pnpm. This is solved by adding manually this line: plugins: ['./node_modules/prettier-plugin-svelte'] in the .prettierrc.cjs file. If you do this, you will now be able to format your .svelte files from the command line.
• second issue for those working with VS Code is that the most used prettier plugin (esbenp.prettier-vscode) does not detect the plugin either and therefore does not know what to do with a .svelte file. So you must add this line in your settings.json: "prettier.documentSelectors": ["**/*.svelte"] and you must also add the following lines in your .prettierrc.cjs:

  overrides: [
    {
      files: '*.svelte',
      options: { parser: 'svelte' },
    },

[ebeloded]

Thank you @martinjeromelouis! Your solution worked for me.

[dominikg]

for sveltekit it seemed to have helped to add --plugin-search-dir=. to prettier cli args

https://github.com/sveltejs/kit/pull/1360

[Florian-Schoenherr]

so how would one get the vscode extension to work out of the box on svelte files with format on save? seems to be a cross-cutting problem

[webdev23]

For those trying to figure out what's going on, when mounted into the src folder of a svelte project, the command should be something like (the opposite way...)

prettier --write --plugin-search-dir=./../ *.svelte

[ottodevs]

In fact, there are two simultaneous issues:

• first issue has been described and solved above : the prettier package does not detect automatically a plugin when using pnpm. This is solved by adding manually this line: plugins: ['./node_modules/prettier-plugin-svelte'] in the .prettierrc.cjs file. If you do this, you will now be able to format your .svelte files from the command line.
• second issue for those working with VS Code is that the most used prettier plugin (esbenp.prettier-vscode) does not detect the plugin either and therefore does not know what to do with a .svelte file. So you must add this line in your settings.json: "prettier.documentSelectors": ["**/*.svelte"] and you must also add the following lines in your .prettierrc.cjs:

  overrides: [
    {
      files: '*.svelte',
      options: { parser: 'svelte' },
    },

Thanks @martinjeromelouis

Confirming that this solution still works perfectly, with several other plugins like prettier-plugin-jsdoc.

it works both with command line prettier and VScode format on save option. This issue should go to the pnpm repo, is not specific to prettier-plugin-svelte, I experienced it with every prettier plugin.

[ndan]

It start working in VSCode after adding "pluginSearchDirs": ["."] to .prettierrc

.prettierrc:

{
  "pluginSearchDirs": ["."]
}

VSCode setting (e.g. .vscode/settings.json)

  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

[bbugh]

The minimum change I needed to make this work for both the CLI and VSCode was to add this to .prettierrc:

{
  "plugins": ["prettier-plugin-svelte"]
}

[shinebayar-g]

In case anyone wondering using .prettierrc.cjs seems to be working.

[AlexRMU]

I managed to launch prettier plugins by specifying them in .prettierrc

[CanRau]

Got my Prettier back working with prettier-plugin-tailwindcss by moving config into package.json, none of .js, .cjs, .mjs worked for me 🤷🏼

[muuvmuuv]

Also getting this:

Cannot find module '/Users/marvin/Developer/xxxxx/Website/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/prettier-plugin-svelte/plugin.js' imported from /Users/marvin/Developer/xxxxx/Website/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs
Did you mean to import /Users/marvin/Developer/xxxxx/Website/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/prettier-plugin-svelte/plugin.js?

I also tried removing all plugins but then it complains about the parser that it could not find...

[bluwy]

I think this issue is already fixed in Prettier v3 and can be closed. Plugins should be specified via:

{
  "plugins": ["prettier-plugin-svelte"]
}

In the prettier config file. The repo's readme is already updated with this info.

[muuvmuuv]

Hm yeah for Prettier v3, but no, it seems to be a Prettier VS Code v10 issue. Downgraded to v9 and it works again.

[ddxv]

• first issue has been described and solved above : the prettier package does not detect automatically a plugin when using pnpm. This is solved by adding manually this line: plugins: ['./node_modules/prettier-plugin-svelte'] in the .prettierrc.cjs file. If you do this, you will now be able to format your .svelte files from the command line.

My solution in the end was to change to: plugins: ['./node_modules/prettier-plugin-svelte/plugin.js']

which got things working again.

[gl-schulzi]

• first issue has been described and solved above : the prettier package does not detect automatically a plugin when using pnpm. This is solved by adding manually this line: plugins: ['./node_modules/prettier-plugin-svelte'] in the .prettierrc.cjs file. If you do this, you will now be able to format your .svelte files from the command line.

My solution in the end was to change to: plugins: ['./node_modules/prettier-plugin-svelte/plugin.js']

which got things working again.

Same for me.