JetBrains Fleet 1.13 Help

Getting started with JavaScript and TypeScript

This tutorial gets you up to speed with JavaScript development in JetBrains Fleet. It covers the installation, project setup, and working with code. The steps show vanilla JavaScript and Node.js, however you can use them for TypeScript as well.

Prerequisites

Download and install Fleet

  1. Make sure you are logged in JetBrains Toolbox under your JetBrains Account.

  2. In JetBrains Toolbox, click Install near the JetBrains Fleet icon.

    Download and install Fleet

Set up a workspace

Workspace is the directory where your project resides. It contains the project files and settings. You can open an existing project or start a new project by opening an empty directory.

Open a workspace

  1. Press ⌘O or select File | Open from the menu.

  2. In the file browser, navigate to an empty folder where you want to store your code and click Open.

When you open a directory, it becomes the root of a workspace. You can view its contents in the Files view.

The Files view in the left panel

Create project files

  1. In the Files view, right-click the root folder, then select New File. Give the new file a name, for example, app.js.

  2. Paste the following code in the editor:

    const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World'); }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
  3. In the Files view, right-click the root folder, then select New File. Name the file package.json.

  4. Paste the following code in the editor:

    { "name": "server", "version": "1.0.0", "scripts": { "start": "node app.js" } }

Smart mode

You can use JetBrains Fleet as a smart text editor, rather than a full-fledged IDE. However, if you need code intelligence features, you can enable them by turning the Smart Mode on.

Enable smart mode

  • In the top-right corner of the window, click Smart Mode, then Enable.

    After you click the Enable button, you may have to wait for some time, while the backend is being prepared.

    Smart mode popup

Here's what you can do in Smart Mode. The below is not an exhaustive list of Smart Mode features, rather a couple of examples that'll help you to get the feel of how it works in Fleet.

Use quick-fixes and intention actions

  • Press ⌥↵ to access actions that Fleet suggests in the current context.

    Solve problems using quick-fixes:

    The popup showing the available quick fixes for the code at the caret

    Improve your code using intention actions:

    The popup showing the available intention actions for the code at the caret

Refactor code

  • Place the caret at a symbol you want to rename. Press ⌃R and give it a new name.

    Entering the new name for the symbol at the caret

    The symbol gets the new name and all its usages are updated.

  • Navigate to the declaration of a symbol with ⌘B.

  • Use inlay hints navigate to usages.

    An interline showing the usages count for the symbol at the caret
  • Skim over the errors with ⌘E and ⌘⇧E

    Navigating between errors

Run code

Run from the editor

  • Navigate to the package.json file and click the run icon near the start script. Select Run.

    A menu appears after clicking Run in the gutter

    The application output is shown in the console:

    The application output is shown in the console
Last modified: 25 October 2022