tips & tricks - set up Babel file watcher in WebStorm 11+ on Windows

tips-tricks-setup-babel-file-watcher.md

Last modified

• Jan 18, 2016. WebStorm 11.0.3

References

• http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/

cd to project directory

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

At WebStorm

• Settings > Tools > File Watchers > + Babel
• Set program to be the full path to babel.cmd i.e. typically $ProjectFileDir$\node_modules\.bin\babel.cmd
• Keep other default settings (or optionally set a custom scope to exclude node_modules dir)
• Settings > Languages & Frameworks > JavaScript
• Set JS version to ES6

At project dir

• Create a config.babelrc file, add {"presets": ["es2015"]}