A Better ES2015+ and JSX Workflow in VS Code

Lately I’ve been trying VS Code, a code editor based on Electron. Since then, it really surprised me and it’s been a nice coding experience.

But…

By default, JS syntax highlighting and ES2015+ and JSX support don’t work as expected.

I’ve tried to workaround it by using:

Atom grammar. JSX support was pretty bad.
A development branch of VS Code colorization, which is delivered as an extension. Finally got JSX to work properly, but syntax highlighting was still missing something.

So, no success.

Improving your VS Code workflow

After much trial and error, I came up with a better JS workflow in VS Code.

1. Fix JS syntax highlighting

Install the Sublime Babel extension and make sure you’re using one of the suggested color themes. (I like Charcoal Oceanic Next!)

2. Use “JavaScript React” in .js files

VS Code only uses “JavaScript React” syntax in .jsx files. Add the following to your User (or Workspace) Settings:

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

3. Enable Emmet for JSX

(That’s a plus!)

VS Code uses Emmet by default, but doesn’t enable it for .jsx files. Add the following to your User Settings:

"emmet.syntaxProfiles": {
  "javascript": "jsx"
}

Let’s improve VS Code!

There has been improvements for JS grammar already, but it’s still not perfect.

Fortunately, VS Code is an open source project and can be improved by developers like us! Let’s not leave it like this. Give useful feedback and help!

Happy coding!