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 prettier/prettier#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
hosseinmd/prettier-plugin-jsdoc#10 (comment)

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

sveltejs/kit#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