WebStorm 2019.1 EAP #7: run Node.js using Docker Compose, Recent Locations popup
WebStorm 2019.1 Early Preview build #7 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”.
Important! WebStorm EAP builds are not fully tested and might be unstable.
Here are some of the highlights of WebStorm 2019.1 EAP #7 (build 191.6014.17). For the full list of issues fixed in this update, see the Release Notes.
Run and debug Node.js app when using Docker Compose
If you’re using Docker for testing your Node.js application, you can now use the configuration described in the Docker Compose file to easily run and debug the app from the IDE.
Please note that the described steps only work if you use node or npm in the command field of your Docker Compose file to run your app, e.g. command: node ./src/app.js
- Create a new Node.js run/debug configuration using the Edit Configurations… action in the Run menu.
- Click the … icon next to the Node.js interpreter field, then click + and select Add Remote…
-
In the dialog that opens, select Docker Compose. If you haven’t used Docker in WebStorm before, you need to configure the Docker connection – click the New… icon and select the connection option according to your OS as described in this doc.
- Set the path to the Docker Compose file and select the service you want to run.
- In the Node.js run/debug configuration, leave the JavaScript file field blank if you want WebStorm to use the command specified in your Docker Compose file. If you want to override it, you can use the fields in the configuration (JavaScript file, node, and app parameters…).
- Save the configuration.
Now you can use this configuration to run or debug your app – the IDE will deploy the app to the Docker container using the docker-compose up command and, if running in the debug mode, pass the debug flag to Node.js and attach to the debug process.
If you don’t use Docker Compose or want to have a closer look at the Docker support for Node.js in WebStorm, check out the blog post “Quick tour of WebStorm and Docker”.
Recent Locations
WebStorm 2019.1 adds a new way to navigate around the project – the Recent Locations popup. It can be opened with Cmd-Shift-E on macOS or Ctrl+Shift+E on Windows and Linux.
It shows you the list of files and lines of code in them that you have recently opened in the editor (when navigating to the definition or usage, using the Go to action, or simply opening the file from the project view).
When the popup is open, start typing to filter the results and find the code you need (the search works for the code and file names). Of course, you can also just use the up and down arrows to select the required location.
If you want to only see the code fragments that have been changed, select the “Show only changed” checkbox.
Support for TSLint as TypeScript plugin
If you’re using TypeScript in your .vue files and want to lint the code inside the script tag using TSLint, you can now use the typescript-tslint-plugin plugin for TypeScript. With this, TSLint checks become part of the TypeScript language service, and you will be able to see all the TSLint errors next to the TypeScript errors in the IDE tool window and, of course, in the editor.
You can fix and suppress TSLint errors and warnings using the intentions available on Alt-Enter.
To start using it, first, install the plugin with npm install typescript-tslint-plugin and then enable it in the project’s tsconfig.json file:
{
"compilerOptions": {
"plugins": [
{ "name": "typescript-tslint-plugin" }
]
}
}
By the way, you may also want to use typescript-tslint-plugin if you have enabled the TSLint rules that require type information (like “deprecation” or “prefer-readonly”) – that way these types of errors will be highlighted in the editor as you type.
Simple Node.js project template
To make it easier to start a simple Node.js app, we’ve added a new template called “Node.js”. You can choose this when you click Create New Project on the IDE Welcome screen.
This project generator runs the npm init command that adds a package.json file and enables code completion for Node.js core APIs.
Please report any issues on our issue tracker. And stay tuned for the next week’s update!
WebStorm Team
Subscribe to WebStorm Blog updates
