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.

[hzoo]

Ok babel/website#930 - we can figure out where to put it in another issue (unrelated to this).

[ggregoire]

For VSCode:

When you open your project for the first time, a light bulb is visible in the status bar. By clicking on it, VSCode creates a jsconfig.json at the root of your project. Copy/paste the following settings:

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules"
    ]
}

See more details here.

As VSCode 1.5 is not shipped with TypeScript 2, some syntaxes are detected as errors (i.e. the class properties syntax, included in CRA). To use TypeScript 2 with VSCode 1.5, you need to install TypeScript globally (npm install typescript -g) then to define the typescript.tsdk setting (File > Preferences > User/Workspace Settings) pointing to a directory containing the TypeScript tsserver.js file. When you reload VSCode and open a JS file, you'll see the custom TypeScript version number in the status bar.

See more details here.

(TypeScript 2 has been officially released on Sep 22, 2016, so I guess that VSCode 1.6 will be shipped with the new version.)

Finally, if you don't want to use the .jsx extension (recommended by CRA), use the following setting in your preferences:

"files.associations": {
  "*.js": "javascriptreact"
}

[mareksuscak]

Prepared the PR for CRA - we just need to update the link to the Babel's docs afterwards. You can see it yourself here. Below is a quick preview.

cc @gaearon