WebStorm 2018.1.1 is now available

Posted on April 11, 2018 by Ekaterina Prigara

WebStorm 2018.1.1, the first bug-fix update for the recently released WebStorm 2018.1 is now available!

In WebStorm 2018.1 please use Check for Updates… in the WebStorm menu on macOS or in the Help menu on Windows and Linux to update to WebStorm 2018.1.1.

Unfortunately, you will not automatically get the update notification if you’re using WebStorm 2018.1 without Toolbox App. We apologize for that!

You also can install WebStorm 2018.1.1 using Toolbox App or download it from our website.

What’s new in WebStorm 2018.1.1:

  • Better support for Yarn workspaces: WebStorm now provides proper code completion for the dependencies listed in the workspace’s package.json
  • In the JavaScript and TypeScript code style settings you can now configure whether to add file extensions in imports or not
  • The bundled TypeScript package has been updated to version 2.8
  • Stylelint now works in the Vue single-file components and the HTML files

What’s fixed:

  • Move statement up and down now works for the JSX code (Shift-Cmd-Up/Down on macOS or Ctrl-Shift-Up/Down on Windows and Linux) (WEB-18490)
  • The code completion for methods and properties defined in the CommonJS modules has been improved (WEB-28158, WEB-26937, WEB-24161, WEB-22342)
  • The problem with editing the Pug files is now fixed (WEB-31990)

There is more about some of the improvements below.

Support for Yarn workspaces

Yarn workspaces help you organize multiple packages into a single repo. When using Yarn workspaces, the dependencies of all the packages are installed together and are put into the node_modules folder at the root of your project and not next to the package.json file of each workspace. Continue reading →

Posted in Release Announcements | Tagged , | 5 Comments

WebStorm 2018.1: Prettier, partial Git commits, new documentation UI, and more

Posted on March 26, 2018 by Ekaterina Prigara

🎉 Today we’re announcing WebStorm 2018.1! 🎉

With this big spring update, WebStorm brings integration with Prettier, lots of improvements in support for JavaScript, TypeScript, and CSS, and so much more!

Explore the new features and download WebStorm 2018.1 on our website.

Here are the key highlights of WebStorm 2018.1 that you can’t miss:

  • Format your code with Prettier with a shortcut, Alt-Shift-Cmd/Ctrl-P.
  • Commit to Git or add to a changelist only selected changes from a file.
  • Enjoy the new, more compact and lightweight documentation popup for JavaScript, TypeScript, and other languages.
  • Create new Vue projects from the IDE’s Welcome screen using Vue CLI, and create new components using the Extract Vue Component refactoring.
  • Configure Yarn or npm as a package manager used in the project, in the Node.js and npm preferences.
  • Debug React Native apps that use Expo, as well as those already built and launched on a device.


Download WebStorm 2018.1

WebStorm Team

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

WebStorm 2018.1 EAP, 181.4096: renaming class and file, webpack 4, CSS improvements

Posted on March 7, 2018 by Ekaterina Prigara

The new WebStorm 2018.1 Early Preview build (181.4096.12) is now available!

Update: we’ve released a new build #181.4096.25 to fix a performance issue introduced in build #181.4096.12, published on March 7th, 2018. The IDE was consuming lots of CPU resources after running npm install or adding many new directories to the project.

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Rename a file when renaming a class in it

Now if you run Refactor – Rename for a class, WebStorm will also suggest renaming the file if it had the same name as the class. Of course, it will also update the name of the file in imports in other files.

rename-class-and-file

If you press Alt-Enter on the name of the class, interface or type, you will see a new intention that suggests renaming the file to this name. This is useful if you have just created a new file but then came up with a different, better name when started typing a class or interface in it.

rename-file-intention

Another intention will suggest moving the class to a new file with the corresponding name.

Project-wide completion for CSS classes in HTML

We have changed the behavior of code completion for CSS classes and ids in HTML.
Before, if you had an HTML file with the style tag in it or a linked stylesheet file, WebStorm only suggested classes and id defined there.

Now, WebStorm will first suggest classes and ids from the style tag and linked files. But if, as you start typing, no matching results are found, it will also suggest symbols defined in all stylesheet files in the project.

completion-for-classes-and-ides

If you want to see all classes and ids defined in the project straight away, before you start typing, double-press Ctrl-Space (Show code completion).

Reformat CSS, Vue and JSON files with Prettier

The new Reformat with Prettier action now works not only for the JavaScript and TypeScript files, but also for all other file types supported by Prettier – CSS, Less, SCSS, Vue, and JSON files.

reformat-with-prettier-for-css-files

Continue reading →

Posted in Early Access Preview | Tagged , , , , | 2 Comments

Updates for WebStorm 2016.3, 2017.1, 2017.2, and 2017.3

Posted on March 6, 2018 by Ekaterina Prigara

Today we are releasing bug-fix updates for four WebStorm major versions – WebStorm 2016.3.7 (build 163.15529.11), 2017.1.5 (171.4694.80), 2017.2.6 (172.4574.25), and 2017.3.5 (173.4674.32).

This update brings support for the strong cryptographic algorithms to the built-in SSH executable used by Git so that it is now compatible with the new GitHub cryptographic standards.

For more details, please refer to this blog post. We apologize for not having resolved this issue sooner and will strive to improve for the future.

