WebStorm 2018.3.3 is available

Posted on January 11, 2019 by Ekaterina Prigara

WebStorm 2018.3.3 (build 183.5153.33) is now available!

Update to it using our neat little Toolbox App, or from the IDE. You can also download WebStorm 2018.3.3 from our website.

Running and debugging tests using Cucumber 3+

You can now run and debug tests using the latest Cucumber version in WebStorm.

To start tests, you can right-click on the feature file and select Run <file name> in the context menu. Or you can create a new run/debug Cucumber.js configuration from the Run menu – Edit configurations… and then run or debug it. 

You will see the test results in the test tool window, from where you can jump to its definition in the editor.

Cucumber test results in a tool window

Please note that at the moment WebStorm only supports step definitions that are written using regular expressions.

What’s new:

  • Support for Set Literals in Dart (WEB-36102)
  • Completion for attribute bindings in Angular (e.g. [atrr.foo] ) (WEB-36071)
  • Better coding assistance for some Ionic and @angular/flex-layout attributes (WEB-36437)

What’s fixed:

  • Wrong indent after self-closing JSX tags in JavaScript and TypeScript files (WEB-36263)
  • Decorators are now supported in the class expressions like let newTest = @test class Test or export default @observer class Test (WEB-23326, WEB-34774)
  • When using the bundled TypeScript service in Angular apps, the Angular language service is now disabled. Otherwise, there’re false errors in the template files (WEB-36226).

You can find the full list of addressed issues in the Release Notes.

The WebStorm Team

Posted in Release Announcements | Tagged , , | 22 Comments

Get Started Developing TypeScript Apps with WebStorm

Posted on January 2, 2019 by Rachel Appel

TypeScript Language Overview

TypeScript is a superset of JavaScript that contains features that make it easier to write and maintain than standard JavaScript. Types are at the heart of TypeScript, and it performs type checking when compiling to JavaScript.

TypeScript logo

While JavaScript does contain a few primitive types, its type system is loosely typed, and types are inferred by their usage. Developers are free to change the data type of variables during a program’s execution. This might sound easy, and it is – an easy way to get into trouble! This is especially true if some data is accepted from an input source that doesn’t match the expected type. TypeScript offers a full type system, since types are important to create correct code.

Continue reading →

Posted in Tutorials | Tagged , | 2 Comments

WebStorm 2018.3.2 is available

Posted on December 20, 2018 by Ekaterina Prigara

WebStorm 2018.3.2 (build 183.4886.41), the bug-fix update for WebStorm 2018.3, is now available!

Update to it using our neat little Toolbox App, or from the IDE. You can also download WebStorm 2018.3.2 from our website.

What’s new:

  • Completion for Bootstrap Vue (WEB-35477) and Shards Vue components (WEB-36054)
  • Better support for Prettier 1.15 and above (WEB-35806)
  • The Extract interface refactoring now works for objects (WEB-21926)
  • The IDE now bundles TypeScript 3.2 (WEB-36159)

What’s fixed:

  • The Optimize imports action now keeps the comment on top when ‘Sort imports
    by modules’ is on (WEB-28878)
  • The usage of the Angular template reference variable in the ViewChild selector is now resolved (WEB-36109)
  • The problem with using Hebrew in the ‘Find in path’ dialog was fixed (IDEA-199367)

You can find the full list of addressed issues in the Release Notes.

The WebStorm Team

Posted in Release Announcements | Tagged , | 6 Comments

Accessibility features in WebStorm 2018.3

Posted on December 6, 2018 by Rachel Appel

In this era of software development, professionals everywhere are paying more attention to diversity, including building software with accessibility in mind. WebStorm contains a multitude of features to help make accessible software, and adds more in every release.

Developing for those with accessible needs is important for the following reasons:

  • When you make it easier for someone with accessible needs to use your software, it makes it even easier for those won’t don’t have those same needs. It’s a win-win.
  • According to Forrester and Microsoft’s research, up to 60% of the population has accessible needs that may result in the use of accessible technology.
  • An aging world population demands that software and technology evolve with their users.

There are four main facets of developing with accessibility in mind to consider:

  1. Visual: Blindness, low vision, color blindness, color contrast sensitivity.
  2. Auditory: Deafness, low hearing.
  3. Motor: Tremors, injury, loss of limb, aging, arthritis, and many debilitating diseases and medical issues.
  4. Cognitive: ADHD/ADD, dyslexia, autism spectrum, synesthesia, learning disabilities, and similar.

