Support TSX/JSX formatting

[manishtpatel]

Right now formatting is supported or not right.

As you see below it just removes all indentation from JSX, i would prefer that we leave jsx code out of formatting if can't be supported right now, this makes formatting completely useless in TSX files.

If i understand this correctly then typescript has formatting capability and which is being used by atom-typescript in the sample below.

Original Code

Formatted Code

[mhegazy]

@vladima or @saschanaz if either is interested in this issue, please feel free to send a PR and will pull it in.

[mhegazy]

thanks @saschanaz !

[manishtpatel]

Need some tweaking

                <h5 className="level-text">
                  <span className="custom-radio">
                    <span className={checkIfSelected}></span>
                  </span>
                  <span className={checkedClass}>{levelText}</span>
                </h5>

Getting formatted to

                <h5 className="level-text">
                  <span className="custom-radio">
                    <span className={checkIfSelected}></span>
                      </span>
                  <span className={checkedClass}>{levelText}</span>
                    </h5>

Looks like it doesn't track closing tags properly yet. Above is very small sample, but all closing tags are getting messed up.

[mhegazy]

@saschanaz wanna take another look?

[saschanaz]

@mhegazy Sure. It looks like I hurried up too much :/

@manishtpatel How did you employ the latest master branch on Atom? I couldn't really make it work on it, so I just added the test and thought it's okay now. Sorry for that.

PS: atom-typescript has already been updated but nothing changes when I click "Edit -> Lines -> Auto Indent". Am I doing something wrong?

PS2: Ah... Control+Alt+L does the trick. Now I can debug more easily.

[manishtpatel]

@saschanaz atom-typescript does not support "Edit -> Lines -> Auto Indent", Ctr+Alt+L should do it.

I verify using two methods, atom-typescript Ctr+Alt+L or directly using typescript@next nightly build. I have custom gulp code to use typescript nightly directly.

[alexgorbatchev]

Also experiencing this. I'm a bit concerned that this is pushed out to 1.8 milestone. Seems like an essential tool for large teams.

export default class Application extends React.Component<any, any> {
  render() {
    return (
      <div>
        <Component name="World" kind={ComponentKind.warning} />
      </div>
    );
  }
}

results in

export default class Application extends React.Component<any, any> {
  render() {
    return (
      <div>
        <Component name="World" kind={ComponentKind.warning} />
        </div>
    );
  }
}

[DanielRosenwasser]

@alexgorbatchev our apologies, but it's a matter of time constraints. 1.7 should be going out soon, so there really isn't a way to get this in for it.

[olmobrutall]

Hi, first of all thank you for your great work. I've been using Typescript since the beginning and, since then, I feel at home building Web apps.

I was initially surprise that you find time to include JSX support, given that XML literals was never added to C#, but I quickly realize that in this case was much more justified: The relationship of Javascript with HTML is much stronger, and the feature is only enabled in .tsx files.

Since them I've started to rebuild our framework using react (https://github.com/signumsoftware/framework/wiki/Signum-React).

In theory it's going to be awesome, with a templating technology that has all the expressivity of modern ES6, strongly typed bindings, and interface definitions auto generated from C#.

In practice however some problems make the experience very frustrating:

• Errors in TSX elements formatting.
• Lack of colorization Colorization of JSX code in VS 2015 #4835,
• No auto-close when writing html tags (in the Visual Studio 2015).

I know the comment is not very concrete, just a heads-up that there's at least one developer that will be veeery hapy if this gets solved.

[DanielRosenwasser]

This should be fixed. Try it out with our nightly in a few hours.

[rent-a-developer]

This should be fixed. Try it out with our nightly in a few hours.

Where can I get the nightly build?
I only found nightly builds for the compiler and the msbuild tasks, but don't you also need a new version of the TS Visual Studio Integration for the formatting to work?

Any help is highly appreciated.
The messed up formatting in TSX files drives me crazy :-)

[olmobrutall]

+1 to how to make it work in VS

[olmobrutall]

Works great in 1.8! Thanks!

[rent-a-developer]

Works great in 1.8! Thanks!

How did you get it working in VS with TS 1.8?

[matijagrcic]

How did you get it working in VS with TS 1.8?

Download and install TypeScript_Dev14Full.exe

[rent-a-developer]

@matijagrcic Thank you very much!

Where did you find this link?
Does a build of the TS tools exist for VS 2013?

[matijagrcic]

Where did you find this link?
Does a build of the TS tools exist for VS 2013?

Just go to Announcing TypeScript 1.8 Beta and in the first paragraph you'll see the following.

TypeScript 1.8 beta is available for Visual Studio 2015

[rent-a-developer]

Perfect. Thank you very much!
I am looking forward for the TS 1.8 Tools for VS 2013!
(VS 2015 does not work well for my project, I guess the ReSharper implementation for VS 2015 is screwing up things.)

[wbhob]

Any news on TSX formatting? Noticed this hasn't really been touched in a while.

[rooch84]

I'm having the same issue with JSX attributes not indenting properly in .tsx files. Is there any plan to fix this?