AppCode
CLion
DataGrip
GoLand
IntelliJ IDEA
MPS
PhpStorm
PyCharm
Rider
RubyMine
WebStorm
Toolbox App
.NET Tools
ReSharper C++
Space
TeamCity
Upsource
YouTrack
HubECMAScript 6 in WebStorm: Transpiling
WebStorm supports ECMAScript 6 syntax. This support actually includes not only the ECMAScript 2015 standard, but also the 2016, 2017, and 2018 standards and even some proposals to the language, for example, import(). While these features get more and more support in modern browsers and runtimes (see the Kangax compatibility table), to deploy your ES6 code you still often need to compile it to ES5.1, the JavaScript version supported by all browsers.
In this blog post, we’ll have a look at some of the options that WebStorm offers to help you with this task.
But first things first: make sure ECMAScript 6 is set as the JavaScript version in WebStorm’s Preferences (Languages & Frameworks | JavaScript). And if you’re using React, select React JSX as your language version.
WebStorm will start providing smart coding assistance for ES6 and some of the latest proposals, including code completion, on-the-fly inspections, navigation for modules and classes, and more.
At the moment Babel is the most commonly used transpiler. You can configure and use it via WebStorm’s File watchers. This approach is good for compiling files on the fly for some experiments and debugging (note that for the client-side code you may still need some additional such as module bundlers). For production-ready code, it might be worth using Babel in your build process with webpack, Parcel, Grunt, Gulp, or npm — and WebStorm can also help you here too.
In this blog post:
Setting up Babel File watcher
File watcher is a WebStorm built-in tool that allows you to automatically run some command-line tools on file changes. For Babel WebStorm has pre-configured File watchers. Let’s see how to enable it.
Install Babel and its preset for the latest JavaScript features in your project using npm (or yarn):
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
If you’re using React and JSX, you would also need to install @babel/preset-react.
Now go to Preferences | Tools | File watchers, click + button and select Babel file watcher from the list.
In the File watcher configuration, check the path to Babel: it should be 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.
All other Watcher settings are predefined, so it is now ready to use. With this default setup, compiled files will be located in the dist folder.
Of course, you can modify the configuration or add more compilation options to the .babelrc configuration file to better fit your project needs.
Configuring File watcher
Here’re the settings that you can modify in the File watcher:
File type — specify the file type that the watcher will “watch” for you and run the program. If you’re using file extensions .es6 or .jsx, select ECMAScript 6 or React JSX respectively in the drop-down list.
Scope — select the scope the watcher will “watch.” By default the scope includes all project files; however, you may want to exclude your test files or some other files that you want to edit without triggering the watcher. You can create a new Scope and set the exclusion rules in Preferences | Appearance & Behavior | Scopes.
Arguments — this is where you can specify the options for Babel CLI.
With the default configuration in WebStorm, the generated ES5 files and source maps will be saved in the dist folder in the project root. The file names and their parent directories will be preserved.
Output paths to refresh — in this field you should specify the path to the compiled files (it could be a directory where the files are saved or the files themselves, separated with colon). The IDE will watch these paths for external changes and make sure that the changes are synchronized with the project.
Working directory (under Working Directory and Environment Variables) — the directory where the program is executed. By default that’s the directory of the file.
Auto-save edited files to trigger the watcher (under Advanced Option) – disable this option if you want to run watcher only when you save the file.
Visit WebStorm’s Help portal for more details on File watchers.
Setting up task runners: Grunt and Gulp
As mentioned earlier, you can set up Babel as a task for your build tool or task runner. Since WebStorm provides integration with Grunt and Gulp, you can start the task for traspiling your ES6 files from the Show tasks window.
Read about using Babel with Grunt or Gulp.
Make sure the project’s gruntfile.js (or gulpfile.js) is ready and all the required dependencies are installed (as well as the task runner itself). Then press Alt+F11 to see Run Grunt/Gulp task popup or open Grunt or Gulp tool window, select the task for transpiling you’ve created, and double-click it or press Enter to run.
You can create a new Run configuration for your task and start it with the Run… action (Ctrl-Alt-R on Mac or Crtl-Shift-F10 on Windows and Linux).
Using ES6 in Node.js
When you’re developing a Node.js application in ES6, one of the ways to run and test it is using @babel/register.
- Make sure you have @babel/cli and @babe/register installed in your project.
- In your Node.js run/debug configuration in the Node parameters field add:
-r @babel/registerDon’t forget to specify the path to the JavaScript file you’d like to run. - Save configuration and hit run or debug.
Alternatively (but we would recommend @babel/register), you can use @babel/node. To use it, you need to install it and the specify the path to the babel-node executable (in the .bin folder on macOS, .cmd or .exe file on Windows) in your node_modules folder in the Node interpreter field in the Node.js run/debug configuration.
Enabling source maps for debug
If you’d like to debug your code using WebStorm or Chrome, make sure the tools you’re using generates source maps. For example, when using Babel only, you need to add "sourceMaps": "both" option to your .babelrc file or pass it as a command-line argument.
If you’re using Babel as a part of a more complex build process, you might need an additional configuration for generating source maps, e.g. use gulp-sourcemaps with Gulp or add devtool: "source-map" option when using Webpack.
Source maps allow you to put breakpoints in the original source files in the IDE and be sure that they are hit then compiled code is executed in the browser.
Apart from choosing a transpiler, there are some other choices you need to make to start using ES6, like choosing a module system. We recommend consulting Axel Rauschmayer’s excellent blog post on Deploying ES6.
Develop with pleasure!
– JetBrains WebStorm Team
Habib says:
May 26, 2015Okay, so after Babel’s watch we will have following file structure:
– index.js (original)
– index-compiled.js (Babel)
– index-compiled.js.map (Babel)
Cool, but what is the idea?
How to set up working project from compiled files after that?
Ekaterina Prigara says:
May 26, 2015Please see another configuration described in the blog post that places compiled files in a separate folder or consider using a build tool of your choice to build a working project. Whatever you prefer best.
Greg M says:
May 26, 2015Would you please update the first Babel screenshot so that we can see the full arguments & output paths? Thanks
Ekaterina Prigara says:
May 27, 2015That are the default values for this type of file watcher.
Arguments: –source-maps –out-file $FileNameWithoutExtension$-compiled.js $FilePath$
Output paths to refresh: $FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map
Kyle Yancey says:
May 27, 2015Is there any way to make this the default behavior for javascript files in all projects? Or create a custom project template?
Ekaterina Prigara says:
May 28, 2015WebStorm will prompt you to enable a Babel file watcher in every project with ES6 files. Unfortunately, you can’t enable file watchers by default.
Rune Bjerke says:
June 3, 2015Just a small note, your blog engine whateveramajig is converting the two hyphens in sequence into a longer —, so every time someone copies and pastes from the example above it has to be corrected from — o u t – d i r to – – o u t – d i r (same for –source-maps)
Also, I’ve done this N+1 times now: the last “out” parameter in the Babel line for “$FilePathRelativeToProjectRoot$ –source-maps –out-dir out” wraps to the next line, so I’ve accidentally not copied it and had to correct it afterwards. Might be helpful to put it on a separate line so clumsy-fingers like myself don’t do this? 🙂
Rune Bjerke says:
June 3, 2015And look, the blog engine is messing up everything:
— double hyphen
– – hyphen space hyphen
– hyphen
Ekaterina Prigara says:
June 4, 2015Thanks for your comment, Rune. I’ll see how I can fix that.
markd says:
June 13, 2015Has anyone setup the debugger with babel-node?
gabe says:
June 29, 2015+1 on this
Tyler says:
October 1, 2015I don’t think it is possible… Babel is a transpiler. It creates different source code. I use babel with webstorm and I have to debug the out files from babel.
I could be wrong and someone is running native babel code, but I don’t think that is what Babel does.
Anthony Ettinger says:
November 18, 2015I am also wondering this. People say its possible to debug…but I don’t know if they mean use the webstorm node debugger with server side code using babel.
I tried changing path to
nodeto usebabel-nodeand it crashes when I run the debugger. It works fine when I runbabel-node server.jsfrom the command line.Ekaterina Prigara says:
November 18, 2015Hello Anthony, the trick with babel-node is that the source maps that we need for debugging (to map compiled files executed back to the original files) in case of babel-node are generated in memory and in a different way from “ordinary” source maps. We need to support them from scratch, here’s an issue: https://youtrack.jetbrains.com/issue/WEB-17151
Matteo says:
June 21, 2015Is it possible to debug es6 code right now or only the compiled “old” js ?
Ekaterina Prigara says:
June 22, 2015You can debug ES6 code with the source maps.
Matteo says:
July 3, 2015do you have a link with example ? sorry but i think i got blocked with silly problems
Ekaterina Prigara says:
July 6, 2015Here’s a simple example of ES6 Node.js app by Axel Rauschmayer: https://github.com/rauschma/node-es6-demo
You need to run npm install and then execute gulp task babel. The generated files will be saved in es5 directory. Put a breakpoint in the original es6 file and start a debug session for the generated file (since node can’t run es6 files). The breakpoint in the original file will be hit.
Konstantin Tarkus says:
July 6, 2015This way “Unit Test > Right Click > Debug” feature doesn’t work..
Ekaterina Prigara says:
July 7, 2015Sorry, I think I’m missing something: what Unit test? Can you please report an issue with more details on our issue tracker if you believe there’s an issue.
Randy says:
November 18, 2015@Matteco @Konstantin Tarkus it’s a known bug that’s been around for 8 months 🙁 https://youtrack.jetbrains.com/issue/WEB-16397 Jetbrains does not appear to think it’s a priority.
Logan says:
June 29, 2015Is it possible to use the ES6 and JSX features at the same time? Currently I get syntax errors if I use ES6 syntax within a JSX file.
Ekaterina Prigara says:
June 29, 2015Can you please send us a bug report with the code sample at https://youtrack.jetbrains.com/issues/WEB. Thanks!
Michael Romanoff says:
July 13, 2015after I enable JavaScript ECMAscript 6 as on your 1 screen. I still have squiggly underlines all over. Restart WB didn’t help. It looks like editor still didn’t pick up ES6 syntax for some reason. I have Mac 10.10.4 and WS 10.0.4
Ekaterina Prigara says:
July 13, 2015What is the error message you see? Can you please report an issue on our tracker providing more details on your project or contact our tech support. Thanks!
Leo Pelekh says:
July 17, 2015The issue with the file watcher approach is that one has to “require” the compiled “-compiled” files as node cannot execute ES6. This means that the ‘compiled’ files need to be checked in to repository and deployed. Am I missing something?
Also for me I can only put break-points in compiled files (not ES6), though it does break in ES6 file.
I feel that things would be much easier with babel-node debugging support.
Ekaterina Prigara says:
July 17, 2015File watchers can be good for testing out some ideas and debugging.
You can set us your production build process using some popular build tools like Grant or Gulp. Moreover, you can configure file watcher to store your file in dist/build directory and then deploy that.
For debugging you need to make sure that you have source maps.
For node-babel support please vote for and follow: https://youtrack.jetbrains.com/issue/WEB-17151
Andrew Willems says:
August 13, 2015Initially I could not get either the Babel or Traceur file watchers to work. I kept getting errors that ended with the following line: “env: node: No such file or directory”. I eventually found this web site that helped me solve the problem. I include my solution here just in case others encounter a similar problem. I had to copy my PATH variable to the clipboard (from, e.g., “echo $PATH” or from the .bash_profile file), go into WebStorm Preferences… > Tools > File Watchers, double click on Babel (which I had already previously created), click on the browse button (i.e. “…”) beside the “Environment variables” text box, click the “+” at the bottom, enter “PATH” in the lefthand “Name” column, and paste the copied PATH variable into the righthand “Value” column. The screen shots in your otherwise very helpful tutorial above show nothing in the “Environment variables” text box, so I still don’t know why I needed this filled in but you didn’t. Perhaps you could explain this apparent discrepancy. (e.g. Is there another place in Preferences where environment variables are set more generally rather than just for File Watchers?) Otherwise, thanks for showing how to get WebStorm to do ES6 transpiling…very useful!
Ekaterina Prigara says:
August 14, 2015Hi Andrew,
Thank you for your feedback and advice to other users.
Normally, WebStorm should understand your environment variable and use them to the IDE. Are you by any chance use nvm for managing you Node.js versions? Can you please check the output of nvm alias default command. If not, can you please send us your log file (menu Help – Show Log) by reporting a new issue here or using tech support form. Thanks!
Andrew Willems says:
August 18, 2015Yes, I do use nvm for managing my Node.js versions. In fact, I did just recently have problems with node/npm/nvm and ended up removing and re-installing all of them, so that may (or may not) have contributed to my problem. Again, if you could enlighten me on how using or not using nvm affects my ability to use WebStorm file watchers (or any other WebStorm tools), that would be greatly appreciated. (e.g. Is using nvm and WebStorm simultaneously problematic?) As for your other questions/suggestions, I get no output at all from nvm alias default. I just sent my log file to your tech support form, so maybe that will help your team.
Ekaterina Prigara says:
August 20, 2015Can you please run nvm alias default stable from your terminal and then restart WebStorm. That should fix the problem.
mrtpm says:
February 18, 2016had this same problem… took a while to find this comment but it helped!
linguokun says:
June 12, 2017Very thank you for your solution . I had encountered this problem. I wastes many hours, but now I solve it.
llamerr says:
September 4, 2015Is there a reason why PHPStorm doesn’t have Babel support from the start? (only Traceur available)
Ekaterina Prigara says:
September 4, 2015Which PhpStorm version do you use? We have added that not long time ago.
llamerr says:
September 5, 2015Oh, I see. I’m using PHPStorm 8.0.3 (latest version I can use with my license), was it added in PHPStorm 9 ?
Ekaterina Prigara says:
September 7, 2015Yes, you can try PhoStorm 9.5 EAP now, it’s free: http://blog.jetbrains.com/phpstorm/2015/09/phpstorm-9-5-eap-142-4491/
Santi says:
September 7, 2015Hi, is there any chance you guys could support experimental es7 features (https://babeljs.io/docs/usage/experimental/)? Syntax highlighting is working for some like object spreads and decorators but not for others like export extensions.
Ekaterina Prigara says:
September 7, 2015Would be really great if you report a feature request about Export extensions support on our issue tracker: https://youtrack.jetbrains.com/issues/WEB?q=%23es7 So far we had quite few requests about ES7 features and we don’t rush with the support since this syntax is still in stage 1. Thank you!
Dino Chiu says:
October 8, 2015Hi, I’m trying to use the babel to watch the *.jsx files , And I’ve followed your guide to setting WebStorm as 1.Set the Languages & Frameworks | JavaScript | JavaScript language version, choose ECMAScript 6. 2.Add a file watcher for babel buy default arguments .
But It’s still can not complier the *.jsx to *.js what WebStorm said the syntax was large glaring errors inside .
I’m sure the syntax is ok , cause I’ve used the babel’s online verify those ….
Could you help me ? witch setting did I miss ?
Ekaterina Prigara says:
October 9, 2015Sorry, I’m not sure I’ve understood correctly whether you got error from WebStorm or Babel? Is your code looks ok in WebStorm when you switched language version to JSX? Can you please provide more details and sample code. You can contact our tech support, that might be easier than to reply here.
Stefan Walther says:
November 24, 2015See here for a detailed step-by-step guide how to debug ES6 in Webstorm (11) using gulp:
https://github.com/stefanwalther/es6-debug-webstorm
Janne Hämäläinen says:
December 15, 2015How about giving an example of babel + webpack debugging ?
Ekaterina Prigara says:
December 15, 2015You can find an example in our blog post on Debugging Webpack apps: http://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/
Janne Hämäläinen says:
December 18, 2015Yes, I checked that and example works. However if I have Babel transpiled sources inside webpack I cannot get debugger working realiably. It was able to stop in some class constructors, but not stopping in actual functions. Also seemed that it was missing some lines completely by stepping oover “ghost” lines.
Ekaterina Prigara says:
December 18, 2015Can you please report us an issue about that on https://youtrack.jetbrains.com/issues/WEB, ideally with the sample project, so we could reproduce the problem and debug it. Would really appreciate that. Thank you!
Janne Hämäläinen says:
January 14, 2016I modified your webpack example and put it here:
https://github.com/jannhama/debugging-webpack/tree/master
Tried quickly but couldn’t get it even hit single breakpoint. I’m using browsersync server with port 3000. Console log was correctly printed in IDE but no breakpoint hit.
Janne Hämäläinen says:
January 25, 2016Created issue for this.
Christopher Waldon says:
December 20, 2015I just spent a while trying to debug errors in Babel. I eventually realized that I had my javascript set to “Prefer Strict mode”, which apparently meant that Babel was being executed in strict mode. This may be a really dumb newbie mistake, since I’m relatively new to Javascript, but I thought I would share the experience in case anyone else has trouble configuring this. After changing the Javascript setting to no longer prefer strict mode, I did have to restart WebStorm to get Babel running properly.
Ekaterina Prigara says:
December 21, 2015Thanks for sharing your experience!
VIc York says:
December 26, 2015I have to be doing something wrong here. I’ve followed these instructions, but the file watcher isn’t triggering at all.
Ekaterina Prigara says:
December 28, 2015Please check the checkboxes in the file watcher configuration: the first two should be enabled. Please also check that you don’t have any syntax errors in the file reported by WebStorm. If you do, but still want file watcher to work, check “Trigger file wathcer regardless of syntax errors”.
Zheka Dzecina says:
March 25, 2016Hi Vic
I had the same problem. You need restart your project in WebStorm
Ferdinand Prantl says:
January 4, 2016Thanks for the hint how to configure the Babel watcher to build a structure below “src” into a separate “out” directory! However, a usual project with such JavaScript files does not place the “src” directory itself into “out”; just its content.
For example, project sources:
src/
cards/
Card.js
players/
Computer.js
Human.js
gulpfile.js
The supposed build output:
out/
cards/
Card.js
Card.js.map
players/
Computer.js
Computer.js.map
Human.js
Human.js.map
You configuration sample will produce this:
out/
src/
cards/
Card.js
Card.js.map
players/
Computer.js
Computer.js.map
Human.js
Human.js.map
Notice the extra “src” sub-directory in the “out” directory. Is there a way to set up the WebStorm’s Babel watcher to omit the “src”?
Raul Cifuentes says:
March 15, 2018Change the default macro variable $FileDirRelativeToTheProjectRoot$ to just $FileDir$ in Babel Watcher settings, so it read as $FileDir$ –out-dir dist –source-maps –presets env
Ferdinand Prantl says:
January 4, 2016The “code” tag does not preserve whitespace… Here once more the three directory structure samples from above, indented by underscores:
For example, project sources:
src/
____cards/
________Card.js
____players/
________Computer.js
________Human.js
gulpfile.js
The supposed build output:
out/
____cards/
________Card.js
________Card.js.map
____players/
________Computer.js
________Computer.js.map
________Human.js
________Human.js.map
You configuration sample will produce this:
out/
____src/
________cards/
____________Card.js
____________Card.js.map
________players/
____________Computer.js
____________Computer.js.map
____________Human.js
____________Human.js.map
Ekaterina Prigara says:
January 5, 2016Please try to use $FileParentDir$ macros instead of $FilePathRelativeToProjectRoot$ in Arguments.
Maurice says:
January 6, 2016Hi, is it already possible to debug babel-node in webstorm?
Ekaterina Prigara says:
January 7, 2016Should be possible now, I believe (haven’t tested myself yet), but only with Node.js v4 (see https://youtrack.jetbrains.com/issue/WEB-16397#comment=27-1229849), waiting for our pull request to be merged in v5.
Lenny Markus says:
January 8, 2016Hi Ekaterina,
Has any progress been made on debugging code that has been transpiled on the fly using babel/register?
I understand that sourcemaps are in-memory, and that it’s not an easy problem to solve. I’d just like to know what plans (if any) there are for supporting it.
Ekaterina Prigara says:
January 11, 2016Hello Lenny, that is the same issue and as I said it was fixed when working with Node.js v4. Please file us a new issue and attach a sample project if debugger doesn’t work for you. Thank you!
Lenny Markus says:
January 14, 2016Oh, I didn’t understand that from the original answer. Just tried it out.
Works perfectly. Thanks again for everything!
Quick sample repo, works with babel-register, no need to set up transpiling: https://github.com/lmarkus/es6-webstorm
Ekaterina Prigara says:
January 14, 2016Good news! Thanks for the repo!
Lee Nave says:
February 22, 2016Unfortunately you can’t hot-swap ES6 code in the webstorm debugger (i.e.,g using the Update button). When I try that with Lenny’s sample project, I get “index.js: Failed to compile new version of script: SyntaxError: Unexpected token export”.
(Note: I changed line 10 of a.js to “setTimeout(alpha, 5000);” so that there would be a process to hot-swap.
Ekaterina Prigara says:
February 25, 2016We’re able to reproduce the problem. Here’s an issue, hope to get it fixed soon: https://youtrack.jetbrains.com/issue/WEB-20516
Lee Nave says:
February 22, 2016Whoops, make that “setInterval” 🙂
Ekaterina Prigara says:
March 1, 2016Sorry for not replying sooner.
Unfortunately, that doesn’t work. We’ve reproduced the problem, here’s a link to the issue that you can vote for and follow for updates: https://youtrack.jetbrains.com/issue/WEB-20516
Steven Schattenberg says:
February 4, 2016I’m using Intellij IDEA 14.1.5. I’ve followed these instructions and I still get the squiggly lines under any ES6 code. I also do not see the file watcher menu. What am I doing wrong?
Steven Schattenberg says:
February 4, 2016Nevermind. I see that I am missing some plugins.
Calvin Lee says:
February 16, 2016In my case it does not work when setting “program” as (on the “Edit Watcher” window):
pragram: …\myproject_folder\node_modules\.bin\babel
After I change to “babel.cmd”， the problem has been solved.
(Windows 10, WebStorm 11)
Jen says:
March 20, 2016Heya! My WebStorm is working great with arrow functions. However, when I try to use default parameters I get a
SyntaxError: Unexpected token =
Please help 🙁
Ekaterina Prigara says:
March 21, 2016Do you get this error message from Babel? Might be this issue: https://phabricator.babeljs.io/T7170
Ben H. says:
March 27, 2016Run Node with the –harmony_default_parameters flag. You are using default parameters in function calls without this feature.
Brian says:
April 12, 2016So I’m trying to make the jump from Sublime to IntelliJ, and as you might expect it’s been a bit of a process. There are currently two issues that I’m having with this transpilation process in WebStorm.
First, is that it’s much cleaner to transpile into a
distdirectory that mirrors yoursrcdirectory, and File Watchers with babel-cli don’t make this possible as it currently stands. This is because using--out-filewith babel-cli doesn’t create directories automatically, and there’s no way to get it to mirror the structure. Currently I’m just using npm scripts (babel src -d dist --watch) to get the desired behavior, but it’d be nice if it were baked into File Watchers.Second, IntelliJ doesn’t seem to understand how to resolve ES6 modules, so code completion is broken when using
transform-es2015-modules-commonjs. Coming from Sublime, I used TernJS which has anes_modulesplugin which resolves all of this fine. Consider adding support for resolving ES Modules, since many of us want to standardize on a single module syntax when writing server / client code, and ES6 modules are (obviously) going to be a thing.Thanks
Brian says:
April 12, 2016The second bit back: I didn’t have node core enabled for the project.
Ekaterina Prigara says:
April 14, 2016Hello Brian,
Thank you for your feedback.
You can specify whatever command line option you need in the arguments field of the File watcher. You can remove -out-file parameter and configure it to put all files in one folder.
Having Babel configured via npm scripts is also a good option for compiling ES6.
WebStorm understands ES6 imports and provides code completion and navigation for them: please make sure that ECMAScript 6 is selected as a JavaScript version in Preferences – JavaScript. If it doesn’t work for you, please send us a code sample or screenshot and provide a bit more details.
Ekaterina Prigara says:
April 14, 2016Actually found a more detailed example on setting up File watcher to put all the output in one folder: http://mcculloughwebservices.com/2015/12/10/webstorm-babel-6-plugin/
Stavros Kefaleas says:
March 3, 2017This is the correct way to do it.
Please replace your original post instructions with this one.
Lau Chung says:
July 9, 2016How do you minify with Babel 6 in phpstorm?
babel-plugin-uglify doesn’t support Babel 6.
I just installed
member-expression-literals
merge-sibling-variables
minify-booleans
property-literals
simplify-comparison-operators
but not enough for minification.
Ekaterina Prigara says:
July 10, 2016From the Babel documentation it seems that these plugins you’ve mentioned are recommended for minification. You might also try to set up a build process with build tools like Webpack, Gulp or Grunt that would run uglify right after the compilation with babel.
Lau Chung says:
July 11, 2016Regarding setting up a build process with Webpack or Grunt, do you mean adding one more filewatcher to monitor the bundle scripts and trigger webpack once the bundle scripts are regenerated by the babel filewatcher? Can you give me some suggestions on it?
Ekaterina Prigara says:
July 11, 2016Yes, you can either set up another file watcher that would take compiled js files and run uglify for them. Or use task runner/build tools instead. For example, http://macr.ae/article/gulp-and-babel.html or https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460
Darren says:
August 10, 2016On googling how to get Webstorm to resolve ES6 paths that had been configured in Webpack
i.e.
resolve: {
…
modules: [path.resolve(‘src’), path.resolve(‘node_modules’)],
…
}
This page came up first, but I found the following solution to work:
http://stackoverflow.com/questions/34943631/path-aliases-for-imports-in-webstorm
Basically in Preferences > Directories – Add your desired folder e.g. src as a Resource Root
Vladislav says:
August 28, 2016Just wanted to say thanks for owner of the article. Pretty useful and helpfull!
Eduardo Alvarez says:
October 7, 2016Hi i can’t run the file watcher there’s an error #13 “access denied” when I try to run it. I’m on Mac OS X El Capitan 10.11.6 and PyCharm 5.0.4
Ekaterina Prigara says:
October 10, 2016Can you please send a bit more details on your file watcher configuration to our tech support: https://www.jetbrains.com/support/
Please also attach the IDE log files (menu Help – Show logs in Finder). Thank you!
Jeff Gomez says:
October 7, 2016I appreciate the hard work you put into this article, I really do. The article was detailed enough to encourage me to invest a few hours trying to follow and reproduce it, but in the end it lacked sufficient detail required to successfully establish the feature (namely ES6 syntax support in the IDEA). I really wish I had not found the article, it was an exercise in futility and I lost hours of productivity for nothing.
It’s unfortunate, because I believe IntelliJ has a lot of potential, however when plugin support is this difficult to configure it badly degrades the usefulness of the entire IDE (I could’ve kept using Eclipse for free to get same level of Javascript support).
Ekaterina Prigara says:
October 10, 2016Sorry to hear that! Would be very helpful if you could provide at least some details on the problems you encountered.
ES6 syntax support can be enabled in Preferences | Languages & Frameworks | JavaScript, that’s the only thing required to start working with ECMAScript 6 projects in IntelliJ IDEA..
Henrik says:
March 21, 2017After updating my Webstorm install to version 2017.1 I suddenly can’t run my code that contains arrow functions.
I get an syntax error saying “Unexpected token” for the arrow function.
Node.js version is 6.10.0, npm is 4.4.1 and I have ticked the box Ecmascript 6 as in your article.
I have also tried to Invalidate the cache/restart without success.
Can anyone advice me further?
Ekaterina Prigara says:
March 22, 2017Please provided a bit more information on how you run your code – it if Node.js project? Do you run it with Node.js run configuration? Does it work if you run it from the terminal? Thanks!
You can submit a new issue to our tracker: https://youtrack.jetbrains.com/issues/WEB or contact our tech support: https://intellij-support.jetbrains.com/hc/en-us/requests/new
Igor says:
April 14, 2017phpstorm
Sees other methods!
http://f4.s.qip.ru/188zyAODf.png
Dennis Ushakov says:
April 17, 2017Thank you for the report. Please follow WEB-26037 for the updates.
Javier Martínez says:
April 24, 2017Hello:
In the past I was able to inspect ES6 Map objects using Debugger. But now when I debug server-side only ES6 code with Node.js 6, if I click on any variable which is a Map object only __proto property is showed. No Map values.
Should I have to configure anything?. My workaround is to create a new variable watch with this code: […map.values()] but this worked in the past without workarounds.
Thank you
Regards
Ekaterina Prigara says:
April 25, 2017Hello,
What WebStorm version do you use? It seems that the issue should have been fixed in WebStorm 2017.1: https://youtrack.jetbrains.com/issue/WEB-21216
Javier Martínez says:
April 25, 2017Hello Ekaterina:
WebStorm 2017.1.1
Build #WS-171.4073.40, built on April 11, 2017
JRE: 1.8.0_112-release-736-b16 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.11.6
Thanks
Ekaterina Prigara says:
April 26, 2017It seems that the issue I’ve linked to was only fixed for the Node.js version 7+. Sorry for not saying that earlier. Do you plan to continue using Node.js 6? Should we report an issue for better support in Node.js 6? But to be honest, with Node.js 8 being released so soon it doesn’t seem very likely that we will support debugging maps in Node.js 6.
Javier Martínez says:
April 26, 2017Hi,
Tested for node 7.9.0 and not working either. Create Node.js project from the scratch and just a few lines of code creating and adding values to Map object. If I debug, Map object inspection is empty except for __proto__ subobject.
Have you tested that this functionality works?
Thanks
Ekaterina Prigara says:
April 27, 2017Yes, sure we have tested that. Here’s a screenshot showing a debugging with Node.js version 7.9 in the latest WebStorm: https://blog.jetbrains.com/webstorm/files/2017/04/debugging-maps-in-node.png
Can you please share a screenshot showing your example. Thank you!
Javier Martínez says:
May 12, 2017Hello Ekaterina:
Any update about my last comment?.
Thank you
Regards
Ekaterina Prigara says:
May 12, 2017In my previous comment I’ve asked you to share a screenshot with your example, so I was waiting for it.
Javier Martínez says:
May 12, 2017Hello Ekaterina:
I answered your comment on April 28. You can see it as the last comment of this post (sorry I got it wrong when clicking on Reply): https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/#comment-293143
Anyway, here you have the screenshot but using Nodejs.js REMOTE Debug.
https://drive.google.com/file/d/0B6pCXqcLCV-UaW8wZ040WHdwN3M/view?usp=sharing
Thank you
Regards
Ekaterina Prigara says:
May 17, 2017Thanks for the reply. Sorry that we’ve missed it earlier.
The fact that you were using a remote debug configuration was critical here and we were able to reproduce the issue with Node.js v7.9 and v7.10. However, we do not plan to fix this issue for these versions. The reason is that the Node.js Remote configuration requires the use of the old Node.js debugging protocol that is now deprecated. WebStorm and Node.js 6.4+ support a new recommended Chrome Debugging Protocol. To use it you need to run your application with the
--inspect-brk=flag instead of--debug-brk=and then connect to the process using the Chromium Remote debug configuration in WebStorm.Javier Martínez says:
April 28, 2017Hello again:
After watching your screenshot I have realised that you are using Node.js debugging. I didn’t mention that in my case I am using Nodejs.js Remote Debug.
I have tested Node.js v7 with normal debugging and it works properly. But the same with remote debugging is not working.
Should it work? Maybe is another bug?. Or you don’t have this feature?. I would swear that this worked sometime in the past.
Thank you
Javier Martínez says:
May 17, 2017Thank you Ekaterina.
It works flawlessly. Just to clarify for further readings, in Node v6 you have to use ‘node –inspect’ or ‘node –inspect –debug-brk’.
https://nodejs.org/dist/latest-v6.x/docs/api/debugger.html#debugger_v8_inspector_integration_for_node_js
In Node v7 ‘node –inspect’ and ‘node –inspect-brk’.
Regards
Ekaterina Prigara says:
May 17, 2017Thanks! That’s been quite a lot of changes recently 🙂
Dave Schinkel says:
May 16, 2017And now create-react-app just broke your test instructions above, yay! Great job FB. Some of us prefer mocha over jest. But create-react-app only works with Jest. Therefore, due to the fact that react-create-app has this wonderful “magic” in the react-scripts in that project, You can’t just add a .babelrc file anymore or use node-babel with WebStorm test configs for mocha due to this if your team wants to use create-react-app vs. just creating a custom React config, which to me isn’t that hard especially with npm scripts instead of using Gulp or Webpack.
Julian Wilson says:
May 22, 2017I would like to add that you should be careful which JavaScript you choose to run in your Node configuration! For some reason, you can choose an ES6 file and it will hit breakpoints fine but the reloading will not work properly. If you just select your transpiled ES5 module it will work fine though.
Chris Wolcott says:
June 28, 2017I am having a problem setting up a File Watcher to perform exactly what I want to do. Here is the current directory structure.
public
modules
charts
js
abc.js
abc.js.map
mno.js
mno.js.map
xyz.js
xyz.js.map
source
abc.js
mno.js
xyz.js
I have set up a scope to only include the file[myProject]:public/modules/charts/source/*
My current File Watcher will transpile all files from source and add them to the js directory not just the one I am editing.
File Type: Javascript
Scope: {The one defined above}
Program: /Users/wolcottce/PhpstormProjects/myProject/node_modules/.bin/babel
Arguments: $FileParentDir$/source –out-dir $FileParentDir$/js –source-maps –presets env
Output paths to refresh: js/$FileName$:js/$FileName$.map
Working Directory: $ContentRoot$
I believe that using $FileParentDir$/source in the arguments is causing all files to be transpiled. If I change $FileParentDir$/source to $FilePathRelativeToProjectRoot$ only the currently modified file is transpiled, but it is placed in the following directory hierarchy:
public
modules
charts
js
public
modules
charts
sources
abc.js
abc.js.map
Any suggestions on how to have only the current file that was edited and saved to be transpiled by the File Watcher and placed in the correct directly or am I misunderstanding how File Watcher works?
Chris Wolcott says:
June 28, 2017Sorry the directory hierarchies aren’t indented properly.
lena_spb says:
June 28, 2017Yes – you are passing a directory to compiler, so all files in it are transpiled.
You can try the following configuration:
Arguments: $FileName$ –out-dir $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$ –source-maps –presets env
Output paths to refresh: $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$\$FileNameWithoutExtension$.js:$ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$\$FileNameWithoutExtension$.js.map
Working Directory: $FileDir$
When using this setup, public/modules/charts/source/components/subdir1/comp1.js will be transpiled to public/modules/charts/js/components/subdir1/comp1.js. Is it a solution you are looking for?
cwolcott says:
June 29, 2017Thank you very much for your response. I have a couple of problems with the suggestion. But lets tackle the first issue.
1) Arguments: $FileName$ –out-dir $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$ –source-maps –presets env
When the file watcher executes it can’t find the $FileName$ “abc.js”. It exists in public\modules\charts\source.
I have change Show console: Always so I can see the output.
When I define the following:
Arguments: $FilePathRelativeToProjectRoot$ –out-dir $FileParentDir$\js –source-maps –presets env
The console shows (Below are the real directories instead of my examples):
/Users/wolcottce/PhpstormProjects/SysBioCube-Migration/node_modules/.bin/babel
public/modules/sysbio/clinical/source/dashboards.js
–out-dir /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js
–source-maps –presets env
So this looks correct. It will be transpiling dashboard.js from the public/modules/sysbio/clinical/source directory and attempting to put it in /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js
But the next line of output shows:
public/modules/sysbio/clinical/source/dashboards.js -> /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js/public/modules/sysbio/clinical/source/dashboards.js
Again the file being transpile is correct but the output haas the correct path with the input path added to it.
Could this have something to do we how my scope is define?
lena_spb says:
June 29, 2017Did you change Working Directory to
$FileDir$per my suggestion? Seems you are still using$ContentRoot$cwolcott says:
June 29, 2017Sorry, you are correct. I changed the Working Directory to $FileDir$. So the console now shows the command being executed as:
/Users/wolcottce/PhpstormProjects/SysBioCube-Migration/node_modules/.bin/babel dashboards.js –out-dir /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js –source-maps –presets env
But I now get the following error that all the commands after the filename do not exist:
–out-dir doesn’t exist. /Users/wolcottce/PhpstormProjects/SysBioCube-Migration\public\modules\clinical\js\ doesn’t exist. –source-maps doesn’t exist. –presets doesn’t exist. env doesn’t exist
Here is the Arguments: $FileName$ –out-dir $ProjectFileDir$/public/modules/sysbio/clinical/js –source-maps –presets env
lena_spb says:
June 29, 2017Looks like a copy/paste issue. Please re-type all options (
--out-dir,--source-maps,--presets), make sure that each option name starts with 2 dashescwolcott says:
June 30, 2017Thank you lena_spb. You were exactly right. I starred to much at the screen and did not see that I was missing the extra dashes. The cut and paste was the problem.
Everything is working perfectly to transpile 1 file at a time after it has been saved if it is within the defined scope.
My last question is what does the “Output paths to refresh” parameter do?
Ekaterina Prigara says:
June 30, 2017As it’s mentioned in the blog post, the IDE will watch these paths for external changes and make sure that the changes are synchronized with the project.
Nagendra says:
November 20, 2017Hi,
Is it possible to migrate IBM Dojo tool kit to react JS.
If yes, can you please guide me.
Thank you.
Regards,
Nagendra.
Ekaterina Prigara says:
November 28, 2017Sorry, we don’t have any experience in this area. I’m sure you can find some tutorials on this topic elsewhere.
amin says:
November 30, 2017so after wards we need to link produced js file or it should remain the old one???
Ekaterina Prigara says:
November 30, 2017Not sure I understand your question correctly. In the HTML file you need to add a link the compiled file – the browser might not support all the language features you’re using in your source code.
Amin says:
December 1, 2017Sorry about the way of my question was asked. But any way u answered my question. Tnx.
fansiyao says:
December 12, 2017How do I use babel-polyfill to combine westrom ?
lena_spb says:
December 12, 2017Not sure I understand what you mean by ‘combining webstorm’… Please see https://babeljs.io/docs/usage/polyfill/ for help on using babel-polyfill
Milan B says:
February 22, 2018How do I disable this watcher forever? I would prefer if it would never ask me again, for any project.
Ekaterina Prigara says:
February 27, 2018No, sorry, there’s no such option in preferences. But you can disable the File Watchers plugin completely in Preferences | Plugins, then you won’t see these suggestions.
Milan B says:
February 27, 2018Thanks Ekaterina! Haven’t realized it’s a plugin. This helps in my case, thank you ^_^
Bivek says:
April 1, 2018This was helpful
Makoto says:
October 10, 2018These instructions are out of date. Babel changed their package names – babel-cli is now @babel/cli.
Ekaterina Prigara says:
October 10, 2018Thank you for your feedback. We will update the blog post. We recommend referring to the official WebStorm and Babel documentation for up-to-date information.
Makoto says:
October 13, 2018Thank you!! This page is the first result on Google when searching for “WebStorm babel”, so it’s good that it’s updated now. I looked in the WebStorm documentation (https://www.jetbrains.com/help/webstorm/) with search terms such as “ECMAScript 6”, “Babel”, and “transpiling”, so I don’t think these instructions are on there.
Matthew T Adams says:
October 19, 2018Please update this for WebStorm 2018.2 & Babel 7.
Ekaterina Prigara says:
October 19, 2018The blog post is up-to-date. A week ago I have tested all the steps with WebStorm 2018.2 and Babel 7 and made the required changes. Have you noticed some errors?
Matthew T Adams says:
October 19, 2018Yes. For some reason, I’m getting the output below in the terminal window. Looks like an environmental issue with node; I use nvm & everything works just fine from the command line, just not from within webstorm.
Here’s the terminal output:
/Users/matthewadams/dev/node_modules/.bin/babel src/main/**/*.js
env: node: No such file or directory
Process finished with exit code 127
Ekaterina Prigara says:
October 19, 2018Please check that node is available on your $PATH. Here’re the steps for macOS: https://stackoverflow.com/questions/19202007/making-sure-usr-local-bin-is-in-my-path-on-mac
ｖｉｔｏｌａｕ says:
December 20, 2019ｔｈｅｒｅ ｉｓ ｎｏ ｂａｂｅｌ ｕｎｄｅｒ ｎｏｄｅ＿ｍｏｄｕｌｅｓ／．／ｂｉｎ，
ｆｒｏｍ ｗｉｎ１０ ｕｓｅｒ
Ekaterina Prigara says:
December 20, 2019Hello,
Have you successfully installed the following dependencies in your project: @babel/core, @babel/cli, @babel/preset-env and @babel/polyfill?
Once they are installed,
babelshould be available in the node_modules/.bin folder; that’s not OS-specific.