These facets cover the range of human characteristics and abilities, and web apps need to account for this wide human spectrum. Otherwise, the research shows that your web app could be unusable to a large number of your customers.

There are many design and programming techniques available for developing with accessibility in mind. This article covers a few of the basics that were released in WebStorm 2018.3.

Continue reading →

Posted in Cool Feature, Tutorials | Tagged , , , | Leave a comment

WebStorm 2018.3.1 is available

Posted on December 5, 2018 by Ekaterina Prigara

WebStorm 2018.3.1, the first bug-fix update for the recently released WebStorm 2018.3, is now available!

Update to it using Toolbox App or from the IDE. You can also download WebStorm 2018.3.1 from our website.

What’s new:

  • Support for TypeScript 3.2 features: BigInt (WEB-34802), object rest and spread on generic types (WEB-35664), configuration inheritance via node_modules packages (WEB-35522), and more.
  • Code completion for Vue.js instance methods and properties (WEB-28529).
  • Option to disable icons on the editor gutter for implemented and overridden methods (WEB-32824).
  • Configurable syntax highlighting for Angular templates (WEB-35815).
  • Support for the ECMAScript throw expression proposal (WEB-35752).

What’s fixed:

  • Methods and properties are now resolved in Angular templates written in Pug (WEB-35848).
  • 18 issues in the Angular support were fixed.
  • Shortcuts for “Close tab” and “Select next/previous tab” now work again in the terminal (IDEA-200854).
  • The prompt to override terminal history was removed (IDEA-202523).
  • Select in… now works in the Search Everywhere popup (IDEA-197872).
  • The problem with Replace in selection was fixed (IDEA-200011).
  • Indentation now works correctly when the display scaling is 250% or higher (IDEA-202087).
  • The problem with indexing when package.json contains "//" in dependencies was fixed (WEB-36082).

Please also see the Release Notes.

The WebStorm Team

Posted in Release Announcements | Tagged , | 9 Comments

WebStorm 2018.3: improved Angular support, better autoimports, GitHub Pull Requests, and more

Posted on November 20, 2018 by Ekaterina Prigara

⭐️WebStorm 2018.3 is now here!⭐️

WebStorm 2018.3 brings lots of exciting new features and enhancements across the board. Much-improved Angular support, GitHub Pull Requests, debug for Node.js worker threads, and lots more await!

Explore the top new features and download WebStorm 2018.3 on our website.

In this blog post we would like to share with you the detailed release notes for the WebStorm 2018.3 update. They are compiled from the EAP blog posts that we’ve been publishing here for the past two months.

Here are the features and improvements grouped by the WebStorm subsystems:

  • JavaScript and TypeScript support: autoimports in JavaScript for symbols from the project’s dependencies, parameter hints in JavaScript, convert to a variable with arrow function, better ‘null’ and ‘undefined’ checks, suggestions for variable names, and TypeScript 3.1.
  • HTML and JSON support: accessibility inspections for HTML, improved Remove action for HTML and JSX tags, and improvements in JSON support.
  • Style sheets: Extract ruleset and move it to another file, new code style options, and updated inspection for CSS shorthand properties.
  • Development with Angular: major improvements in the Angular templates support and fixes in AngularJS support.
  • Development with React: completion for lifecycle methods and new inspection for the undefined components.
  • Development with Vue.js: support for Vuetify.
  • Node.js development: completion for previous package versions in package.json and debugging Node.js worker threads.
  • Editor: multiline Todos, indent size in the status bar, and disabling code formatting for specific files and folders.
  • Accessibility: new high-contrast UI theme and screen reader support for gutter icons.
  • Version Control: Git submodules, tool window for GitHub Pull Requests, and better support for precommit hooks.
  • Linters integrations: suppress comments for TSLint rules, linting TypeScript files with ESLint, and an option to override severity from ESLint or TSLint config.
  • Debugging: Live Edit without Chrome extension, and adding multiple variables to debugger’s watches.
  • Testing: Structure view for test files, Go to failure for tests, and running a single Protractor test or suite.
  • Other IDE improvements: unified Search popup, a new plugin configuration, and drag folder to Welcome screen to open it.

Download WebStorm 2018.3

JavaScript and TypeScript support

Autoimport symbols from the project’s dependencies

We have extended the autoimports in JavaScript files to symbols defined in the project’s dependencies. This will work if there’s a TypeScript definition file present inside the package (like in moment or redux) or if the package contains sources written as ES modules.

auto-import-from-node-modules

And of course, autoimports in JavaScript work for symbols exported in the ES modules in your project. Continue reading →

