WebStorm 2018.2 Early Access Preview: React code snippets, actions on Touch Bar, improvements in JSON support

We are excited to announce the start of the Early Access Preview program for WebStorm 2018.2. Its official release is planned for the end of July.

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

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, here are some details:

  • Every week we publish a fresh build for the upcoming version of WebStorm.
  • EAP builds provide access to the newest features we’re currently developing.
  • EAP builds are free to use but expire within 30 days of the build date.
  • You can install an EAP build side-by-side with a stable WebStorm version.
  • Your feedback is very welcome in our issue tracker: youtrack.jetbrains.com/issues/WEB. Please don’t forget to mention the build number you’re using.

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

The first EAP build, which is available today (182.2371.25), has over 230 of fixes and improvements that the WebStorm team has implemented since the last major release in March. It also includes dozens of changes from IntelliJ Platform, including a BIG icon update, lots of improvements in version control, and support for MacBook Touch Bar.

Here are some of the highlights of WebStorm 2018.1 EAP #1.

React code snippets

WebStorm now has a collection of code snippets for React. It has over 50 abbreviations that expand into different statements and blocks of code often used in React apps. The collection was adapted from the popular plugin for VS Code.

Type the abbreviation in the editor and then press Tab to expand it. Or press Cmd/Ctrl-J (Insert Live Template) and select the snippet from the list. All abbreviations are also available in the completion popup.

Here we use the abbreviation rcjc to create a class that defines a new React component:

react-live-template

You can find the full list of available templates in Preferences | Editor | Live Templates – React. Continue reading

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

Optimize imports in WebStorm

To help you keep the import section in a JavaScript or a TypeScript file clean and readable, WebStorm has an action called Optimize imports. It does several things at once:

  • it removes any imports that are no longer used;
  • it merges together multiple imports from the same file;
  • it can sort members inside the import and sort imports by the module name.

To run Optimize imports, use the shortcut Ctrl-Alt-O or find it in the Find Action popup (Cmd/Ctrl-Shift-A). Alternatively, you can just have WebStorm run it automatically before a commit. We’ll talk about ways to do that in a second.

Here’s how Optimize imports works:
optimize-imports

Let’s have a closer look at the actual code:

This is what we get after running Optimize imports with the default options:

If we want to go one step further and also sort the imports, we can do that by going to Preferences | Editor | Code Style | TypeScript or JavaScript and checking Sort imports by modules on the Import tab. This will sort our imports alphabetically by module name (the part after from):

On this tab, you can also find two other options related to Optimize import: Merge imports for members from the same module and Sort imported members (responsible to sorting symbols inside {} in the import statement).

import-code-style

There are several ways how you can run Optimize imports.

The most straightforward way to use the Optimize import action is to press Ctrl-Alt-O or find it in the Find Action popup (Cmd/Ctrl-Shift-A). This will only change imports in the currently opened file. Continue reading

Posted in Tutorials | Tagged , | 4 Comments

WebStorm 2018.1.3 is now available

WebStorm 2018.1.3 is now available!

Please update using Toolbox App or the IDE or download WebStorm 2018.1.3 from our website.

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

This update adds a number of improvements related to the Angular 6 support (including creating new Angular projects from the IDE Welcome screen and generating new blueprints via the New… pop-up when using Angular CLI 6). WebStorm 2018.1.3 also brings updated code completion suggestions for the TSLint rules.

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

WebStorm Team

Posted in Release Announcements | Tagged , | Leave a comment

WebStorm 2018.1.2 is now available

WebStorm 2018.1.2 is now here!
Please update using Toolbox App or the IDE or download WebStorm 2018.1.2 from our website.

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

What’s new:

  • When renaming an Angular component, you can now automatically rename the related .ts.html, and .css files
  • Auto import for the RxJS operators now respects the new import style introduced in RxJS 6.0
  • With the new option in the JavaScript debug configuration, the breakpoints in the code that is executed on page load are hit on the first app run
  • The new option in the TypeScript code style settings allows omitting types in the generated JSDoc comments
  • More precise code completion for object properties after you explicitly check that they exist

What’s fixed:

  • The log messages are again now shown in the Console tab of the npm, Gulp, and Grunt tool windows (WEB-32003)
  • The new React 16.3 lifecycle methods are now resolved and are available in code completion suggestions when @types/react is installed (WEB-32069)
  • Replace with the template string intention now works correctly for expressions with the ternary operator (WEB-24100)

There is more about some of the improvements below.

Smarter rename for Angular components

The Angular Style Guide recommends using the same name for the component’s class and its TypeScript, template and style files.

Now if you rename a class (Refactor – Rename in the context menu or F6) that defines an Angular component, WebStorm will automatically suggest that you rename all the related files and their usages. Notice how the filenames and the paths to them have changed.

rename-angular-component

Moreover, WebStorm has changed all the imports and usages of this component in other templates. Continue reading

Posted in Release Announcements | Tagged | 9 Comments

WebStorm 2018.1.1 is now available

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

🎉 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 , , , , , | 40 Comments

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

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

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

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 , , | 13 Comments

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

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 , , , | 16 Comments