Visual Studio Code

Up a level : Programmering 1 - JavaScript
Next page : Prettier - Code formatter

Lite om de verktyg vi behöver

Teoretisk så kan vi skriva vår kod direkt i till exempel Anteckningar, spara våra filer med lämpliga filändelser, till exempel ”.js” för JavaScriptfiler och ”.html” för websidor. Problemet är dock att vi då kommer upptäcka många av felen i vår kod först då vi försöker öppna vår websida som i sin tur försöker köra vårt JavaScript-program.  Det vore bra om vi hade ett program liknande det vi använde för att programmera The ELIAC I, där många typer av fel indikeras direkt då vi matar in en rad. Lyckligen nog finns det sådana verktyg. Ett sådant verktyg kallas för en ”Integrerad utvecklingsmiljö”, eller ”Integrated Development Environment” eller allra vanligast för en IDE. (”I de e”, inte idé). Det finns ett antal sådana att tillgå. Några av dessa är dedikerade till ett visst programmeringsspråk såsom

Turbo Pascal, Delphi, Lazarus, APL, Matlab, Nspire och Mathematica.

Andra är mer allmänna, och kan anpassas till ett flertal olika programmeringsspråk. Vi har till exempel

Eclipse, Microsoft Visual Studio, Emacs, Atom och Visual Studio Code.

När jag började planera denna kurs provade jag ett antal enkla IDE:n, men i slutet hade jag kommit fram till att ett av de två sistnämnda skulle passa oss bra. Detta för att jag ville att programmet skulle vara någorlunda litet och kräva så lite datorresurser som möjligt. Dessutom hamnar dessa bägge två oftast i nära toppen då man söker på ”best free IDE for JavaScript”.

Jag valde efter lite försök slutligen Visual Studio Code (VSC), och det är det programmet vi i huvudsak skall använda i denna kurs. Kan nämna att VSC är skriven i JavaScript.

Vi behöver göra några inställningar och installationer för att få VSC att fungera som vi vill.

Inställningar och installationer

  1. Skapa en mapp under ”OneDrive- Uppsala kommun” eller ”Mina dokument”, till exempel en mapp med namnet ”JavaScript”, ”JS”, ”Mina Program” eller liknande.
  2. Vi skall nu hämta och installera Visual Studio Code.
    1. Gå till https://code.visualstudio.com/ och välj ”Download for Windows”.
    2. När installationsfilen är nerladdad, så kör den.
    3. Klicka i att acceptera avtalet, och så vidare.
    4. När du kommer till ”Selected Additional Tasks” rekommenderar jag dig att klicka i alla rutor (Har du redan en IDE för andra programmeringsspråk så skall du kanske inte låta programmet ta hand om alla supportade filtyper.)
    5. Installera programmet.
    6. Öppna programmet.
  3. Nu skall vi installera några tillägg.
    1. Gå till ”File, Preferences, Extensions” eller klicka på ikonen som ser ut som en kvadrat där ett hörn har lossnat.
    2. I sökrutan under ”Extension Marketplace” skriv ”Code Runner” och klicka sedan på ”Install” vid tillägget skrivet av Jun Han (det torde vara det första valet). Detta gör att programmet kan program skrivet i diverse olika språk.
    3. När det är installerat skriver du ”Live Server” i sökrutan. Installera filen skriven av Ritwick Day.Detta tillägg gör så att din dator kan fungera både som server och klient. Den skapar en virtuell server på datorn som webbläsaren sedan kommunicerar med, istället för att koppla upp sig mot en extern server.
    4. Vidare kan du installera ”HTML CSS Support” av ecmel,
    5. ”JavaScript (ES6) code snippet” av Charalampos Karypidis,
    6. och ”Auto Close Tag” av Jun Han.

Vi kanske behöver installera några tillägg till, men mer om det senare.

NotePad++

Jag föreslår att ni även installerat NotePad++. Detta är som Anteckningar, men på steroider. Det kan vara mycket användbart när man som hastigast vill titta på en bit kod, men inte vill starta upp Visual Studio Code. Du hittar NotePad++ här: https://notepad-plus-plus.org/downloads/

Gå till senaste versionen och ladda ner och installera 64-bit varianten (om det är en 64-bit dator du har).

Up a level : Programmering 1 - JavaScript
Next page : Prettier - Code formatterLast modified: Jan 4, 2022 @ 19:52