Skip to content
Kursen webtec

Installera lintern ESlint

En linter som ESlint kan dels hjälpa dig att formattera koden efter ett regelverk som du själv väljer, lintern kan också utföra statisk kodanalys för att hitta problem i din kod, problem som du bör lösa för att förbättra din kod. Denna typen av verktyg, linters och liknande, är bra utvecklingsverktyg som både kan spara din tid, göra din kod mer konsistent och i slutändan höjer du kvaliteten på ditt arbete. Läs mer om ESLint på dess webbplats.

Installera eslint

Du installera eslint med hjälp av npm. Källkoden för eslint är publicerad på npm package repository tillsammans med alla andra kodmoduler och verktyg som tillsammans bildar en infrastruktur för javascript-projekt. Du kan se projektet för eslint på npm’s webbplats.

Kör följande kommando.

Installera verktyget eslint med npm.
npm init @eslint/config@latest

Du kommer att få svara på ett antal frågor som gör att eslint kan skapa en konfiguration åt dig. Här är svaren på frågorna. Vid flervalsfrågor markerar du alternativen med tangenten space.

  • ✔ What do you want to lint? · javascript, json, css
  • ✔ How would you like to use ESLint? · problems
  • ✔ What type of modules does your project use? · esm
  • ✔ Which framework does your project use? · none
  • ✔ Does your project use TypeScript? · no
  • ✔ Where does your code run? · browser, node
  • ✔ Would you like to install dependencies? · Yes
  • ✔ Which package manager do you want to use? · npm

Det kan se ut så här när du är klar med installationen.

Image description
Bild: Nu är eslint installerad och konfigurerad.

Om något blir fel så kör du kommandot igen tills det blir rätt.

git status

Om du nu kör kommandot git status så ser du vilka filer som uppdaterats och skapats. Det kan se ut så här.

Image description
Bild: Inspektera vilka filer som uppdaterats och skapats.

Du har filer som du behöver lägga till repot och därefter så gör du en commit och en push. Gör det och dubbelkolla att ditt repo på GitHub uppdateras i enligthet med dina lokala ändringar.

Titta gärna i de filer som uppdaterats och försök förstå vad det är som händer. De filer som berördes nu var följande.

  1. Filen package.json uppdaterades med den versionen och de beroenden som installerades för eslint.
  2. eslint.config.mjs med konfigurationen för eslint.
  3. Filen package-lock.json innehåller exakta versioner av de kodmoduler som installerats.
  4. Katalogen node_modules/ innehåller de kodmoduler som installerats och där placeras verktyget eslint och alla dess beroenden.

Här är lösningen till hur jag lägger till filerna i mitt repo.

Kommandon för att lägga till i git repot.
Lägg till fil i git repot.
# Add all files that are not part of the repo
git add .


# Commit the changes
git commit -a -m "Installed eslint with default configuration"


# Push the changes to the remote
git push

Glöm inte att göra git status och kanske även git lg för att se status på ditt repo.

Uppdatera eslint config fil

I kursen har vi valt att göra vissa anpassningar till konfigurationsfilen för eslint. Du kan hämta hem en kopia av den uppdaterade konfigurationsfilen med följande kommando.

Hämta kursens version av konfigurationsfilen eslint.config.js.
curl -L -o eslint.config.js https://raw.githubusercontent.com/bth-webtec/webtec-abcd25/refs/heads/main/eslint.config.js

Gör commit och push för den uppdaterade konfigurationsfilen.

Kör eslint

När du är klar kan du köra eslint på följande vis.

Kör eslint.
npx eslint

Förhoppningsvis får du inget felmeddelande så här långt.