VS Code: JavaScript validation for ES7

I am trying out the Microsoft’s alternative of Atom editor and I found out it’s a bit tricky to enable all the features one needs for developing a ReactJS applications.

If you are using Mac or Linux you can easily enable code validation and auto-complete with ES7 features and still keep using build-in JSX/React support.

Visual Studio Code does not support ES7 yet. You can enable ES6 support by the following settings in your `jsconfig.js` file:

{
    "compilerOptions": {
        "target": "ES6"
    }
}

But this will not support some of the features that are commonly used but are not part of ES6 standard. Especially spread/rest operator.

There is a way how to work around this. We can use Flowtype for the validation instead of the build-in VS Code JavaScript validator. Don’t worry, you don’t have to use types or any other Flow features if you don’t want to.

1) Install Flow

npm install --save-dev flow-bin

2) Install VS Code Flow extension

3) Disable built-in validation

You will need the following in your Workspace settings.json

{
    // Enable / disable JavaScript validation
    "javascript.validate.enable": false
}

4) Configure flow

Create the configuration file:

touch .flowconfig

This would normally be enough, but Flow only checks files that contain annotation on the top by default.

// @flow
import React from 'react'
...

If you don’t want to add this to all your project files, you can add the following into .flowconfig file:

[options]
all=true

Warning: If your project has many dependencies it might not be wise to use the above option because of a Flow issue with node_modules. Instead use the annotation (at least until a workaround is found).

5) Run Flow server

That’s it! You can now run Flow, which will start up a server watching for changes and reporting errors directly into VS Code.

npm run flow