Can you integrate text formatter tool?


#1

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


#2

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!


#3

+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:


#4

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)

Running npm scripts from the editor toolbar
#5

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


#6

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


#7

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


#8

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


#9

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'.


#10

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: