Mijn setup

In dit onderdeel ga ik je uitlegeen hoe ik een fijne codeer omgeving heb omgezet voor mezelf. Als je namelijk werkt aan een applicatie of een software, doe je dit waarschijnlijk in een text editor. Een text editor biedt vaak vele functies die het schrijven van code makkelijker maakt. Sommige text editors kunnen ook extenstions downloaden in het programma, deze bieden vaak een extra functionaliteit aan in de text editor zelf.

Visual Studio Code

Ik heb gekozen om Visual Studio Code ookwel VSC te gebruiken als text-editor. We kregen in week 1 een korte introdcutie over verschillende soorten text editors, hierin werd wel al snel duidelijk dat VSC de voorloper is van de huidige text editors op de markt. Ik wou wel even research doen naar hoe VSC onder de top 10 text editor lijsten op het internet. Ik heb de volgende links bekeken:

• In deze link zie je dat VSC 1# van de 17 staat
• In deze link zie je dat VSC 1# van de 5 staat
• In deze link zie je dat VSC 6# van de 15 staat
• In deze link zie je dat VSC 11# van de 15 staat
• In deze link zie je dat VSC 1# van de 16 staat

In het algemeen zijn er dus ook veel andere mensen die het eens zijn dat VSC 1 van de beste text editors op de markt is.

Extentensies

Je hebt de mogelijkheid om voor jezelf de best mogelijke schrijf omgeving te geven door extensies te gebruiken. In Visual Studio Code kan je heel gemakkelijk een extensies downloaden en installeren. Er zijn veel verschillende extensies denk bijvoorbeeld aan:

• Functions
• fonts
• Formatters
• Linters
• Color theme's

Ik heb de volgende extensies gebruikt tijdens het schrijven van mijn applicatie.

1. Atom One Dark Theme

Dit is een extensie die het kleur thema van je gehele visual studio code editor veranderd in een ander kleur thema

2. Prettier - Code formatter

Dit is een extensie die je code netjes en geordend houdt

3. ESLint - Code linter

Dit is een extensie die fouten in je code kan herkennen en deze aangeeft

4. Live Share

Dit is een extensie die ervoor zorgt dat je aanpassingen in jouw code direct kan zien op het web.

CLI - Command Line Interface

De CLI ook wel de terminal genoemd is een belangrijke tool tijdens dit project. Je kan namelijk de terminal gebruiken om bepaalde commando's uit te voeren voor jouw applicatie, deze hebben voornamelijk inpact op de back-end code van de applicatie. De terminal is een plek waarin je informatie terug krijgt in een vorm waarbij er niet is gedacht aan vormgeving, waardoor het moeilijk kan zien om bepaalde informatie effectief te kunnen aflezen. De terminal ziet er zo uit zonder styling:

Zo ziet mijn terminal er uit nadat ik in de preferences van de terminal de kleuren heb veranderd. Hierdoor krijg ik meer visuele hierachie, waardoor ik makkelijk informatie kan aflezen van de terminal.

Commando's voor de CLI

Tijdens dit project zijn er een paar belangrijke commando's die je super vaak gebruikt. Hieronder geef ik jou een toelichten over veel voorkomende commando's om goed door jouw terminal te kunnen navigeren.

De belangrijkste commando's van GIT

git add . // om alle bestanden in de huidige directory aan te spreken
git commit -m "message" // om een commit te doen en deze een bepaalde boodschap meegeven
git push // om het naar jouw Github respository te sturen

De belangrijkste commando's van NPM

npm install // om elke npm pakket te kunnen installeren
npm start // Hiermee kan je jouw script opstarten om bijvoorbeeld de server aan te zetten

De belangrijkste commando's van om te navigeren in de terminal

ls // Geeft een lijst van files in je huidige directory
cd // Hierdoor ga je het geselecteerde mapje in
cd .. // Hierdoor ga je het geselecteerde mapje uit
touch // Je kan hiermee een nieuw bestand aanmaken
mkdir // Hiermee maak je een nieuwe map aan
rm // Hiermee kan je iets verwijderen