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
Copy

---

Install Babel CLI in your project via npm:

npm install --save-dev babel-cli
Copy

---

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
                    
Copy

---

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
Copy

---

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

{
"presets": ["es2015"]
}
Copy

---

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

Copy

---