HTML, CSS & JavaScript

Mörkt tema

đŸ€ż Skriva bĂ€ttre kod (30 min) ​

Avancerad fördjupning

Denna modul Àr en s.k. "avancerad fördjupning". Den förutsÀtter att du har Node.js installerat pÄ din dator.

💡 Introduktion till Ă€mnet (flipped classroom) ​

⏰ TidsĂ„tgĂ„ng: c.a. 30 min

🚹 Du som har Windows

PowerShell stökar till det pÄ Windows, anvÀnd istÀllet Terminalen i VS Code. Gör sÄhÀr:

  • Öppna VS Code
  • Tryck Ctrl + Shift + P och sök efter "Terminal", vĂ€lj alternativet "Default Shell" eller "Select Default Profile".
  • VĂ€lj "Command Prompt" i listan som "standard-terminal" (ej PowerShell, null eller nĂ„gonting annat) och tryck enter.

Nu kommer dina script att köras i terminalen/command prompt och inte i PowerShell (som krÀver utökade rÀttigheter).

Tack till Egil för ovan instruktioner och Lenita för skÀrmdump.

Alternativ till terminalen i Windows i VSC

ESLint (20 min) ​

⚠ I videon ovan vĂ€ljer jag "Check syntax and enforce code style", men det alternativet Ă€r borttaget nu i ESLint. Även de genererade filerna kommer att skilja sig lite Ă„t. VĂ€lj Check syntax and fix problems.

Prettier (10 min) ​

💬 Kodexempel ​

Det Àr god praxis att spara projektets konfiguration (Prettier och ESLint) i externa filer eller i package.json sÄ att oavsett vem som arbetar i projektet och oavsett i vilken editor, sÄ kan samma konfiguration anvÀndas av alla.

DÄ gÄr det ocksÄ att lÀtt ÄteranvÀnda konfigurationen i andra och nya projekt, över hela organisationen oavsett vilket utvecklar-team man just dÄ jobbar i.

Steg-för-steg generellt för projekt Àr alltsÄ:

Med npm:

shell
npm init
npm install --save-dev eslint

PÄ rad 1 startar vi ett nytt projekt. Denna stÀller ett antal frÄgor, se 05:22 i ESLint-videon ovan. I samband med detta skapas en fil som heter package.json.

PÄ rad 2 lÀgger till vill en s.k. "dependency" i vÄrt projekt. --save-dev anger att det Àr en "developer dependency"; nÄgot vi behöver medan vi utvecklar, men ingenting vi behöver i vÄr live-produktion sen.

Som man kanske kan lista ut av ordet "dependency", sÄ vill vi ofta ha sÄ fÄ dependencies som möjligt pÄ vÄra projekt. Dvs. installera tillÀgg efter att noggrant ha övervÀgt om det verkligen behövs. Med varje dependency följer sÀkerhetsrisker, projektstorleken vÀxer och vi "bloat:ar koden" och projektet.

Med pnpm Àr setupen följande:

shell
pnpm init
pnpm add -D eslint

Samma procedur som ovan, med skillnaderna att:

  1. node_modules ÄteranvÀnds frÄn en central plats pÄ datorn = sparar utrymme pÄ datorn
  2. Syntaxen för att installera och spara skiljer sig Ät

📖 LĂ€sanvisningar ​

đŸ‹ïž Övningsuppgifter ​

Medel ​

Spara dina egna config files

Skapa ett eget repo pÄ din GitHub-profil, som du döper till exempelvis dotfiles eller configs.

NÀr du börjar bli nöjd med dina regler för Prettier och för ESLint, uppdatera filen i det repot. Du kan t.ex. göra det via online-verktyget pÄ GitHub.

HÀr Àr t.ex. mina.

SvĂ„r ​

Inspiration

Kika pÄ & jÀmför nÄgra olika eslint-configs frÄn "industrikÀndisar", t.ex.:

✅ AvstĂ€mning ​

AnvÀnd denna lista för att "checka av" att du förstÄr modulens koncept.

Terminologi
  • eslint
  • dotfiles
  • config files
  • prettier
Du Àr klar nÀr

  • Du har satt upp ESLint i ditt projekt
  • Du har satt upp Prettier i ditt projekt
  • Ni som jobbar i grupp har _en_ gemensam konfigurationsfil

📚 Resurser ​

VĂ„ga FrĂ„ga-lĂ„dan ​

Anonyma frÄgelÄdan

Klar? ​

Happy coding!