Document enabling Babel syntax highlighting

[gaearon]

We should document how to configure editors to support “Babel” syntax scheme (JSX, Flow, ES6) for all .js files. The instructions should be added to the user guide and should include popular editors:

• Sublime Text 3
• VSCode
• Atom
• WebStorm

This issue is up for grabs. If you decide to work on it, please comment here so we don’t duplicate effort. If somebody is already working on it, please give them time and don’t try to submit a PR first.

Thanks!

[bsideup]

I would recommend you to include WebStorm/IntelliJ IDEA as a popular editor as well.
JSX/Flow/ES6 is supported OOTB and can be easily enabled there.

[MrRhodes]

Anyone want to big-up VS Code ? 😕

[hzoo]

This would be useful on the babel website as well actually. Could be another page for editor support (or we just link it)

[gaearon]

@hzoo If you could provide instructions for contributors as to where to send the PR, I’m happy to point our users to Babel website.

[mareksuscak]

@gaearon I assume this is the right place -> https://github.com/babel/babel.github.io

[cecilemuller]

In the meantime, babel-sublime's readme is a good documentation on how to set it up in Sublime Text 3: https://github.com/babel/babel-sublime

[hzoo]

@gaearon sure!

Yep it's https://github.com/babel/babel.github.io like @mareksuscak mentioned.

I was thinking it could be a separate page for editor integrations but it looks like there is already an entry with webstorm. So maybe we could just add the rest in the same place.

This is on the setup page

• Setup the site locally with https://github.com/babel/babel.github.io#setup
• You'll need to add an entry to tools.yml for each tool
• create a folder for the tool like in https://github.com/babel/babel.github.io/tree/master/_includes/tools and add a install.md and a usage.md (can copy the format from webstorm)

I would feel free to add a screenshot if that is helpful instead of just text

Will show up in the 2 and 3 steps like

[mareksuscak]

Just a quick note. Just went through the WebStorm setup guide and I think this is not really what we wanted. That guide documents how to setup babel compiler integration, not babel syntax highlighting. Or did I miss something?

cc @hzoo @gaearon

[hzoo]

Yeah that's the question I was thinking about: it's different but I think we could include that in there. Or we can make a new page for it

[gaearon]

If we point CRA users at this page we’ll want a separate place because we don’t want them to enable transpilation in IDE. In fact this has been a source of mistakes before.

[hzoo]

Ok we can just make another page - maybe under https://github.com/babel/babel.github.io/tree/master/docs/usage called syntax-highlighting or something? (should rethink how it's organized)

[mareksuscak]

I agree with @gaearon. Looking at the menu, the only appropriate place seems to be FAQ at the moment but I'd rather consider adding a new top level link or reorganize one of the top level links to accommodate the Syntax Highlighting guide.

[kasperpeulen]

For Webstorm, if you use create-react-app, from File -> New Project -> React App, it will configure everything for you automatically.