IDE configuration

To fully benefit the ESLint and Jest testing frameworks, you must properly set up your IDE.

This document describes how to directly integrate in your IDE some tools the npm build is relying on. For the IDE not mentioned here, the following should help you to know which extensions or plugins to add to your development environment.

• Gitpod
• Visual Studio Code
• IntelliJ

Gitpod

Gitpod provides dev environments running in the cloud for free.

It is advised to read the information written below. If you are however familiar with Gitpod, you can jump there and start coding right away by one click:

Settings

The best way to learn is to read the official Gitpod documentation.

Once you logged to Gitpod, don't forget to give Gitpod write access to public repositories if you want to contribute by using Gitpod:

1. Visit the : Integrations settings
2. Check the box titled: public_repo
3. Click on Update Permissions button

More details are available in the github-integration documentation.

After that quick setup, you are able to contribute and create Pull Requests directly from Gitpod.

When Gitpod IDE is started, the npm install command is launched automatically. The workspace is ready to build and run dev server and tests.

In particular, if you start the dev server, you can access it directly in your browser, see the Gitpod ports documentation for more details.

Extensions

Installed extensions (see VSCode extensions below)

• editorConfig
• eslint
• prettier
• vscode-jest-runner

Visual Studio Code

EditorConfig

Install the EditorConfig extension. A configuration file already exists in the repository, so it will apply right after the extension installation.

ESLint

The project settings stored the configuration to make ESLint work with the project.

Jest

Suggested extensions

• https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
• https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner

vscode-jest-runner is focused on running or debugging a specific test or test-suite, while vscode-jest is running your current test-suite everytime you change it.

The project settings stored the configuration to make the vscode-jest extension run unit tests.

Debugging TypeScript code

The launch.json file is already configured to execute tests:

• unit tests: test:unit
• integration tests: test:integration
• end-to-end tests: test:e2e

You can duplicate these configurations or create another, if you want/need.

Draw.io Diagram

You can create/update draw.io diagrams directly in VS Code with the draw.io extension. See the draw.io annoucement for more details.

AsciiDoc

We use asciidoc to write the documentation.

This extension permits visualizing .adoc files directly in VSCode.

SonarLint

SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed.

IntelliJ

EditorConfig

Go to File -> Settings ( IntelliJ IDEA -> Preferences on macOS) and Editor --> Code Style, then tick the Enable EditorConfig support

ESLint

Go to File -> Settings and type ESLint in search box

Enable ESLint by choosing Automatic ESLint configuration

If automatic configuration is not working for any reason try with Manual ESLint configuration, specify:

• ESLint package to point to project\node_modules\eslint
• Configuration file must point to project\.eslintrc.js

You also need to set up Coding Style rules

It is as simple as doing right-click on the file .eslintrc.js and choosing option Apply ESLint Code Style Rules

Jest tests

You can run tests directly from IntelliJ - there is no need for any additional configuration.
ℹ️ If something is not running well, make sure your Run/Debug Configurations -> templates -> Jest default is not overriding the parameter: Configuration file.

Debugging TypeScript code

• create a new JavaScript Debug configuration as described in the Intellij documentation
  • the targeted url is:
    • For npm run start or npm run watch: http://localhost:10001/
      It's possible to override the port value with the environment variable SERVER_PORT.
    • For npm run test:e2e: http://localhost:10002/
  • use Chrome as browser
  • check Ensure breakpoints are detected when loading scripts
• start the application in development mode by running npm run start or npm run watch
• select the JavaScript Debug configuration and run it with Debug Runner
• the browser opens, and debug session starts (see Intellij documentation documentation for more details)

SonarLint

Additionally, it is advised to install SonarLint Plugin

It helps to avoid coding mistakes -> reduced technical debt

AsciiDoc

We use asciidoc to write the documentation.

An AsciiDoc IntelliJ Plugin is a helpful plugin that permits visualizing .adoc files directly in IntelliJ