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.
// @flowimport 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