prettier-vscode icon indicating copy to clipboard operation
prettier-vscode copied to clipboard

Published 20 hours ago • verified publisher icon prettier

Custom Plugins in Prettier Config Breaks Prettier Extension

Open alicanerdogan opened this issue 3 years ago • 22 comments

Summary

Providing plugins field in .prettierrc breaks the extension. When a prettier plugin exists in the .prettierrc file, the extension cannot resolve the module for the plugin. Meanwhile using terminal to format files (e.g: npm run prettier --write "src/**/*.{ts,tsx,js,jsx,json}") works.

Github Repository to Reproduce Issue

https://github.com/alicanerdogan/prettierrc_bug

Steps To Reproduce:

  1. Create a repo with the following .prettierrc 
{
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "plugins": [
    "prettier-plugin-organize-imports"
  ]
}
  1. Add prettier-plugin-organize-imports as a custom plugin
  2. Format a ts file using the VSCode prettier extension

Expected result

File(s) should be formatted.

Actual result

Files are not formatted.

Additional information

VS Code Version: 1.61.2

Prettier Extension Version: 9.0.0

OS and version: MacOS BigSur 11.6

Prettier Log Output

["INFO" - 2:48:24 PM] Formatting /Users/johndoe/repos/test_app/src/index.ts
["INFO" - 2:48:24 PM] Using config file at '/Users/johndoe/repos/test_app/.prettierrc'
["INFO" - 2:48:24 PM] Using ignore file (if present) at /Users/johndoe/repos/test_app/.prettierignore
["INFO" - 2:48:24 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 2:48:24 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 2:48:24 PM] Prettier Options:
{
  "filepath": "/Users/johndoe/repos/test_app/src/index.ts",
  "parser": "typescript",
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "plugins": ["prettier-plugin-organize-imports"]
}
["ERROR" - 2:48:24 PM] Error formatting document.
["ERROR" - 2:48:24 PM] Cannot find module 'prettier-plugin-organize-imports'
Require stack:
- /Users/johndoe/repos/test_app/node_modules/prettier/index.js
- /Users/johndoe/.vscode/extensions/esbenp.prettier-vscode-8.2.0/dist/extension.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js
Error: Cannot find module 'prettier-plugin-organize-imports'
Require stack:
- /Users/johndoe/repos/test_app/node_modules/prettier/index.js
- /Users/johndoe/.vscode/extensions/esbenp.prettier-vscode-8.2.0/dist/extension.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:934:15)
    at v.resolve (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:4:760)
    at /Users/johndoe/repos/test_app/node_modules/prettier/index.js:59236:21
    at Array.map (<anonymous>)
    at Object.load (/Users/johndoe/repos/test_app/node_modules/prettier/index.js:59228:61)
    at Object.load [as loadPlugins] (/Users/johndoe/repos/test_app/node_modules/prettier/index.js:15770:23)
    at /Users/johndoe/repos/test_app/node_modules/prettier/index.js:59302:28
    at Object.Success [as format] (/Users/johndoe/repos/test_app/node_modules/prettier/index.js:59324:12)
    at t.default.<anonymous> (/Users/johndoe/.vscode/extensions/esbenp.prettier-vscode-8.2.0/src/PrettierEditService.ts:477:45)
    at Generator.next (<anonymous>)
    at i (/Users/johndoe/.vscode/extensions/esbenp.prettier-vscode-8.2.0/dist/extension.js:1:7027)

alicanerdogan avatar Oct 26 '21 13:10 alicanerdogan

👍 same here

oskarmcd avatar Oct 26 '21 13:10 oskarmcd

Workaround is using a .prettierrc.js with a bit help of module resolution in case anyone having a similar problem

module.exports = {
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  trailingComma: 'none',
  arrowParens: 'avoid',
  plugins: [require.resolve('prettier-plugin-organize-imports')]
}

alicanerdogan avatar Oct 27 '21 13:10 alicanerdogan

For plugins installed in node_modules, you don't need to set any config. Remove the plugins setting and it should work.

ntotten avatar Nov 04 '21 02:11 ntotten

For plugins installed in node_modules, you don't need to set any config. Remove the plugins setting and it should work.

Unfortunately, that doesn't work for me. ~~In my case it's also prettier-plugin-organize-imports that is causing trouble, so I wonder if it's specific to that particular plugin, or if it's an issue with all plugins.~~

Edit: nevermind, I'm using @trivago/prettier-plugin-sort-imports. Similar, but different. :)

IanVS avatar Nov 30 '21 21:11 IanVS

For plugins installed in node_modules, you don't need to set any config. Remove the plugins setting and it should work.