You will get a notification about the available patch update in the IDE. Alternatively, you can install the updates using Toolbox App or download it from our website.

WebStorm Team

Posted in Release Announcements | Tagged , , , | Leave a comment

WebStorm 2018.1 EAP, 181.3986: create new projects with Vue CLI

Posted on February 28, 2018 by Ekaterina Prigara

The new WebStorm 2018.1 Early Preview build (181.3986.8) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Create new project using Vue CLI in WebStorm

Now you can use Vue CLI to create new Vue projects right from WebStorm’s Welcome screen.

vue-project-wizard

vue-cli is an official tool for scaffolding Vue apps. You’ll need to install it first by running npm install --g vue-cli in the terminal. WebStorm will then use this package to create a new project.

With Vue CLI version 2, you can select one of 6 default project templates and then answer additional questions about tools like linters and test runner that can be added to the project.

Alternatively, you can use Vue CLI version 3 which is currently in beta.

Process and Debugger consoles in the Node.js debugger

When debugging a Node.js application in WebStorm, you can now see two console tabs – the Console and the new Debugger Console. Continue reading →

Posted in Early Access Preview | Tagged , , | 11 Comments

WebStorm 2018.1 EAP, 181.3870: Reformat code with Prettier, partial commits in Git

Posted on February 21, 2018 by Ekaterina Prigara

The new WebStorm 2018.1 Early Preview build (181.3870.1) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Reformat code with Prettier

Prettier is a code formatting tool for JavaScript and TypeScript. While it was possible to configure and use it in WebStorm as an external tool, we decided to make the integration with it more seamless.

Now, if you have prettier installed as your project dependency or globally on your machine, you can use the new Reformat with Prettier action (Alt-Shift-Cmd/Ctrl-P) to format the selected code, a file or a whole directory. You can also find this action using the Find Action popup (Cmd/Ctrl-Shift-A).

New action Reformat with Prettier

Continue reading →

Posted in Early Access Preview | Tagged , , , | 12 Comments

WebStorm 2018.1 EAP, 181.3741: TypeScript improvements, better Implement action, new inspection for dependencies

Posted on February 14, 2018 by Ekaterina Prigara

The new WebStorm 2018.1 Early Preview build (181.3741.14) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Check installed dependencies

We’ve added a new inspection that checks that the installed version of the node package matches the range specified in package.json.

If the package is listed in devDependencies or dependencies but is not installed (or is installed but outdated), the quick-fix, available when you press Alt-Enter, will suggest running npm install.

package-version

TypeScript improvements

Support for new language features

WebStorm adds support for a bunch of new TypeScript features: definite assignment assertions and numeric separators introduced in TypeScript 2.7, and conditional types coming in TypeScript 2.8.

Using a different name for tsconfig.json

WebStorm now supports TypeScript configuration files with names other than tsconfig.json. Continue reading →

Posted in Early Access Preview | Tagged , , | 3 Comments

WebStorm 2018.1 EAP, 181.3494: redesigned documentation popup, configuration for package manager, VCS improvements

Posted on February 7, 2018 by Ekaterina Prigara

The new WebStorm 2018.1 Early Preview build (181.3494.18) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Redesigned documentation

We are happy to present to you the new look for the documentation popup.

With this redesign we wanted to make the documentation more compact, lightweight, and easy to read. We also wanted to make sure that the information in it is presented in a clear and consistent way.

new-documentation-popup-in-20181

The new popup has been enabled for all languages, but in terms of its content, so far, we have mostly focused on the docs for JavaScript and TypeScript. In the future we hope to bring the fully updated documentation view to all the languages.  Continue reading →

Posted in Early Access Preview | Tagged | 6 Comments

WebStorm 2018.1 EAP, 181.3263.21: improvements for React Native, extract Vue component

Posted on February 1, 2018 by Ekaterina Prigara

The new WebStorm 2018.1 Early Preview build (181.3263.21) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Extract Vue component

With this new intention you can now easily, without any copy and paste, extract a new Vue component from an existing one.

Select the part of the template you want to extract, press Alt-Enter and select Extract Vue
Component. Then type the name of the new component. WebStorm will create a new single-file component (or warn you if the name you’ve selected is already used or invalid) and import it into the parent component.

All the data and methods used in the extracted template will stay in the parent component and will be passed to a new component with props. The related styles will also be copied.

Running and debugging React Native apps

In the React Native development, we now support several new run and debug scenarios, including debugging with Expo. For that, we had to rework the React Native run/debug configuration significantly. Continue reading →

Posted in Early Access Preview | Tagged , , | 6 Comments

WebStorm 2017.3.4 is available

Posted on January 31, 2018 by Ekaterina Prigara

WebStorm 2017.3.4 (173.4548.30) is now available!

Install this update using Toolbox App or download it from our website. If you’re using WebStorm 2017.3.2 or 2017.3.3, you will soon see a notification in the IDE for a patch update.

What’s fixed:

  • You can now generate Angular components using New… – Angular CLI in projects created with @angular/cli 1.6.6+
  • We’ve disabled the support for UI scaling with the factor 2+ on Linux because of the regressions it caused.

Please see the Release Notes for a full list of addressed issues.

WebStorm Team

Posted in Release Announcements | Tagged | Leave a comment