We are starting the Early Access Program for WebStorm 11, our next major release. Go ahead and download WebStorm 11 EAP now!
UPD: Read about the new features added in the next EAP build:
- WebStorm 11 EAP, 142.3805: improved HiDPI support for Windows and Linux, clickable links in comments, breadcrumbs in Stylus files.
- WebStorm 11 EAP, 142.4148: encode HTML special symbols, improvements in Meteor support, TypeScript 1.6: intersection types and type guard functions.
- WebStorm 11 EAP, 142.4723: code style for chained methods, React and TypeScript 1.6 support improvements.
What is the Early Access Program? It’s how we make our development process more transparent and share with you our progress on the new IDE features. By taking part in WebStorm 11 EAP, you can try some of the new features months before the public release, and hopefully provide your valuable feedback that will help us improve the IDE for you. The EAP builds are free and can be installed side-by-side with your stable version of WebStorm.
Please note that EAP builds are pre-beta software and may contain issues, which we ask you to report to our issue tracker.
Improvements in TypeScript support
We are working hard on improving TypeScript support. First of all, we now bundle just-released TypeScript 1.5 (actually 1.5.3) compiler with WebStorm, which brings support for features like ES6 modules and decorators to TypeScript:
Second, WebStorm now understands the scopes defined in the tsconfig.json file and uses them for coding assistance. If the class you want to use is missing from the files property in tsconfig.json, a quick-fix will help you add it to the tsconfig.json file:
You can also select Enable TypeScript Compiler if you’d like to use tsconfig.json with the built-in TypeScript Compiler.
Next up is integration with TSLint, a linter for TypeScript, as its name suggests. You can enable that in Preferences | Languages and Frameworks | JavaScript | Code quality tools. Then you’ll start seeing warnings from TSLint right in the editor, if any.
Last but not least, TypeScript support gets a very handy auto-import feature that suggests adding an import statement when you reference a class:
Yeoman integration
Yeoman integration is something we’ve wanted to implement for a while and we’re excited that now finally you can access hundreds of project generators right from the Welcome screen.
Make sure that you have Yeoman installed. Click Create new project, select Yeoman from the list on the left, search for the generator you need, and then follow the steps suggested by the generator.
As we’re still working on UI improvements, we would be happy to hear your feedback on what is already available.
JSX support improvements
We’ve introduced lots of general improvements in JSX support. For example, WebStorm now understands React components declared as classes and ES6 imports. And you finally have completion available for closing tags.
Here’s the full list of addressed React support issues in our tracker.
New inspections: Missing require() call and Missing module dependency
We’ve added two new inspections to help you work with Node.js apps.
The first one suggests adding a missing require() call for the modules you use further in your code (in case you forgot to do that). It can be a node module installed in your project’s dependencies, or a module somewhere in you project:
Another inspection suggests adding a module to the dependencies or the devDependencies section in your package.json file, if you have required a module that is available on the npm:
Are we missing anything? Let us know what you think.
Debugging Webpack projects
In WebStorm 11 EAP we support source maps generated by Webpack, a module bundler that is seeing wide adoption lately.
Thanks to these source maps, the WebStorm debugger can stop on the breakpoints put in the source files, while the compiled app is actually executed in the browser. However, because of the complexity of the build process in some cases and a variety of implementations of source maps in different module loaders and tools, WebStorm’s “magic” that makes the matching between the source code and executed code doesn’t always work.
If WebStorm hasn’t resolved paths in the source maps for your app, we encourage you to explicitly configure mappings from the remote URL of the compiled script to its local path in the debug configuration (for example, http://example.com -> /build).
In case of Webpack, you should also map the URL of the source (listed in a source map) to the local path (for example, webpack:///.-> <project dir>).
We’ll talk about this in more detail in a follow-up blog post.
Running a single Mocha test
If you’re using Mocha for unit testing, you’d be pleased to know that now you can run a single test from the IDE.
Simply right-click on the test name in the test file and select Run or Debug this test. A new Mocha run/debug configuration will be automatically created, which you can run again later using the Run…/Debug… action.
Flame charts in Node.js CPU profiler
A new flame chart view is now available in V8 CPU profiler. It’s a visual representation of your Node.js app execution. It might help you notice the functions that took the most CPU time and then explore them further.
You can read about Node.js CPU profiling with WebStorm in our previous post.
Navigation to injected dependency definition in AngularJS 1.x and ngDoc
Now you can jump to the definition of the injected object in AngularJS:
For ngDoc @example tag, now you get code highlighting and assistance:
Dart support enhancements
Dart developers can benefit from support for null-aware operators, support for package resolution configuration file (.packages) introduced in Dart SDK 1.12, a better code formatter, and many different bug-fixes.
Improvements in the core platform
Adjust code style settings as a quick-fix
Configuring your code style just got easier. Select a code fragment, press Alt+Enter and select Adjust code style settings to see and adjust the code style settings that can be applied to this code with the live preview. No need to scroll through the long list of all available code style settings. Once you make the adjustments, they are saved in your current code style scheme and the file is reformatted.
Preview for Find in path
A new Preview tag is now available in the Find in path dialog. It shows the first 100 results in real time, so you can find what you need more quickly and easily.
Other changes include:
- Support for Mercurial queues
- Opportunity to edit a diff in the commit dialog
Custom JDK status update
As you may know, we’ve been working on a custom build of JDK 1.8 for our OS X Yosemite users. There have been some performance issues that we’re fixing, while not compromising the font rendering. As we continue working on performance improvements, please let us know if you notice any problems with the scrolling. Your feedback is very helpful and much appreciated!
Please note that EAP builds do NOT require an active license and can be used for up to 30 days. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.
You can look though the full list of the web-related issues addressed in this build on our tracker.
You can download and install WebStorm 11 EAP (build 142.3470) right now. Please submit your feedback in our issue tracker.
Develop with pleasure!
– JetBrains WebStorm Team
Oh! thank you for your effort. Amazing features.
Thanks! And more features and improvements are coming with the next EAP builds.
I don’t about any of that. I just want proper code formatting. I know it’s not much fun, but please fix your bugs before adding new features.
https://youtrack.jetbrains.com/issue/WEB-10120
Your comments come off quite brash. Lots of people care about support for new features and functions while you only care about formatting. I agree it should be fixed, but not at the cost of any new features.
I don’t understand your post. I did not made any claims about what anyone else wants. I only expressed my opinion. Do you mean that my comment was brash because I’m not considering other customers?
In that case, let me consider them. The report has 25 voters and 8 linked issues in You Track. It’s the 10th most voted open issue. It’s been open for over a year and originated two major versions ago. And Jet Brains has never even commented on it. They don’t even respond to support emails about the issue.
Dear Ben, unfortunately, sometimes it takes us time to address an issue. Votes help us prioritise issues, since no company has unlimited resources to address all of them. We believe that this issue is a feature request and not a bug – it doesn’t break your code or report any false positive errors.
To be precise it’s #32 most voted feature at the moment + there were 4 more issues with more votes fixed in this build. Our tech support did reply to your feedback, but once the issue is reported, our support engineer can only point to you to it and ask to follow it since she doesn’t fix them herself.
Thank you for understanding. We hope we will address the issue soon.
To be precise, it’s now the 9th most voted open issue for WebStorm. It’s received 3 more votes since I posted.
You Track WebStorm Open Issues
> it doesn’t break your code
Oh yes it does! I have to fight the WebStorm formatter so much I decided to just turn it off. Chained function calls indented are an “inconvenience” or “cosmetics” only if you count messed up indentation as just that.
No it doesn’t break the computer’s interpretation of my code — but it breaks the human interpretation.
Great news on TS and Mocha!
I have a portable JAVA and bash webstorm-run script:
JDK_HOME=/home/path-to-java/jre
export JDK_HOME
/bin/sh /home/path-to-webstorm/WebStorm/bin/webstorm.sh
Before this EAP version it worked but now it does not:
“No JDK found. Please validate either WEBIDE_JDK, JDK_HOME or JAVA_HOME environment variable points to valid JDK installation.”
What’s wrong?
P.S. I don’t want to install java to system
OS: Ubuntu
WebStorm is a Java app, so you need to install Java to use WebStorm.
Try to also put it in the PATH variable. Should suffice.
Awesome improvements !
Only one thing I’m a bit worried about, the color scheme of darcula seem to have changed. It is a lot darker now, a bit too dark for my taste. It also noticed that in intelliJ 15 EAP, but I just can’t get used to it.
see this picture:
http://i.imgur.com/IEyOssD.png
Is it possible to get the old color scheme back ?
Actually the old washed out colors were caused by the bug in the JDK 1.6 (that WebStorm was using by default) color rendering. Now when we’re using our custom JDK 1.8 font and color rendering has been fixed, so that’s why you’ve noticed the difference.
I see, but I do think maybe the colors could be a bit lighter now then, as they are not washed out anymore.
Java’s advantage is cross-platform, but there are always some problems such as font rendering, color rendering and performance. Do JetBrains consider changing developing language for all IDEs like Python, Go? I do like WebStorm, and expected it better.
Is the JDK change also the reason why the dialog font is more heavy? See example here, with Webstorm 11 EAP on the left and WebStorm 10 on JDK6 on the right: https://www.dropbox.com/s/flz3pt9f5ucxcgw/Screen%20Shot%202015-08-05%20at%2011.41.04.png?dl=1
Font rendering has changed throughout the whole IDE – editor, all dialogs and menus, etc.
Please improve general UI design, it’s getting quite outdated
Dear Carl, that’s not a one day job and we are constantly working on the UI improvements. For example, you might notice recently reworked Welcome screen or changes on the editor right gutter or some updated settings pages.
You know you have complete control over the styling of everything in the IDE, right? :-)
I know I have control over almost everything, but particularly those things that I can’t modify make the general look & feel not as clean as it should be.
Nothing major, but it’s something that hasn’t been improved in years, and believe it or not many people use other IDEs because of this.
Touch screen support for example is getting more and more desirable. Especially for people running on a Windows laptop (the Macs still lacking touch). For a start, if I could just use my finger to scroll… each time I have to go back to the keyboard, or try to hit that narrow scrollbar with my huge finger…
I was wondering the same thing. I remember it works at one before, a while back. Is there before WebStorm uses MarkDown or something has changed?!!!
Markdown? Not sure I understand what you mean. Can you please provide a bit more details.
Hidpi is not working with the newer EAP
Can you please try to add -Dhidpi=true to your vmoptions file and run the IDE again. Here’s a related issue: https://youtrack.jetbrains.com/issue/IDEA-114944
I love WebStorm, but I have to agree with Ben Page: I’d like to see some basic things fixed before adding the kitchen sink. Actually, just one little usability improvement, one that we’ve been clamoring for since 2011:
https://youtrack.jetbrains.com/issue/IDEABKL-6984
Right now, it has 134 votes, but has been in the backlog for years. How come?
157 votes as of today.
Is there anything special you need to do to get TSLint to work?
You need to have Node.js installed and TSLint module installed locally or globally via npm. Then just go to Preferences | Languages and Frameworks | JavaScript | Code quality tools and enable that.
Installed TSLint globally and enabled it. Unfortunately it’s always telling all possible CLI options + “Missing files”, what actually means that there are no input files passed to TSLint. Any suggestion?
Sorry, it seems WebStorm doesn’t work with recently released TSLint 2.4: https://youtrack.jetbrains.com/issue/WEB-17431
We’ll fix that.
I get a bug: all Chinese punctuations are converted to English version, for example, I type
。, then the IDE converts it to..It also happened on WebStorm 10.
That’s a recently known issue, please vote for the issue and follow the updates on it: https://youtrack.jetbrains.com/issue/IDEA-142652
It may be caused by OpenJDK, also JDK 8u51.
It works well if using JDK 8u45. I have resolved it by removeing bundled JDK then installing JDK 8u45 from Oracle.
http://www.oracle.com/technetwork/java/javase/downloads/java-archive-javase8-2177648.html#jdk-8u45-oth-JPR
Thanks for your comment on the issue tracker, that’s helpful. We’ll see what can do.
Do you have any plans to support NativeScript with WebStorm or any of the JetBrains IDEs?
http://www.nativescript.org
It would be great if it were possible to debug straight from the IDE.
No plans for that. Can you please submit a feature request on https://youtrack.jetbrains.com/issues/WEB ? Thanks!
WebStorm-EAP-142.3470-custom-jdk-bundled.dmg is still reporting error at the syntax below :
export default class extends React.Component {
We really need this fixed urgently.
Can you please report an issue on https://youtrack.jetbrains.com/issues/WEB and add a screenshot. So far can’t reproduce the problem.
Also try File -> Invalidate Caches / Restart -> Invalidate and Restart
Works fine, thank you.
I’m glad to see the issue with .es files is fixed now.
So its nice – but its actually unusable with FlowJS. Type aliasing and optionals are displayed as errors. Can WebStorm at least get out the way and not highlight these as errors? Having to use Atom/Nuclide at the moment…
Set JavaScript version to ES6 in Preferences | Languages and Frameworks | JavaScript and disable Validate ES6 and Unresolved variable inspections in Preferences | Editor | Inspections – JavaScript.
Please follow the updates on https://youtrack.jetbrains.com/issue/WEB-14254
Yeah I’m following that thread keenly. Doing as you suggest still breaks optional parameters and types unfortunately. So you can’t say create the construct: ‘export type myFunkyType = { name: string };’ , without it showing as an error.
May I ask, where is support for Ember JS, Ember-CLI, Handlebars and HTMLBars?
Whats going on, that JetBrain don’t give a shit about this framework?
WebStorm doesn’t provide any Ember- or Ember-CLI-specific support. Pleas vote for the feature request: https://youtrack.jetbrains.com/issue/WEB-14919
“WebStorm doesn’t provide any Ember- or Ember-CLI-specific support” no kiddin? Realy? What is the point of that reply? Just to make me angry, because you say obvious things?
How to vote under the link you posted?
To vote you need to login into YouTrack, so you need to create a new account or to use an existing JetBrains account.
I agree with the poster above that JetBrains needs to fix some of the MAJOR bugs that have been introduced in version 10 before spending so much time on new features. I had to specifically downgrade to version 10.0.2 in order to be able to keep using Webstorm, as after upgrading t0 10.0.4, the app became completely unusable due to lockups / freezing every couple of minutes.
You probably just need to mark your output directory as excluded so Webstorm doesn’t keep trying to re-index these files.
Joshua, we spend lots of time on optimisations and performance improvements and we would really appreciate if you send us a CPU snapshot and thread dumps (that you can find by going to menu Help – Show log). That way we could investigate the performance issues you have and fix them. Thank you!
The new Find in Path preview is not helpful as the background searching hogs the processor while typing and makes the process slower.
Hi, great that ES7 works with export default and @ decorators. But I noticed that with Webstorm 11 on my Macbook Retina 15 the discrete GPU is constantly activated, which was not the case with Webstorm 10. This, of course, is not very productive for working on the go. I’m using gfxCardStatus to check what GPU is used.
Seems like decorators don’t work on Webstorm 11 (‘decorators are not available on ECMA 6’ error). Can I somehow switch to ECMA 7?
It’s a warning that they are really not available in ES6, but it doesn’t mean that WebStorm doesn’t support them ;)
You can disable Validate ECMAScript 6 inspection in Preferences | Editor | Inspections.
Can you please try the latest WebStorm 11 EAP, 142.4148, should be fixed there.
Thanks for the quick response, but I’m using the latest build, downloaded it just today (142.4148)!
Hmm, shouldn’t be like that. Can you please comment on this issue: https://youtrack.jetbrains.com/issue/IDEA-119858, so that our colleague who’s working on our custom JDK will be notified.
Would love to have this fixed in the new version. Seems like every new version I’m hoping it gets in there :) https://www.dropbox.com/s/u9cfs6hgb1b396r/multi-select-to-install.tiff?dl=0
Effectively, the typescript community libraries, you literally have to install one at a time. Would love to multi select a few (checkbox) with a decent filter (the current filter is not super handy)
Feel free to reach out if you need further info.
There’s an issue about that on our tracker and it has a parent, more general issue about managing TypeScript stabs. Would be really great if you share your ideas in a comment there. Thanks you!
Is there Polymer 1.0 & System.js support?
There’s basic support for Polymer 1.0. For System.js support please vote for this feature request: https://youtrack.jetbrains.com/issue/WEB-13064
I commented on the ticket with a ui shot of how it would work pretty well. Let me know if you need any additional ideas or thos don’t make sense.
Thanks,
T
I see that you aims to support flow in a progressive way.
Will at leats web 11 accept flow syntax (even if it is not integrated in for completion and error detection now) ?
Yes, we’re working on this right now, so most likely it will be available in the next EAP
Could you provide https links on EAP page with checksums like IntelliJ EAP page? https://confluence.jetbrains.com/display/IDEADEV/IDEA+15+EAP
Here you go: https://confluence.jetbrains.com/display/WI/WebStorm+EAP
I’d like to ask if there are any steps to make uglified javascript with source maps support a bit better? http://i.imgur.com/xyHNfb4.png
We can’t use uglify in development environments since WS cannot process the sources. In Chrome all breakpoints are working, and all watchers/scopes are up to date, and flawless.
Are you using uglify for generating source maps? Do you use any module bundlers? Do you minify your plain js for debugging?
Hey!
Yes, uglify is generation the source maps. I’m not using any module bundlers. The issue I was talking about was the debugger not working properly, so I guess my answer is a yes f or that.
I submitted a bug report to you as well, and it has been processed:
https://ea.jetbrains.com/browser/ea_reports/963423
I’m not sure though that this would solve this problem, or not. I can’t remember if this was a crash report, or just a report for 11 EAP.
generating*
I have a license for Webstorm 10, but there are issues with TypeScript and there seem to be fixed in Webstorm 11.
Is it possible to continue using Webstorm 11 after 30 days if we have a valid Webstorm 10 license (until a release version of 11 is launched)? If not, can we buy a license for 11 right now?
Thanks
Julien
You can use WebStorm 11 in Early access preview for free until it’s released. Once it’s released, you can use it, if you have a valid license.
Thanks!
I have a license for WebStorm 10 till Oct 2016. But I am not able to upgrade it to 11. So I downloaded 11 separately and tried to register, but it is not showing text box for user name and showing old License Key. I am not able to activate WebStorm. What may be the reason? Please help
Thanks
Please install WebStorm 11 from our website (the older EAP builds don’t require registration and can work only for 30 days after the publishing day).
After that hit Register on the Welcome screen, we recommend you to login using JetBrains account credentials. Please let us know if you have any troubles with that.
It is not working. My company gave only User name and license key. It is working fine for webstorm 1o. So i dont jave jetBrains account to try with. Please let me know why the Help/upgrade button is not working from WebStorm 10 to upgrade it to 11. Will it be ready in near future. Thanks..
If you’re using a license key and not a JetBrains account, you need to update your key using this form to use it in WebStorm 11: https://www.jetbrains.com/shop/eform/keys-exchange
Not sure I understand what button you’re referring to, sorry. Can you please provide a bit more details.
Thanks for the reply..The button I mentioned is ‘Help'(in the menu bar at top) -> Check for update.
I thought it will find out webstorm 11 version from the internet and upgrade 10 to 11.
Were you able to activate WebStorm 11 after exchanging the key?
I did not try https://www.jetbrains.com/shop/eform/keys-exchange as the license key is given to me by our billing department. Do they need to apply for keys exchange or I can do that?
You can do it yourself, if you have a license key. The new key will be sent to the email address you provide. Please note that this key will work only in WebStorm 11.
Yes, it worked. Key exchange gave me a new activation code and I used offline activation code. Now if I click on ‘Check for update’, i got below connection error message, do you know the reason?
Connection failed (sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target). Please check network connection and try again.
Please try to disable Settings | Appearance & Behaviour | System Settings | Use secure connection. By the way, there is no updates for WebStorm 11 now.
It worked..thanks for your help!!
JSX and ES6 improvements are great. But the theming is incomplete as it doesn’t seem possible to apply a theme for this newer syntax. For example, ES6 import names appear as the same color as comments, dimmed out. Everything comes under a ‘JavaScript’ umbrella in the editor config – in reality there’s different flavours between ES6 and JSX.
Cheers!
Hi, Sam.
ES6 named imports (import {foo}) are highlighted as elements which they refer. Default imports should work in the same way, though, it is broken now. I’ve created an issue for that.
As for JSX tags, you can customize them in Colors & Fonts | XML. We’ll consider extracting separate scheme for JSX. Thanks for request!
Implement properties window similar to visual studio.
It is very helpful.
Excellent IDE, thanks for the new features released in this version.
Thank you for sharing this great post.
Check this one as well…
“AngularJS – When JavaScript Met MVC”
https://www.ziptask.com/AngularJS-When-JavaScript-Met-MVC