# Tools ## Node The first thing that you need to work with our FrontEnd area, is to install `nodejs`. You can download from [https://nodejs.org/](https://nodejs.org). Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. For this reason, you need to get it, because each project needs `nodejs` to run. For our purpose, you require at least version `Node.js 8.x`. ### Npm vs Yarn When you install `Nodejs`, you will get the package manager `npm` used it to obtain the packages that a project needs. `NPM` works but it slow. To solve this problem, Facebook people created an improved version to get packages called `Yarn`. You can use the `npm manager` or the \`Yarn manager. At the end of the day you can get your packages. To get the `yarn package`, after install node you need to run this command: ``` npm install yarn -g ``` Also, if you have `Chocolatey` installed in your Windows PC, you can run: ``` choco install yarn ``` You third option, is download the .msi file from [here](https://yarnpkg.com/en/docs/install#windows-stable). ## Git All our repositories are host in `Team Foundation Server`. If you want to get some repository, you will have to do it through `git`. You can install git from their website . ### GUI Clients After install git, maybe you do not feel comfortable using git from the console. If it is your case, do not worry! Since there are applications that simplify the use of `git` through graphical interface. We usually use two applications for git. #### SourceTree `Sourcetree` works on Windows and MAC. You can download it from the website . It's important remember the cost of this software. it's Free! under a proprietary license. `Sourcetree` is simple to use. you can do every from this application. #### TortoiseGit `TortoiseGit` is a windows shell interface to git, and you can download from their website . One of the best features that `TortoiseGit` offers, is that provides overlay icons showing the file status, a powerful context menu for Git and much more! You can access to the most common actions with a few clicks. ## Visual Studio Code Right now, there are a lot of editor in the market, but perhaps the most comfortable in recent times has been `Visual Studio Code`. You can practically do **everything** with Visual studio Code, from writing a few lines of code, going through manager git, to creating documentation or UML diagrams. `Visual Studio Code` has been our tool selected for our day to day in the FrontEnd team.And a large part of that decision is that it is lightweight and has a large number of plugins to make the development process as agile as possible. You can download from their website ### Extensions You can install `extensions` from the `visual studio code` application. 1. Open your `VSCode` and press `Ctrl + Shift + X`. 2. search the extensions. 3. Click on Install button. > Some extensions require more setup. Consult the extension documentation for next steps. #### Example install extension ![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEOm98BbzqckTUoLpXN%2F-MG9ivKNNYY11bUa5f0e%2F-MGA6JVaD6ThxAL7vW2N%2Fcage_extension.gif?alt=media\&token=ac382468-e2b9-47f9-8718-a39a4d5a1198) ### Extensions recommended ### tslint extension This extension requires that the `tslint` and `typescript` modules are installed either locally or globally. This extension checks some code rules to write code. visual studio will show the errors thanks to this extensions. Each project has a file called `tslint.json` that contains all the rules to check. After install the extensions and get `tslint` and `typescript` module (through `yarn` or `npm`), you just need open the folder with `VSCode` where the `tslint.json` is. read more:[visual studio tslint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint) ### sonarLint This extension is similar to `tslint`. It checks some rules against the code we write. The difference is that you can connect with our `SonarQube` server, that contains the rules definition.\ \ `Visual studio Code` has two scopes for settings. The *User Settings* and the *Workspace settings* that you can open with `Ctrl + ,`. The *User settings* are global and use for all the extensions and the program itself. The *Workspace settings* are only for you current folder. When you modify the *workspace settings* a folder is created called `.vscode` and it contains your custom settings for the current folder. #### Install the JRE 8 or 11 install the Java Runtime 8 or 11 in your PC
#### Install sonarlint in vscode please install this plugin for VS Code #### Reference the JRE for visual code * open the visual studio code settings ( ctrl + , ) * click on the **user** tab * in the search input write **sonarlint** * in the result section, find the Sonarlint > Ls: Java Home ![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2FGaGxYMECJy54qBGbKw6H%2Fimage.png?alt=media\&token=31876803-bb8e-4ec3-a599-53fea58b4eb4) * insert your JDK path in the input. #### Setup the SonarQube server in "user" settings * open the visual studio code settings ( ctrl + , ) * click on the **user** tab * in the search input write **sonarlint** * In the result section, find the Sonarlint > Connected Mode > connections: Sonarqube ![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2FWJ3t5ExgsMgIranLuemo%2Fimage.png?alt=media\&token=629f90b3-f470-4555-b63b-2f74228c25a3) * click on **Edit in settings.json** * "connectionId": "WebMapProduct", \ "serverUrl": "[http://product-sonarqube:9900",\\](https://docs.gapvelocity.ai/webmap/general/frontend/guides/component-maintenance/http:/product-sonarqube:9900",\\) "token": "1a7fd47f85d3edca124d141c85d0a47bd39b6418" ![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2F7tTnsMIpU8pWMvk2HHjE%2Fimage.png?alt=media\&token=22f06c41-87b0-49d9-b3a3-1ed7c0956570) * **Note**: for more information and updates of the sonarqube token, please see the Devops guide (**it's best to use the SonarQube Dev credentials, look at step 3 in the following link**) \ #### Find the project Key for the repository * Go to the Frontend dashboard * find your repository, and click on the quality gate button. * for example WFNetKendoComponents * when the SonarQube page is open, there will be an input with the project key ![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2FeNGTTMudPrk56KfjsMyt%2Fimage.png?alt=media\&token=37ba5d08-4285-4a0d-b7ab-18701bc68970) * save the key, you will need it later. #### Setup the SonarQube server in "workspace" settings * open the visual studio code settings ( ctrl + , ) * click on the **workspace** tab * in the search input write **sonarlint** * In the result section, find the Sonarlint > Connected Mode: Project ![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2FvIIeVlzsd8pRfjQxAbFG%2Fimage.png?alt=media\&token=2cd9e7ed-e418-4144-8c83-288693319e88) * click on **Edit in settings.json** * "connectionId": "WebMapProduct",\ "projectKey": "\" **( write here, the key you saved previously)** ![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2F49LIMBYhIQzpvbB95deI%2Fimage.png?alt=media\&token=5bbeaa9e-b7c5-4731-b7c0-f7dd03342b06) #### Update rules from server to vs Code in the VS Code open the command on the command palette, and search and run for ***SonarLint: Update all project bindings to SonarQube/SonarCloud*** #### How to use If the configuration finished successfully, when you open a file that has some code smell, sonarlint will highlight it as an error. Also, you can check the tab of problems in the bottom section.​ ![](https://eastus1-mediap.svc.ms/transform/thumbnail?provider=spo\&inputFormat=png\&cs=MWZlYzhlNzgtYmNlNC00YWFmLWFiMWItNTQ1MWNjMzg3MjY0fFNQTw\&docid=https%3A%2F%2Fartinsoft%2Esharepoint%2Ecom%2F%5Fapi%2Fv2%2E0%2Fdrives%2Fb%21VqOlxrm6c0mFz17M9U9ZWb%5Foh4w5N3xAmOellfBQNsrllqpxaNL8T4BnqYRSKqsP%2Fitems%2F01HJIZCWGPXOMLRDAHBBAI6GF3DBMZT5KQ%3Ftempauth%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0%2EeyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvYXJ0aW5zb2Z0LnNoYXJlcG9pbnQuY29tQDY0ZGRlNzYyLTQwNjktNDdlOS04MGQ2LTRiZDlhNDZiNDZkMSIsImlzcyI6IjAwMDAwMDAzLTAwMDAtMGZmMS1jZTAwLTAwMDAwMDAwMDAwMCIsIm5iZiI6IjE2NDUxODU2MDAiLCJleHAiOiIxNjQ1MjA3MjAwIiwiZW5kcG9pbnR1cmwiOiJZTlV3K3doa1JyQVRIREpUbDFzb0ZTeTducGxzZVYxSFQvVHNuV0RaVU1NPSIsImVuZHBvaW50dXJsTGVuZ3RoIjoiMTU3IiwiaXNsb29wYmFjayI6IlRydWUiLCJ2ZXIiOiJoYXNoZWRwcm9vZnRva2VuIiwic2l0ZWlkIjoiWXpaaE5XRXpOVFl0WW1GaU9TMDBPVGN6TFRnMVkyWXROV1ZqWTJZMU5HWTFPVFU1IiwiYXBwX2Rpc3BsYXluYW1lIjoiTWljcm9zb2Z0IFRlYW1zIiwiZ2l2ZW5fbmFtZSI6IkJyYWlsYW4iLCJmYW1pbHlfbmFtZSI6Ik1vcmFnYSBNb3Jlbm8iLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwiYXBwaWQiOiIxZmVjOGU3OC1iY2U0LTRhYWYtYWIxYi01NDUxY2MzODcyNjQiLCJ0aWQiOiI2NGRkZTc2Mi00MDY5LTQ3ZTktODBkNi00YmQ5YTQ2YjQ2ZDEiLCJ1cG4iOiJibW9yYWdhQG1vYmlsaXplLm5ldCIsInB1aWQiOiIxMDAzMjAwMDUyNjJFRjgyIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzIwMDA1MjYyZWY4MkBsaXZlLmNvbSIsInNjcCI6Im15ZmlsZXMud3JpdGUgYWxsc2l0ZXMuZnVsbGNvbnRyb2wgYWxsc2l0ZXMubWFuYWdlIGFsbHByb2ZpbGVzLndyaXRlIiwidHQiOiIyIiwidXNlUGVyc2lzdGVudENvb2tpZSI6bnVsbCwiaXBhZGRyIjoiMjAxLjE5MS41MS41MCJ9%2EMHVrU1lpdE5PZ3pkRWYrQ1B1OTRQU1U1YVhTOXZyb0lBOEp5U09nbExVRT0%26version%3DPublished\&width=800\&height=800\&cb=63732850545) Read more: [visual studio sonarLint](https://www.sonarlint.org/vscode/)