-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DOC] Provide VSCode tips in the contributing guide (#608)
* Add VSCode configuration for tests * Add debug tips * Add draw.io extension tips * Move IDE configuration section in dedicated file * Update doc with EditorConfig configuration * add asciidoc and sonarLint extension Co-authored-by: Thomas Bouffard <[email protected]> Co-authored-by: Marcin Michniewicz <[email protected]>
- Loading branch information
3 people
authored
Sep 16, 2020
1 parent
370289f
commit 33f784f
Showing
3 changed files
with
136 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| { | ||
| // Use IntelliSense to learn about possible attributes. | ||
| // Hover to view descriptions of existing attributes. | ||
| // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 | ||
| "version": "0.2.0", | ||
| "configurations": [ | ||
| { | ||
| "type": "node", | ||
| "name": "test:unit", | ||
| "request": "launch", | ||
| "program": "${workspaceFolder}/node_modules/jest/bin/jest", | ||
| "args": [ | ||
| "--runInBand", "--config=jest.config.unit.js" | ||
| ], | ||
| "cwd": "${workspaceFolder}", | ||
| "console": "integratedTerminal", | ||
| "internalConsoleOptions": "neverOpen", | ||
| "disableOptimisticBPs": true | ||
| }, | ||
| { | ||
| "type": "node", | ||
| "name": "test:e2e", | ||
| "request": "launch", | ||
| "program": "${workspaceFolder}/node_modules/jest/bin/jest", | ||
| "args": [ | ||
| "--runInBand", "--detectOpenHandles", "--config=jest.config.e2e.js" | ||
| ], | ||
| "cwd": "${workspaceFolder}", | ||
| "console": "integratedTerminal", | ||
| "internalConsoleOptions": "neverOpen", | ||
| "disableOptimisticBPs": true, | ||
|
|
||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| # IDE configuration | ||
|
|
||
| To fully benefit the ESLint and Jest testing frameworks, you must properly set up your IDE. | ||
|
|
||
| ### 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` | ||
|
|
||
| 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](https://www.jetbrains.com/help/idea/running-unit-tests-on-jest.html) | ||
|
|
||
| To be able to run tests from IntelliJ, you must set up the default Jest template in `Run/Debug Configurations` | ||
|
|
||
| Adjust following parameters: | ||
| - Configuration files: it depends on the type of tests you want to run | ||
| - unit tests: `<project_dir>/jest.config.unit.js` | ||
| - end to end tests: `<project_dir>/jest.config.e2e.js` | ||
|
|
||
|
|
||
| #### [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: | ||
| - 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](https://www.jetbrains.com/help/idea/running-and-debugging-typescript.html#ws_ts_debug_client_side_on_external_dev_server) | ||
| 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. | ||
|
|
||
| An [AsciiDoc IntelliJ Plugin](https://plugins.jetbrains.com/plugin/7391-asciidoc) is a helpful plugin that permits visualizing .adoc files directly in IntelliJ | ||
|
|
||
|
|
||
|
|
||
| ### Visual Studio Code | ||
|
|
||
| #### [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) | ||
|
|
||
| Install the EditorConfig extension. A configuration file already exists in the repository so it will apply right after the extension installation. | ||
|
|
||
| #### [Jest tests](https://github.com/jest-community/vscode-jest#how-to-get-it) | ||
|
|
||
| To be able to run tests from VS Code, you firstly install the Jest extension, then, go to the **Run** menu of VS Code. | ||
| You can run 2 test configurations: | ||
| - unit tests: `test:unit` | ||
| - end to end tests: `test:e2e` | ||
|
|
||
| If you want to use coverage, follow this tutorial: https://github.com/jest-community/vscode-jest#how-do-i-show-code-coverage | ||
|
|
||
| #### [Debugging TypeScript code](https://code.visualstudio.com/docs/typescript/typescript-debugging) | ||
| The `launch.json` file is already configured to execute unit & e2e tests. | ||
| You can duplicate these configurations or create another, if you want/need. | ||
|
|
||
| #### [Draw.io Diagram](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) | ||
|
|
||
| You can create/update draw.io diagrams directly in VS Code with the draw.io extension. See the [draw.io annoucement](https://www.diagrams.net/blog/embed-diagrams-vscode) for more details. | ||
|
|
||
| #### [AsciiDoc](https://marketplace.visualstudio.com/items?itemName=asciidoctor.asciidoctor-vscode) | ||
|
|
||
| We use [asciidoc](https://asciidoctor.org/docs/what-is-asciidoc/) to write the documentation. | ||
|
|
||
| This extension permits visualizing .adoc files directly in VSCode. | ||
|
|
||
| #### [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode) | ||
|
|
||
| Additionally, it is advised to install the SonarLint extension. | ||
|
|
||
| It helps to avoid coding mistakes -> reduced technical debt. |