Getting started with JavaScript and TypeScript

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.

Configure a Node.js interpreter

1. Press ⌘ , and switch to the tab with the workspace settings.

   

2. From the Node.js list, select the path to your Node.js installation. To use the system Node.js, select node.

   If you followed the standard installation procedure, Fleet detects your Node.js and adds the path to it to the list.

   To use a custom Node.js installation, select Add Node.js Interpreter and select the relevant path in the dialog that opens.

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" } }

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.

  

Use quick-fixes and intention actions

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

  Solve problems using quick-fixes:

  

  Improve your code using intention actions:

  

Refactor code

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

  

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

Navigate the codebase

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

• Use code interlines to navigate to usages.

  

• Skim over the errors with ⌘ E and ⌘ ⇧ E.

  

• 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 is shown in the console:

  

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

   • npm install --save-dev --save-exact prettier

   • npm install --global prettier

   Learn more about installation modes from the Prettier official website.

2. To reformat a file, select Reformat Code from its context menu.

   

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