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

Prettier code formatting #1092

Closed
1 of 2 tasks
Graquick opened this issue Feb 25, 2024 · 7 comments
Closed
1 of 2 tasks

Prettier code formatting #1092

Graquick opened this issue Feb 25, 2024 · 7 comments
Labels
triage New issues that needs consideration

Comments

@Graquick
Copy link

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]);
@Graquick Graquick added the triage New issues that needs consideration label Feb 25, 2024
@danilowoz
Copy link
Member

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
Copy link
Author

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
Copy link
Author

Nevermind, got it to work.

@faseehahmed1
Copy link

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
Copy link
Author

Graquick commented Jul 2, 2024

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
Copy link
Author

Graquick commented Jul 2, 2024

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
Copy link

This is awesome @Graquick - thank you 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
triage New issues that needs consideration
Projects
None yet
Development

No branches or pull requests

3 participants