PhpStorm setup Ecmascript 6 - Babel

Setting up Babel file watcher in PhpStorm to transpile ES6 code to Javacript

First install babel globaly (you have to have node.js installed):

npm install babel-cli -g

Install Babel CLI in your project via npm:

npm install --save-dev babel-cli

Now go to settings , and select Babel file watcher from the list. In the File watcher configuration, specify the path to Babel CLI in the project node_modules folder (e.g. node_modules/.bin/babel on OS X). On Windows it has to be an exe, bat, or cmd file.

Preferences | Tools | File watchers click + button

In addition to that, you need to install Babel 6 preset for transpiling ECMAScript 6 locally in your project (for JSX you need babel-preset-react plugin instead). To do that open the Terminal at your application root directory and run:

npm install --save-dev babel-preset-es2015

Add .babelrc file to your project with the following code to enable the preset:

{ "presets": ["es2015"] }

Remember to choose scope of your project to transpile. Otherwise filewatcher will transpile all .js files in your project. Choose folder recursivly.