Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not formatting monorepo #311

Open
nhuxhr opened this issue Sep 30, 2022 · 10 comments
Open

Not formatting monorepo #311

nhuxhr opened this issue Sep 30, 2022 · 10 comments

Comments

@nhuxhr
Copy link

nhuxhr commented Sep 30, 2022

The formatter seems not to be working with monorepo!

I have three mono repo in a project (i.e. landing, servers, and studio), the landing dir is a Next.js app, while the servers dir contains multiple servers which are Nest.js apps, and finally, the studio dir is a Svelte (SvelteKit) app. If the working directory is the root/project folder prettier works perfectly on the landing and servers dir, and other files in the studio dir except for the .svelte files but the formatter works with .svelte files if the working directory is studio itself.

And my PC lag if I have multiple vscode instances running with other heavy applications (i.e. Docker, Firefox, Postman, etc)

What am I doing wrong!?

System info:

  • OS: Ubuntu 22.04
  • CPUs: Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz (4 x 2500)
  • GPU Status: 2d_canvas: unavailable_software canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: disabled_software multiple_raster_threads: enabled_on opengl: disabled_off rasterization: disabled_software raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: disabled_software video_encode: disabled_software vulkan: disabled_off webgl: unavailable_software webgl2: unavailable_software webgpu: disabled_off
  • Load (avg): 1, 0, 0
  • Memory (System): 7.65GB (2.55GB free)
  • Process Argv: --no-sandbox . --crash-reporter-id 93055eb6-6fd7-4a64-90ee-21296107114f
  • Screen Reader: no
  • VM: 0%
@dummdidumm
Copy link
Member

Are you using pnpm? If yes, possible duplicate of #155

@nhuxhr
Copy link
Author

nhuxhr commented Sep 30, 2022

Are you using pnpm? If yes, possible duplicate of #155

Nope! I'm using yarn and the Svelte project is TypeScript.

@max-got
Copy link

max-got commented Oct 19, 2022

Exactly the same problem here.
Monorepo with "/studio" and "/web" and the prettier plugin works only if i cd web && code .

@jerebtw
Copy link

jerebtw commented Oct 25, 2022

I have the same problem

@ItzaMi
Copy link

ItzaMi commented Nov 16, 2022

Joining this issue since I have the same problem.
Have a folder with a BE and FE project and just initialized a SvelteKit project inside the FE folder. prettier doesn't work unless I cd into the FE folder

@toqueteos
Copy link

toqueteos commented Nov 17, 2022

Same problem here.

Output logs for Svelte plugin (VSCode opened from /tmp/monorepo):

Initialize language server at  file:///tmp/monorepo
Trying to load configs for /tmp/monorepo
Loaded config at  /tmp/monorepo/app/svelte.config.js
...
Error: Cannot find module 'prettier-plugin-svelte'
...

Output logs for Svelte plugin (VSCode opened from /tmp/monorepo/app):

Initialize language server at  file:///tmp/monorepo/app
Trying to load configs for /tmp/monorepo/app
Loaded config at  /tmp/monorepo/app/svelte.config.js

One way to resolve this might be to init Svelte language server from the same path as where the svelte.config.js is located (which would require to change how the language operates, first find config, then init from there).

@phcoliveira
Copy link

@jsxclan, @jerebtw, @ItzaMi and @toqueteos, I had some problems in configuring prettier in my monorepo setup. But I fixed them with this setting pluginSearchDirs. Take a look at my prettier config, which is at the root of the package: apps/client, hence the value of ../../, because NPM installed the plugin at the root of the monorepo.

I hope it helps.

/**
 * @type {import('prettier').Options}
 */
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  pluginSearchDirs: ['.'],
  overrides: [{files: '*.svelte', options: {parser: 'svelte'}}],
  tailwindConfig: './tailwind.config.cjs',
  arrowParens: 'always',
  bracketSpacing: false,
  endOfLine: 'lf',
  plugins: [],
  pluginSearchDirs: ['../../'],
  printWidth: 80,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: false,
  svelteSortOrder: 'options-styles-scripts-markup',
  svelteStrictMode: true,
  svelteBracketNewLine: false,
  svelteAllowShorthand: false,
  svelteIndentScriptAndStyle: true,
};

@toqueteos
Copy link

@phcoliveira solution didn't work for me but I found a working alternative.

  1. Rename .prettierrc to prettier.config.cjs
  2. Set plugins: [require('prettier-plugin-svelte')]
  3. It works!

Here's the default .prettierrc (as generated from npm create svelte@next) translated into JS:

/**
 * @type {import('prettier').Options}
 */
module.exports = {
	useTabs: true,
	singleQuote: true,
	trailingComma: 'none',
	printWidth: 100,
	plugins: [require('prettier-plugin-svelte')],
	pluginSearchDirs: ["."],
	overrides: [{ 'files': '*.svelte', 'options': { 'parser': 'svelte' } }]
};

@JL102
Copy link

JL102 commented Dec 10, 2022

image
Here's another example of svelte language tools somehow not being able to import modules that are inside a subfolder of the workspace root (the workspace root is ScoringApp-Serverless; all of the Svelte code and Svelte-related packages are in offline)

@ryoppippi
Copy link

ryoppippi commented Jul 3, 2023

Same problem with this monorepo
https://github.com/vercel/turbo/tree/main/examples/with-svelte
I used this (#311 (comment)) config, but pretttier doesn't look detect svelte files

PS: I manually added file extensions and it works fine

pnpm prettier  './**/*.{js,ts,mjs,cjs,json,svelte}' --write

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants