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.
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:
You can find the full list of available templates in Preferences | Editor | Live Templates – React.
For the JSX tags, you can now also see the breadcrumbs and colorful highlighting for the tag tree on the editor gutter.
Custom templates for postfix completion
Postfix completion is a great feature for adding template code around an expression you’ve just typed. The available templates are listed in Preferences | Editor | General | Postfix Completion. They expand when you press Tab or when you select them in the code completion popup.
Now you can add your own templates for postfix completion!
Let’s see how we can create a template that will expand into a class for a new React component:
- In Preferences | Editor | General | Postfix Completion, click the + icon.
- Select the language where the template will work. Note that all JavaScript templates will also be available in TypeScript files.
- Select the key (abbreviation). We’ll use
rcomp - Specify the JavaScript language level. For our template, we want it to work only in JSX code.
- Now add the template code and add
$EXPR$in the places where the initial expression should appear. Add$END$where you want the cursor to be at the end:
class $EXPR$ extends Component {
render() {
return (
<div>
</div>
);
}
}
export default $EXPR$;
- Save the template. Now you can use it in the editor!
Debugger improvements
Debugging Karma tests using Chrome Headless
Karma allows you to use Chrome Headless for running your tests (check out this great tutorial in the Chrome blog). With Karma, your tests are executed in a real browser environment but without the overhead created by running a full Chrome instance.
WebStorm now enables you to debug Karma tests in Chrome Headless (whereas previously you could only run them there).
To run and debug tests in Chrome Headless using Karma, add browsers: ['ChromeHeadless'] to the karma.conf.js file, or list it as a browser in WebStorm’s Karma configuration (see the screenshot below). For more info on setting up your project to use Chrome Headless, see this tutorial.
Reconnect the debugger to the running node process
We have added a new Reconnect automatically option to the Attach to Node.js/Chrome debug configuration.
Thanks to this option, it is now easier to debug Node.js apps that use nodemon. Nodemon is a utility that automatically reloads your node process when you change the code of your app.
Here’s how you can debug such an application:
- Start your app in the debug mode. To do this, pass an
--inspectflag to nodemon. You can create and run a newnpm debug scriptthat would look like this:debug": "nodemon --inspect ./app.js(be sure to replace ./app.js with the path to the file that starts your app). - Create a new Attach to a Node.js/Chrome configuration and select the Reconnect automatically check-box.
- Usually, you don’t need to change the port in the configuration (9229) because it’s the default port the debugger is listening on. But you can double-check what port is used in the message logged when you run the app in the debug mode.
- Now run the new configuration. The debugger will stop on the breakpoints that you’ve put in your code in the IDE.
- If you make any changes to the code and click Save, nodemon will automatically reload the app. The debugger will now be able to automatically re-attach to the restarted process.
JSON support improvements
Support for JSON5
WebStorm 2018.2 now supports the JSON5 standard. By default, you can use the new syntax only in files with the .json5 extension, but you can extend it to all .json files. To do this, open Preferences | Editor | File types, find JSON5 in the list and add *.json to the registered pattern for it.
Copy JSON Pointer
Another useful improvement in this area is the new action that allows you to copy the JSON pointer, a path-like string for the selected object.
Improved support for JSON Schemas
For some time already, WebStorm has been able to validate JSON files and provide code completion in such files using JSON Schema, a special format for describing their structure and contents.
In WebStorm 2018.2, we have improved support for JSON Schema in many ways.
WebStorm can now automatically download and use schemas from the JSON Schema Store that hosts schema files for many popular configuration files.
As soon as you’ve opened a file whose name is associated with one of the available schemas (for example, composer.json), WebStorm will download and use this schema for it. You will see the name of the applied schema in the status bar.
If you have a custom name for a config file, you can manually select a required schema from the list on the status bar.
We have also updated the configuration of custom JSON Schemas that you can add to the IDE and use for specific files in your project. You can now specify the URL of the schema file. It’s available in Preferences | Languages and Frameworks | Schemas and DTDs | JSON Schema Mappings.
New in Version Control
Lots of improvements has been made for Version Control Systems. You can check the details in the IntelliJ IDEA’s blog.
Here are the highlights:
- Files with merge conflicts are now grouped together under a new Merge Conflicts node shown for each changelist in the Local Changes tab.
- You can now have many Log tabs with different filters opened.
- You can be logged in into multiple GitHub accounts in WebStorm.
Touch Bar support
Last, but not least is the MacBook Touch Bar support.
Now you can run, build, and debug your project, along with committing changes or updating the project right from the Touch Bar. The Touch Bar shows the controls depending on the context or which modifier keys you press. We support the most popular contexts, and even better – the contexts can be customized! Read more in the IntelliJ IDEA’s blog.
WebStorm Team
Subscribe to WebStorm Blog updates
