In this webinar, Victor Savkin, a long time WebStorm user and Angular core contributor, walks you through his IDE setup and some of the things he uses to build Angular applications and the Angular framework itself. Victor will show how to start a new Angular app and will share some tips on working with large codebases, including refactorings and navigation.
The recording will be available after the webinar.
About the presenter Victor Savkin is an Angular core contributor and co-founder of Narwhal Technologies, where he provides Angular consulting to large teams who want to get their applications to production quickly. Victor toys with eclectic programming technologies and obsesses over fonts and keyboard layouts.
Update, December 29: we release another WebStorm 2017.1 EAP build (171.2014.24) this week to address the issues with the missing user color, code style and other schemes and profiles and TSLint. Update is available for the users of the last week and this week EAP builds.
The new WebStorm 2017.1 Early access preview build 171.2014.8 is now available. You can download it here, or if you have the previous EAP build (171.1834.8) from last week installed, you should soon get a notification in the EAP about a patch update.
New intentions for arrays: forEach and for..in to for..of
WebStorm helps you to convert for..in loops on arrays to for..of statements, introduced in ECMAScript 6. All you have to do is to hit Alt-Enter on the loop and select this conversion option.
While for..initerates over all enumerable properties of an object and you need to perform a hasOwnProperty() check to avoid iterating over object’s prototype properties, for..of iterates only over iterable objects and, thus, better for arrays.
You can set a visible highlighting level for this inspection in Preferences | Editor | Inspections – ‘for..in’ is used instead of ‘for..of’ and apply fixes for the whole project.
With another new intention can convert iterations with forEach to for..of.
Today we start the Early Access Preview for WebStorm 2017.1 (EAP). Download WebStorm 2017.1 EAP, build 171.1834.8, here and install it side by side with your current stable WebStorm. No active subscription is required.
Since we released WebStorm 2016.3 a month ago, we’ve mostly focused on fixes, but also managed to add some new features in WebStorm 2017.1 EAP. Many more are coming after the holiday season. Stay tuned!
Better testing experience
Now it’s even easier to run Mocha tests with the new Run icon on the gutter. Click on an icon next to the test or the suit name and select Run or Debug.
Once you’ve run the tests, the icon will show their status – green circles for passed tests, red for failed ones. The run and debug actions will be still available on a click.
You can also re-run tests automatically on changes. To do so, click the Toggle auto-test icon on the left-hand side of the test tool window. You will see how their status changes in the editor, even if you have previously hidden the tool window. This will work both for Mocha and Karma.
With WebStorm 2016.3 you can now develop mobile apps with React Native getting all the benefits of WebStorm goodies like code completion for React, Flow support, and a built-in debugger. We believe WebStorm can be a great and powerful tool for development with React Native!
Let’s see how we can set up a workflow for development with React Native in WebStorm.
Install React Native CLI
Make sure you have a React Native CLI installed on your machine. To install it, run the following command in the Terminal: npm install -g react-native-cli.
The list of tools you need to install to get started with React Native depends on your OS and the mobile platform you’re going to target your app at. Check out React Native’s Getting Started guide for detailed installation instructions.
Creating a new project
Now you can create a new React Native project right from the IDE Welcome screen: click Create new project, select React Native from the list on the left, enter a project name and click OK.
WebStorm 2016.3.2 is now available with many important bug fixes and improvements.
A patch-update is available for WebStorm 2016.3, 2016.3.1, as well as for the 2016.3.2 RC build. If you’re using an earlier version, now it’s a great time to give WebStorm 2016.3 and its new features a try and download it from our website for a free 30-day evaluation.
Among noticeable fixes and improvements:
The issue with using special symbols in Terminal with some keyboard layouts is now fixed
Support for debugging iOS apps with React Native 0.37+
Support for Stylelint 7.4+
Improvements in support for TypeScript 2.1
Improvements in support for async functions
We’ve added 2 new inspections that would help you working with the async functions. First one warns you if you forgot await when making an asynchronous function call:
WebStorm 2016.3.1, the first bug-fix update for the recently released major version is now available!
If you’re using WebStorm 2016.3 or WebStorm 2016.2.4, a patch-update should be available. If you’re using an earlier version, give WebStorm 2016.3 and its new features a try and download it from our website for a free 30 day evaluation.
WebStorm 2016.3.1 addresses the issues with using TypeScript 2.0.10 and exporting settings. Find a full list of addressed issues in the Release notes.
Using types in your code allows Flow to catch more errors before you run the code, but is not mandatory – Flow’s static analysis can detect some errors even without type annotations.
WebStorm 2016.3 adds integration with Flow. So if you’re using Flow in your project, you will now see errors reported by Flow in the editor, as well as in a new Flow tool window. Errors are displayed right as you make changes in your code, without having to save them. Flow can also power WebStorm’s code completion, type hints, and navigation to the definition.
Let’s have a closer look at how this all works in WebStorm.
Please meet WebStorm 2016.3, the third big WebStorm update of 2016 jam-packed with new features!
For the past four months we’ve been working hard to improve support for ES6, TypeScript, and Flow and integrate more tools into the IDE, to help you develop more smoothly and productively not only for the web but also for mobile.
Support for Flow: type errors are reported right in the editor; Flow-powered code completion
Support for React Native: code completion, running and debugging apps in WebStorm
Better TypeScript support: more precise code completion and analysis powered by the TypeScript language
service; smarter Rename refactoring that understands the inheritance hierarchy
Set of inspections and quick-fixes for migrating the code to ES6 and a new Convert to class intention
Among other noticeable updates: integration with Stylelint, support for PostCSS via a plugin, running and debugging tests with Protractor, quick bootstrap to run and debug Node.js app in Docker, better support for ES6 destructuring, and even more!
If you have a WebStorm license purchased before November 2015, before January 1, 2017 you can purchase a new subscription at 40% off and keep using WebStorm with all the latest features.
Another week – another WebStorm 2016.3 EAP (163.6957) build! You can download it here, or if you have the EAP build (163.6512) from the last week installed, you should soon get a notification in the EAP about a patch update.
Integration with Protractor
Protractor is an end-to-end test frameworks developed by the Angular team. And you can now run and debug tests with Protractor right from WebStorm. Test results will be shown in a tool window in the IDE. You can filter the results and see only the failing tests. You can also quickly jump from the list of tests to the test source.
To get started right-click (or hit Ctrl-Shift-R on macOS or Ctrl-Shift-F10 on Windows and Linux) on the protractor.conf.js file in the project view or in the editor and select Run ‘protractor.conf.js’. Please make sure first that you have Protractor installed globally on your machine.
You can use the same run/debug configuration to debug the tests.
More quick fixes for TypeScript
WebStorm now makes quick-fix options provided by the TypeScript 2.1 language service available in the editor together with the WebStorm’s own quick fixes and intentiones.
Hit Alt-Enter on the highlighted code and see suggestions to automatically fix it (note that quick fixes are available only for some types of errors).
WebStorm also added the support for TypeScript 2.0.6.
Completion for React Native StyleSheet properties
When working with the React Native apps, WebStorm will now provide code completion (and color preview) for properties inside StyleSheet.
A new WebStorm 2016.3 EAP (163.6512) build is now available! You can download it here, or if you have the EAP build (163.6110) from the last week installed, you should soon get a notification in the EAP about a patch update.
Debugging React Native apps
With WebStorm you can now run and debug mobile apps developed with React Native! Together with the React and Flow support we believe WebStorm can become a great and powerful tool for development with React Native. We’d appreciate your feedback on this new feature!
We assume that you already have React Native installed and configured for the iOS or Android development. We really recommend you to install Watchman on macOS, it helped us make the app running with no errors when we were developing and testing the new feature.
Now create a new React Native Run/Debug configuration in WebStorm, select the target platform and hit Ok. Make sure the path to the React Native CLI package is correct. Put the breakpoints in your code and start the Debug session.
Once the emulator opens for the first time, go to the in-app developer menu and select Remote JS Debugging. The WebStorm built-in debugger will then connect to the emulator and you can debug your app.