Prettier code formatting

[Graquick]

Tell us how you think we can improve Sandpack

Packages affected

• sandpack-client
• sandpack-react

What is this feature?

Prettier code formatting.

How would your idea work?

Code in the active file of an editor would be formatted by Prettier, either 1. on type, or 2. on save. I have this currently configured in my CodeSandbox User settings, and it works perfectly.

Do you have any examples of how you would like to see us implement it?

I've tried adding prettier as a dev dependency, and providing a settings.json file in the root, but with no success :(.

Also I had to come up with a workaround for "saving" a file in the editor, as there isn't a builtin function for that. Not sure if this is where my issue stems from 🤷🏾‍♂️:

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // Check if the key combination is pressed
      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
        // Prevent default behavior (saving the page)
        event.preventDefault();
        // Execute your function to update the current file
        sandpack.updateCurrentFile(
          sandpack.files[sandpack.activeFile].code,
          true
        );
      }
    };

    // Add event listener
    document.addEventListener('keydown', handleKeyDown);

    // Remove event listener when component unmounts
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [sandpack.files]);

[danilowoz]

Hey! Just to make sure, have you seen this guide/sandbox where we suggest a possible Prettier implementation?
https://codesandbox.io/p/sandbox/sandpack-prettier-1po91?file=%2Fsrc%2FApp.js%3A23%2C27-23%2C35

Hope it helps

[Graquick]

Thanks for the quick reply @danilowoz . I checked the sandbox out, but it seemed to work only when I set my User settings to enable prettier. I don't know how to do these settings with sandpack.

[Graquick]

Nevermind, got it to work.