Prettier code formatting

[Graquick]

Tell us how you think we can improve Sandpack

Packages affected

• [ ] sandpack-client
• [x] 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.

[faseehahmed1]

Hey @Graquick 👋, did you get this working with version "@codesandbox/sandpack-react": 2.14.4 - I've had no luck. The sandbox above works but sandpack.updateFile(sandpack.activePath, prettierCode); activePath is no longer a prop in version 2.14.4.

Any advice is highly valued. :)

[Graquick]

Hey @faseehahmed1, YES I did! I'm working with an simple example to give to help you get started. You can expect it to be ready either today, or tomorrow (latest).

[Graquick]

Hey @faseehahmed1 once again. As promised, here's the sandbox: Sandpack with Prettier -sandbox

Features

1. Code formatting supports .js, .jsx, .ts, .tsx, .css, and .scss files
2. Embedded prettier logo that shows the current state of the formatted code. If format is successful, logo will appear green for some time. If format causes an error, logo will stay red until formatted correctly.

Notes

1. I've included comments in the sandbox that explain the main functions and hooks
2. I'm debouncing the formatting with lodash, and you can easily set the debounce delay in the code. I've set it to 150ms.
3. I explicitely added the newest version to this sandbox, and it worked well with the sandpack.activeFile property (see more in the sandbox)

I remember struggling with this, and was so happy when I finally got it working. I really hope this will help you get back to coding fast!

[faseehahmed1]

This is awesome @Graquick - thank you 🙌