The first thing that you need to work with our FrontEnd area, is to install
nodejs. You can download from https://nodejs.org/.
nodejs to run.
For our purpose, you require at least version
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.
All our repositories are host in
Team Foundation Server. If you want to get some repository, you will have to do it through
You can install git from their website https://git-scm.com/downloads.
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 works on Windows and MAC. You can download it from the website https://www.sourcetreeapp.com/.
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 is a windows shell interface to git, and you can download from their website https://www.sourcetreeapp.com/.
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.
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 https://code.visualstudio.com/
You can install
extensions from the
visual studio code application.
VSCode and press
Ctrl + Shift + X.
search the extensions.
Click on Install button.
Some extensions require more setup. Consult the extension documentation for next steps.
This extension requires that the
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
typescript module (through
npm), you just need open the folder with
VSCode where the
read more:visual studio tslint
This extensions is similar to
tslint. Check some rules against the code the we write. The difference is that you can connect with our
SonarQube server, that contains the rules definition.
After install the extension, you need to setup visual studio.
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 will contains your custom settings for the current folder.
For the sonarLint, we must setup the two settings. In the User settings we need to add the path for the
JAVA/jre ( you need to install java runtime environment if you do not have it yet) and the
token like you can see in the next image:
In the workspace settings you need to configure depending on which repository you are working on. For example, if you are working on
WebMAPComponents you should configure your
Each project could has the same setup, you just need to change the corresponding
projectKey to use the correct rules.
read more: visual studio sonarLint