Can you integrate text formatter tool?

Can you add a text formatter, like the Tidy button in JSFiddle

7 Likes

Cool idea PropShaftJeff,

Can you also give me a sense of how you use the tidy tool? Like,

  • do you write code as you want and click tidy right at the end of your editing session?
  • do you periodically click on the tidy button like every X minutes?
  • how do you think you would you use it in a collaborative situation where someone else is editing the in the same file with you?

Thanks!

1 Like

+1 I signed up for this forum just to vote for this! By day my IDE is Visual Studio, and I find myself reflexively trying Ctrl + KD when I’m in gomix to try to tidy the file. Personally, I prefer a user-initiated tidy in most cases over those that continually format as you type. The two exceptions might be when I end curly bracket or html element. In those cases, usually I want the contents to be formatted.

In a collaborative situation I could see it being an “interesting” problem to solve. In a non-realtime source controled scenario most merge tools usually hand this gracefully (until they don’t :wink:

1 Like

Since I installed prettier in my editor I can’t live without it.
I find myself copy/pasting my glitch js files to my editor to format it with prettier - which kind of defeat the purpose…

  • yes I would like a button to run it
  • with a keyboard shortcut (CMD+S is a good one since most editors allow to hook auto format as a pre save action)
  • for collaborative session, I would use the action as well (no autoformat)
2 Likes

Since there is not much activity on this one and as I am hooked on prettier, I have built a bookmarklet backed by glitch to format my js editor with prettier. You can find it at https://prettier.glitch.me/

To use, drag the bookmarklet link to your bookmark bar, open up a glitch javascript editor and click on the bookmarklet and BAM your js if formatted as it was intended to be, that is with prettier

4 Likes

Unfortunately that Prettier bookmarklet doesn’t work anymore due to How to Beautify/Prettify the text? :frowning:

1 Like

Working version over here http://prettier-new.glitch.me

1 Like

Awesome, thanks! Any way to get it to format JSX correctly? It’s indenting everything to the same level

1 Like

That’s interesting :+1:

It seems the original project was using the prettier package, which supports the JSX syntax. Another option that may be useful too is to add the “prettier” package to your project and then run it with the “start” or “prestart” script:

{
  ...
  "scripts": {
    "prestart": "prettier --write '**/*.js'",
    ...
  },
  "dependencies": {
    "prettier": "^1.11.1",
    ...
  },
  ...
}

But that means it will edit your code while you’re typing (unless you disable rebuilds). Alternatively you can run manually using the “Advanced Options > Open Console” with npx prettier --write '**/*.js'.

1 Like

It seems the Prettier package can now run completely in the browser, so it should be possible to make the original bookmarklet work again :grin:

2 Likes

Hello,

I am aware of the limited resources at Glitch’s disposal but is has been over 2 years since the issue was first opened …

Would it be easier and faster for glitch to provide integration of the formatter on save through the watcher which handles autosave ?

A minimal implementation would execute npm run format on autosave if scripts.format exists in package.json.

A slightly more involved implementation would allow users to have 2 throttles in watch.json : one for restart and one for format (and maybe add a different one for install :slight_smile: )

My current workaround is to run npm run format manually in the console and have the format script do a refresh but that’s quite painful as it doesn’t know which file is being edited and is thus forced to go through all the files.

Thanks

1 Like

Hey @ywg-jean, welcome to the Glitch forum and thanks for the comment and the upvote!

Many of us here at Glitch use a prettier browser extension for a certain level of formatting consistency. There’s @sheridan’s one for Chrome and @potch’s version for Firefox that might be of interest.

We’re also hoping to start more in-depth work on the Editor and associated components soon, although we don’t have specific plans about what we’ll be working on or when yet.

1 Like

Hi @cori, thanks for the pointers, I spent some time searching the support forum before updating the initial issue but I didn’t find references to these extensions. I still think integrated support would be better than installing an extension from a random stranger :slight_smile:

1 Like

Yep, totally agree with you there, but Potch and Sheridan are Glitch Staff, so not complete strangers :smiley: - sorry, I should have made that more clear.

1 Like

We just launched our official code formatter tool! Please let us know in the launch thread if you have any feedback :slight_smile: Make your code Prettier