JetBrains Fleet 1.48 Help

Getting started with JavaScript and TypeScript

This tutorial helps you get started with JavaScript development in JetBrains Fleet. It covers installation, project setup, and working with JavaScript code.

Prerequisites

Download and install JetBrains Toolbox

  • Download and install JetBrains Toolbox.

    For macOS, you can also download the installer that matches your processor type: Apple Silicon or Intel. Ensure you select the correct option based on your system's processor.

Download and install JetBrains Fleet

JavaScript environment

The steps demonstrate how to use plain JavaScript and Node.js, but they also apply to TypeScript.

  • Make sure Node.js is installed on your computer.

Set up a workspace

A workspace is the directory that contains your project. It includes both project files and settings. You can either open an existing project or start a new one by opening an empty directory.

Open a workspace

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

  2. In the file browser, navigate to an empty folder where you want to store your code, then 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

Configure a Node.js interpreter

  1. Press ⌘ , and switch to the tab with the project settings. The tab is usually named after the folder where the project is located.

  2. In the Toolchains | Node.js section, click the drop-down list, and do one of the following:

    • Select one of the detected Node.js interpreters

    • Click Add Node.js Interpreter, and then specify the path to the Go SDK directory.

    Selecting an interpreter for the workspace

Create project files

  1. In the Files view, right-click the root folder, then select New File. Name the new file app.js.

  2. Paste the following code into 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 into 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 code editor. However, if you need code intelligence features, you can enable them by turning 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

JetBrains Fleet provides a variety of coding assistance features. Below are a few examples to help you get a sense of how they work in practice. This is not a complete list, but a good starting point for exploring what JetBrains Fleet can do.

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 a symbol’s declaration by pressing ⌘ B.

  • Use code interlines to navigate to usages.

    An interline showing the usages count for the symbol at the caret
  • Navigate between errors using ⌘ E and ⌘ ⇧ E.

    Navigating between errors

Run code

You can run server-side JavaScript code right from JetBrains Fleet provided that you have installed and configured Node.js on your computer as described in Configure a Node.js interpreter. For more information, refer to Run JavaScript code.

  • Navigate to your package.json file and click the Run icon in the gutter next to the start script and select Run 'start'.

    The application output will be shown in the console:

    Application output shown in the console

Reformat code with Prettier

Prettier is a formatting tool for .js, .ts, .css, .less, .scss, .vue, and .json files. In JetBrains Fleet, you can use Prettier to format selected code fragments or entire files.

  1. To install Prettier, open the built-in Terminal (View | Terminal) and run one of the following commands:

    npm install --save-dev --save-exact prettier
    npm install --global prettier

    For more information about installation options, visit the official Prettier website.

  2. You can use Prettier to reformat either an entire file or a selected code fragment:

    • To reformat an entire file, right-click the file and select Reformat Code from the context menu.

    • To reformat a code fragment, select it and then choose Reformat Code from the context menu.

21 May 2025