Deno Support in JetBrains IDEs – Things You Need to Know

Posted on by Ekaterina Ryabukha

Ryan Dahl, the creator of Node.js, has finally introduced Deno, a new runtime for JavaScript and TypeScript. If you’re eager to give it a go, we’ve got some great news for you! Starting with v2020.1, you can get support for Deno in WebStorm and other JetBrains IDEs, including PhpStorm, IntelliJ IDEA Ultimate, and PyCharm Professional. Let’s see what’s included in this support.

Installing the Deno plugin

At the moment, Deno support is provided through the corresponding plugin which is not bundled with WebStorm and other JetBrains IDEs. This may change later depending on the popularity of Deno and the feedback we’ll get from you.

To install the Deno plugin, go to Preferences/Settings | Plugins and search for Deno under the Marketplace tab. Then, open Preferences/Settings | Languages and Frameworks | Deno to enable Deno support for your current project.

deno-checkbox-preferences

Working with code

Now you can start working with code – all coding assistance features will work as usual! First, you’ll see proper completion suggestions and won’t get any warnings about Deno-style imports.

If you hover over a symbol, the IDE will show you the relevant documentation about that symbol.

deno-plugin-docs

Another essential feature, auto imports, will also work properly in Deno projects. By default, auto imports will have the .ts file extension.

For code formatting, the IDE will rely on the built-in formatter, which can be invoked with Alt+Cmd+L/Alt+Ctrl+L. If you want to replace it with another tool like deno fmt, you can configure that tool either as a file watcher or as an external tool. For file watchers, there’s a good Deno-specific how-to guide available here.

If you need support for import_map.json, add a tsconfig.json file as described in the instructions for the TypeScript plugin. Our Deno plugin comes bundled with that TypeScript plugin, so the instructions are the same.

Running and debugging code

Apart from coding assistance features, the plugin adds a new type of configuration for running and debugging TypeScript files with Deno. To make use of it, right-click a TypeScript file and select Run ‘Deno: file name’ or Debug ‘Deno: file name’. Alternatively, you can run a file with Ctrl+Shift+R on macOS or Ctrl+Shift+F10 on Windows/Linux.

select-run-configuration-deno

To adjust the settings for the newly created run configuration or add a new one, go to Run – Edit Configurations located in the main menu. In the dialog that opens, click the + icon and select Deno from the list if you want to create a new run configuration. To update an existing one, simply click it and make the necessary changes.

add-run-configuration-deno

By default, the IDE doesn’t add permission flags like –allow-net. If you want to change this behavior, you can customize the default template for Deno projects located under Templates in the same Run/Debug Configurations dialog. If the path to Deno wasn’t set correctly in the automatically created configuration, you can fix it in the default template too.

The same run configuration can be used for running and debugging the code – the debug flag will be added automatically when you click the Debug icon.

That’s about it. We hope Deno support will be useful for you in WebStorm and other JetBrains IDEs.

The WebStorm team