Also seeing this error and this doesn't work for me when using a global install of prettier and plugins. Doesn't matter if prettier.resolveGlobalModules is enabled or not. Perhaps it has to do with using nvm? The plugins are in the same folder as the prettier.prettierPath setting.

zachhardesty7 avatar Jan 12 '22 03:01 zachhardesty7

Same issue when using yarn pnp

["INFO" - 09:31:28] Formatting file:///~/gh/visualon/docker-buildpack/package.json
["INFO" - 09:31:28] Using config file at '~\gh\visualon\docker-buildpack\.prettierrc.json'
["INFO" - 09:31:28] Using ignore file (if present) at ~\gh\visualon\docker-buildpack\.prettierignore
["INFO" - 09:31:28] File Info:
{
  "ignored": false,
  "inferredParser": "json-stringify"
}
["INFO" - 09:31:28] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 09:31:28] Prettier Options:
{
  "filepath": "~\\gh\\visualon\\docker-buildpack\\package.json",
  "parser": "json-stringify",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 160,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "plugins": [
    "prettier-plugin-package"
  ]
}
["ERROR" - 09:31:28] Error formatting document.
["ERROR" - 09:31:28] Cannot find module 'prettier-plugin-package'
Require stack:
- 
Require stack:
- ~\gh\visualon\docker-buildpack\.yarn\cache\prettier-npm-2.7.1-d1f40f5e1a-55a4409182.zip\node_modules\prettier\index.js
- ~\gh\visualon\docker-buildpack\.pnp.cjs
Error: Cannot find module 'prettier-plugin-package'
Require stack:
- 
Require stack:
- ~\gh\visualon\docker-buildpack\.yarn\cache\prettier-npm-2.7.1-d1f40f5e1a-55a4409182.zip\node_modules\prettier\index.js
- ~\gh\visualon\docker-buildpack\.pnp.cjs
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
    at Function.require$$0.Module._resolveFilename (~\gh\visualon\docker-buildpack\.pnp.cjs:14353:54)
    at p.resolve (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:4:761)
    at ~\gh\visualon\docker-buildpack\.yarn\cache\prettier-npm-2.7.1-d1f40f5e1a-55a4409182.zip\node_modules\prettier\index.js:37165:25
    at Array.map (<anonymous>)
    at Object.load (~\gh\visualon\docker-buildpack\.yarn\cache\prettier-npm-2.7.1-d1f40f5e1a-55a4409182.zip\node_modules\prettier\index.js:37160:65)
    at Object.load [as loadPlugins] (~\gh\visualon\docker-buildpack\.yarn\cache\prettier-npm-2.7.1-d1f40f5e1a-55a4409182.zip\node_modules\prettier\index.js:15932:23)
    at ~\gh\visualon\docker-buildpack\.yarn\cache\prettier-npm-2.7.1-d1f40f5e1a-55a4409182.zip\node_modules\prettier\index.js:37227:24
    at Object.Success [as format] (~\gh\visualon\docker-buildpack\.yarn\cache\prettier-npm-2.7.1-d1f40f5e1a-55a4409182.zip\node_modules\prettier\index.js:37243:12)
    at t.default.format (~\.vscode\extensions\esbenp.prettier-vscode-9.5.0\src\PrettierEditService.ts:463:45)
    at t.PrettierEditProvider.provideEdits (~\.vscode\extensions\esbenp.prettier-vscode-9.5.0\src\PrettierEditService.ts:322:22)
    at F.provideDocumentFormattingEdits (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:87:45332)
["INFO" - 09:31:28] Formatting completed in 0.036ms.

viceice avatar Jul 27 '22 07:07 viceice

Can this be an CWD issue?

viceice avatar Jul 27 '22 07:07 viceice

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

github-actions[bot] avatar Apr 22 '23 14:04 github-actions[bot]

not stale

viceice avatar Apr 23 '23 17:04 viceice

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

github-actions[bot] avatar Jun 23 '23 02:06 github-actions[bot]

no

viceice avatar Jun 23 '23 05:06 viceice

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

github-actions[bot] avatar Aug 24 '23 01:08 github-actions[bot]

not stale

viceice avatar Aug 24 '23 05:08 viceice

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

github-actions[bot] avatar Oct 24 '23 01:10 github-actions[bot]

not stale

CartoonFan avatar Oct 24 '23 02:10 CartoonFan

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

github-actions[bot] avatar Dec 24 '23 01:12 github-actions[bot]

no

Stanzilla avatar Dec 30 '23 05:12 Stanzilla

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

github-actions[bot] avatar Apr 27 '24 01:04 github-actions[bot]

Seems like it's still an issue?

CartoonFan avatar Apr 27 '24 02:04 CartoonFan