Posted in Release Announcements | Tagged , , , , , , , , , , , , | 7 Comments

WebStorm 2018.2.6 is now available

Posted on November 13, 2018 by Ekaterina Prigara

WebStorm 2018.2.6 is now available! Stay tuned for WebStorm 2018.3 that is coming next week.

You can update to it using Toolbox App or from the IDE. You can also download WebStorm 2018.2.6 from our website.

Here are the fixes available in WebStorm 2018.2.6:

  • The Search everywhere dialog on Linux no longer closes when you press Enter (IDEA-200654)
  • The usual UI for Find in path on Linux is now back (IDEA-200704)
  • On macOS Mojave, the input no longer freezes after adding the accented characters from the popup (JRE-998)

Please also see the Release notes for this update.

Your WebStorm Team

Posted in Release Announcements | Tagged | 1 Comment

Testing with Jest in WebStorm

Posted on October 26, 2018 by Ekaterina Prigara

Jest, the testing platform developed by Facebook, is becoming more and more popular with each day, especially for testing React applications. Jest is fast, easy to get started with, and has lots of features (such as snapshot testing and test coverage) available out of the box.

In WebStorm we wanted to streamline the whole testing workflow and make writing, running, and debugging tests with Jest even smoother and easier. Let’s see how WebStorm can help you test your app with Jest.

As an example, we’ll use the react-dropzone project that uses Jest and Enzyme. Enzyme helps you manipulate your React components while testing.

We won’t go into the details of installing and setting up Jest in a project. For that, we recommend Jest’s official documentation and this blog post on testing React apps.

Configure code completion

You might have noticed that some of the global Jest methods (like describe and beforeEach) in JavaScript files are marked as unresolved in the editor. To fix that, install the TypeScript type definition files for Jest: Go to Preferences | Languages & Frameworks | JavaScript | Libraries, click Download on the right-hand side of the dialog, then search for Jest in the list and click Install. Or add @types/jest to devDependencies in project’s package.json.

JavaScript libraries configuration dialog in WebStorm

This happens because Jest defines these methods in the global scope – so you don’t need to import them in each test file. But it also makes it harder for WebStorm to learn about them from the static analysis of the Jest sources – that’s why they are marked by default as unresolved.

Run tests

Create a run configuration to run all tests in the project
First, let’s run all the tests we have in our project. We need to create a run/debug configuration:

  • in the menu Run, select Edit configurations
  • then click + and select Jest from the drop-down list

Usually, you don’t have to change anything in the configuration, but if there’s a Jest configuration file in the project or you need to pass additional flags to Jest, you should do so in this configuration.

Run debug configuration for running all Jest tests Continue reading →

Posted in Tutorials | Tagged , , , | 6 Comments

WebStorm 2018.3 EAP #8: support for Vuetify, move CSS ruleset, JSON improvements

Posted on October 25, 2018 by Ekaterina Prigara

WebStorm 2018.3 Early Preview build #8 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out the previous EAP blog posts.

Toolbox App is the easiest way to get EAP builds. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.3 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights of WebStorm 2018.3 EAP #7 (build 183.3975.16). For the full list of issues fixed in this update, see the Release Notes.

Support for Vuetify

WebStorm now provides code completion for components from Vuetify version 1.1 or above. Type the name of a component name in the template section of the .vue file or press Ctrl-Space for a list of all the components and then select the one you need.

vuetify-components

AngularJS improvements

We know that many people still use AngularJS, that’s why we’ve fixed the problem which was most voted for that relates to the AngularJS support in WebStorm: completion and resolve for $ctrl or the name defined, using the controllerAs property in the template.

controlleras Continue reading →

Posted in Early Access Preview | Tagged , , , , | Leave a comment

WebStorm 2018.2.5 is now available

Posted on October 19, 2018 by Ekaterina Prigara

WebStorm 2018.2.5 is now available! Update to it using Toolbox App or from the IDE. You can also download WebStorm 2018.2.5 from our website.

This update fixes a performance problem with the TypeScript projects caused by the links to the files outside the project (WEB-34669).

From the IntelliJ platform, there are fixes related to logging into the GitHub account (IDEA-198120), the Find in path dialog (IDEA-198588;  the problem still persists on Windows 7, we are currently working on it; as a workaround on Linux with Gnome, we have enabled the old layout for this dialog, the usual UI will be back in WebStorm 2018.3) and the input of the accented characters in popups.

Please also see the Release notes for this update.

Your WebStorm Team

Posted in Release Announcements | Tagged | 9 Comments