[DOC] Improve Gitpod and VSCode documentation for contributors

.gitpod.yml

@@ -2,4 +2,11 @@ image:
   file: .gitpod.Dockerfile
 
 tasks:
-  - init: npm install
+  - init: nvm install && npm install
+
+vscode:
+  extensions:
+    - firsttris.vscode-jest-runner
+    - dbaeumer.vscode-eslint
+    - esbenp.prettier-vscode
+    - EditorConfig.EditorConfig

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+    "editor.formatOnSave": true,
+    // Jest Extension (https://github.com/jest-community/vscode-jest)
+    // The following is to run unit tests
+    // Change the configuration file if you want to run other kind of tests (integration, e2e)
+    "jest.jestCommandLine": "node_modules/.bin/jest --runInBand --config=./test/unit/jest.config.js",
+    // editorconfig extension
+    "editorconfig.generateAuto": false,
+    // eslint extension
+    "eslint.enable": true,
+    "eslint.run": "onSave",
+    "eslint.validate": ["typescript"],
+    "eslint.format.enable": true,
+    "eslint.lintTask.enable": true,
+    // prettier extension
+    "prettier.useEditorConfig": true
+}

docs/contributors/ide-configuration.md

@@ -3,12 +3,11 @@
 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](#Gitpod) 
-* [Visual Studio Code](#visual-studio-code)
-* [IntelliJ](#intellij)
+mentioned here, the following should help you to know which extensions or plugins to add to your development environment.
 
+- [Gitpod](#Gitpod)
+- [Visual Studio Code](#visual-studio-code)
+- [IntelliJ](#intellij)
 
 ## Gitpod
 
@@ -35,6 +34,13 @@ When Gitpod IDE is started, the `npm install` command is launched automatically.
 
 In particular, if you start the dev server, you can access it directly in your browser, see the [Gitpod ports documentation](https://www.gitpod.io/docs/config-ports) for more details.
 
+### Extensions
+
+Installed extensions (see VSCode extensions below)
+- `editorConfig`
+- `eslint`
+- `prettier`
+- `vscode-jest-runner`
 
 ## Visual Studio Code
 
@@ -44,33 +50,26 @@ Install the EditorConfig extension. A configuration file already exists in the r
 
 ### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
-After the installation, you need to explicitly tell to the ESLint extension to watch typscript files for linting errors.
-  - Open the Command Palette (*`View -> Command Palette`* or *`Ctrl+Shift+P`* or *`Shift+Cmd+P`*)
-  - Type `Open Settings (JSON)` and select the option `Preferences: Open Settings (JSON)`
-  - Paste this code inside the opened JSON file
+The project settings stored the configuration to make ESLint work with the project.
+
+### Jest
 
-  ```JSON
-    {
-      "eslint.validate": ["typescript"]
-    }
-  ```
-  - Open the extensions panel (Button `Extensions` on the left toolbar or `Ctrl+Shift+X` or `Shift+Cmd+X`) 
-  - Open the extensions settings of the ESLint extension (using the wheel on the bottom right corner of the extension)
-  - Ensure that the following properties are checked: 
-    - `ESLint: Enable`
-    - `ESLint > Format: Enable`
-    - `ESLint > Lint Task: Enable`
+Suggested extensions
+- https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
+- https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner
 
-Visual Studio Code is now configured correctly to use ESLint on typescript files.
+`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.
 
-*Note: make sure that ESLint is installed and [configured correctly to work with typescript](https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md) on your machine.*
+The project settings stored the configuration to make the `vscode-jest` extension run unit tests.
 
 ### [Debugging TypeScript code](https://code.visualstudio.com/docs/typescript/typescript-debugging)
+
 The `launch.json` file is already configured to execute tests:
-  - unit tests: `test:unit`
-  - integration tests: `test:integration`
-  - end to end tests: `test:e2e`
-
+
+- 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](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
@@ -87,22 +86,21 @@ This extension permits visualizing .adoc files directly in VSCode.
 
 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](https://www.jetbrains.com/help/idea/configuring-code-style.html#editorconfig)
 
 Go to `File` -> `Settings` ( `IntelliJ IDEA` -> `Preferences` on `macOS`) and `Editor` --> `Code Style`, then tick the
 `Enable EditorConfig support`
 
-
 ### [ESLint](https://www.jetbrains.com/help/idea/eslint.html#)
 
 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`
 
@@ -115,28 +113,26 @@ It is as simple as doing `right-click` on the file `.eslintrc.js` and choosing o
 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](https://www.jetbrains.com/help/idea/running-and-debugging-typescript.html#ws_ts_debug_client_side_on_external_dev_server)
 
 - create a new `JavaScript Debug` configuration as described in the [Intellij documentation](https://www.jetbrains.com/help/idea/running-and-debugging-typescript.html#ws_ts_debug_client_side_on_external_dev_server)
-  - the targeted url is: 
+  - 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_.
+      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`  
+  - 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](https://www.jetbrains.com/help/idea/running-and-debugging-typescript.html#ws_ts_debug_client_side_on_external_dev_server)
-documentation for more details) 
+  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](https://asciidoctor.org/docs/what-is-asciidoc/) to write the documentation.