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
Okay, 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?
Please 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.
Would you please update the first Babel screenshot so that we can see the full arguments & output paths? Thanks
That 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
Is there any way to make this the default behavior for javascript files in all projects? Or create a custom project template?
WebStorm will prompt you to enable a Babel file watcher in every project with ES6 files. Unfortunately, you can’t enable file watchers by default.
Just 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? :)
And look, the blog engine is messing up everything:
— double hyphen
– – hyphen space hyphen
– hyphen
Thanks for your comment, Rune. I’ll see how I can fix that.
Has anyone setup the debugger with babel-node?
+1 on this
I 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.
I 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.Hello 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
Is it possible to debug es6 code right now or only the compiled “old” js ?
You can debug ES6 code with the source maps.
do you have a link with example ? sorry but i think i got blocked with silly problems
Here’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.
This way “Unit Test > Right Click > Debug” feature doesn’t work..
Sorry, 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.
@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.
Is 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.
Can you please send us a bug report with the code sample at https://youtrack.jetbrains.com/issues/WEB. Thanks!
after 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
What 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!
The 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.
File 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
Initially 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!
Hi 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!
Yes, 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.
Can you please run nvm alias default stable from your terminal and then restart WebStorm. That should fix the problem.
had this same problem… took a while to find this comment but it helped!
Very thank you for your solution . I had encountered this problem. I wastes many hours, but now I solve it.
Is there a reason why PHPStorm doesn’t have Babel support from the start? (only Traceur available)
Which PhpStorm version do you use? We have added that not long time ago.
Oh, I see. I’m using PHPStorm 8.0.3 (latest version I can use with my license), was it added in PHPStorm 9 ?
Yes, you can try PhoStorm 9.5 EAP now, it’s free: http://blog.jetbrains.com/phpstorm/2015/09/phpstorm-9-5-eap-142-4491/
Hi, 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.
Would 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!
Hi, 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 ?
Sorry, 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.
See here for a detailed step-by-step guide how to debug ES6 in Webstorm (11) using gulp:
https://github.com/stefanwalther/es6-debug-webstorm
How about giving an example of babel + webpack debugging ?
You can find an example in our blog post on Debugging Webpack apps: http://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/
Yes, 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.
Can 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!
I 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.
Created issue for this.
I 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.
Thanks for sharing your experience!
I have to be doing something wrong here. I’ve followed these instructions, but the file watcher isn’t triggering at all.
Please 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”.
Hi Vic
I had the same problem. You need restart your project in WebStorm
Thanks 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”?
Change the default macro variable $FileDirRelativeToTheProjectRoot$ to just $FileDir$ in Babel Watcher settings, so it read as $FileDir$ –out-dir dist –source-maps –presets env
The “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
Please try to use $FileParentDir$ macros instead of $FilePathRelativeToProjectRoot$ in Arguments.
Hi, is it already possible to debug babel-node in webstorm?
Should 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.
Hi 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.
Hello 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!
Oh, 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
Good news! Thanks for the repo!
Unfortunately 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.
We’re able to reproduce the problem. Here’s an issue, hope to get it fixed soon: https://youtrack.jetbrains.com/issue/WEB-20516
Whoops, make that “setInterval” :)
Sorry 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
I’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?
Nevermind. I see that I am missing some plugins.
In 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)
Heya! My WebStorm is working great with arrow functions. However, when I try to use default parameters I get a
SyntaxError: Unexpected token =
Please help :(
Do you get this error message from Babel? Might be this issue: https://phabricator.babeljs.io/T7170
Run Node with the –harmony_default_parameters flag. You are using default parameters in function calls without this feature.
So 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
The second bit back: I didn’t have node core enabled for the project.
Hello 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.
Actually 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/
This is the correct way to do it.
Please replace your original post instructions with this one.
How 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.
From 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.
Regarding 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?
Yes, 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
On 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
Just wanted to say thanks for owner of the article. Pretty useful and helpfull!
Hi 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
Can 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!
I 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).
Sorry 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..
After 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?
Please 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
phpstorm
Sees other methods!
http://f4.s.qip.ru/188zyAODf.png
Thank you for the report. Please follow WEB-26037 for the updates.
Hello:
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
Hello,
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
Hello 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
It 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.
Hi,
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
Yes, 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!
Hello Ekaterina:
Any update about my last comment?.
Thank you
Regards
In my previous comment I’ve asked you to share a screenshot with your example, so I was waiting for it.
Hello 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
Thanks 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.Hello 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
Thank 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
Thanks! That’s been quite a lot of changes recently :)
And 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.
I 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.
I 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?
Sorry the directory hierarchies aren’t indented properly.
Yes – 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?
Thank 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?
Did you change Working Directory to
$FileDir$per my suggestion? Seems you are still using$ContentRoot$Sorry, 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
Looks like a copy/paste issue. Please re-type all options (
--out-dir,--source-maps,--presets), make sure that each option name starts with 2 dashesThank 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?
As 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.
Hi,
Is it possible to migrate IBM Dojo tool kit to react JS.
If yes, can you please guide me.
Thank you.
Regards,
Nagendra.
Sorry, we don’t have any experience in this area. I’m sure you can find some tutorials on this topic elsewhere.
so after wards we need to link produced js file or it should remain the old one???
Not 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.
Sorry about the way of my question was asked. But any way u answered my question. Tnx.
How do I use babel-polyfill to combine westrom ?
Not sure I understand what you mean by ‘combining webstorm’… Please see https://babeljs.io/docs/usage/polyfill/ for help on using babel-polyfill
How do I disable this watcher forever? I would prefer if it would never ask me again, for any project.
No, 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.
Thanks Ekaterina! Haven’t realized it’s a plugin. This helps in my case, thank you ^_^
This was helpful
These instructions are out of date. Babel changed their package names – babel-cli is now @babel/cli.
Thank 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.
Thank 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.
Please update this for WebStorm 2018.2 & Babel 7.
The 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?
Yes. 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
Please 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