Hur man validerar kod direkt i Atom med linter (Win10)

  • Författare
  • Meddelande
Användarvisningsbild

Allinrep

dbwebb

  • Inlägg: 1124
  • Blev medlem: 03 sep 2012, 09:19
  • Ort: Portugal (tillfälligt)

Hur man validerar kod direkt i Atom med linter (Win10)

Inlägg15 sep 2016, 10:58

Det här är endast ett utkast.
Version: 0.9.6


Istället för att behöva växla mellan texteditorn och terminalen för att se om koden validerar kan vi få texteditorn att validera koden i realtid. För att lyckas med detta behöver vi installera en mängd olika paket.

Målet med guiden är att Atom och verktyget dbwebb validate ska vara överens om valideringen så att det inte blir några överraskningar när koden publiceras till studentservern.

Guiden går igenom följande Atom-paket:
  • linter
  • linter-htmlhint
  • linter-csslint
  • linter-pylint (kräver python3 och pip)
  • linter-php (kräver xampp)
  • linter-phpcs (kräver xampp)
  • linter-phpmd? (funkar inte för mig än)

För att lyckas få igång paketen installerar jag även:
  • python3 for Windows
  • pip (inkluderas i python3 for windows)
  • XAMPP

Miljön jag använde för den här guiden:
  • Windows 10 (Engelska)
  • Atom 1.10

Då börjar vi.

OBS: Jag har bara gjort det här en enda gång så det kan hända att det finns bättre sätt att göra det på. Lämna gärna feedback om du har gjort något annorlunda/bättre så kan jag uppdatera guiden.



1. Pakethantering i Atom

Det finns två olika sätt att installera paket i Atom; genom det grafiska gränssnittet och genom terminalen. Den här guiden använder det grafiska gränssnittet.

Öppna Settings (kortkommando Ctrl+,)

Gå till Install i vänstermenyn.

Sök efter linter och vänta en stund. Atom laddar in resultaten allteftersom så om det dyker upp felaktiga resultat så har den kanske inte sökt färdigt än.

Tips: Om du vill söka efter något nytt (t.ex. nästa paket i guiden) och det verkar som att inget händer, byt då till Themes och sedan tillbaka till Packages för att tvinga fram den nya sökningen. Förhoppningsvis är det en bugg som fixas i en kommande version.
atom-install-packages.png
atom-install-packages.png (15.24 KiB) Visad 1973 gånger


När paketet linter dyker upp kan du klicka direkt på Install. Om du vill veta mer om paketet eller se vilka inställningar som finns kan du istället klicka på rutan som omsluter paketets information, men för just det här paketet är det ingenting du behöver göra. Det behövs däremot i de mer avancerade paketen som vi kommer till senare.
atom-install-packages-2.png
atom-install-packages-2.png (12.03 KiB) Visad 1973 gånger




2. Validera HTML och CSS

Sök efter paketen linter-htmlhint och linter-csslint och installera båda två. Inga inställningar krävs, och valideringen bör fungera direkt.

Det kan vara bra att veta att linter-htmlhint bara validerar rena HTML-filer, så php-filerna vi använder i kursen htmlphp valideras inte den vägen.

För att testa linter-htmlhint:
Öppna en .html-fil och skriv såhär (det går bra utan att spara):
Kod: Markera allt
<html lang='sv'>

Du borde få:
error: The value of attribute [ lang ] must be in double quotes.


För att testa linter-csslint:
Öppna en .css-fil och skriv såhär (det går bra utan att spara):
Kod: Markera allt
html {float:0}

Du borde få:
Warning: Expected (left | right | none | inherit) but found '0'.




3. Validera python

Jag lyckades inte få Atom att använda det jag redan hade installerat i Cygwin, så för att validera python-kod installerade jag python från den officiella hemsidan (version 3.5.2). Jag accepterade alla defaultinställningar för enkelhetens skull, men du får gärna prova att låta bli allt "skräp" som följde med. För att kunna installera pylint senare behövs verktyget pip som följer med python-installationen.

När du har installerat python måste du uppdatera miljövariablerna (Environment Variables) med var python-programmet hamnade. Sök i startmenyn efter environment, eller gå till Control Panel > System Properties > Advanced > Environment Variables....
win-env-path-1.png
win-env-path-1.png (17.69 KiB) Visad 1974 gånger


Om det redan finns en Path väljer du Edit.... I det nya fönstret som kommer upp trycker du på New och lägg till mappen där python finns installerat. För mig blev det C:\Users\Allinrep\AppData\Local\Programs\Python\Python35-32
win-env-path-2.png
win-env-path-2.png (26.31 KiB) Visad 1974 gånger


Sedan är det dags att installera pylint. Du borde redan ha en version av pip men det kan vara bra att uppdatera den till senaste versionen. Öppna kommandoprompten (sök i startmenyn efter cmd). Kör följande kommandon:
Kod: Markera allt
> python -m pip install --upgrade pip
> python -m pip install pylint


Starta om Atom efter att du har uppdaterat miljövariablerna och installerat pylint.

Installera paketet linter-pylint i Atom och ändra inställningarna. Det du behöver ta reda på är var pylint.exe hamnade och var kursrepots .pylintrc finns. Dina sökvägar borde inte vara likadana som mina.

Executable: C:\Users\Allinrep\AppData\Local\Programs\Python\Python35-32\Scripts\pylint.exe
Rc File: E:\python\.pylintrc

Tips: dbwebb validate kanske använder en gammal version av pylint (i skrivandets stund är det 1.4.4) och därför kan du kanske få andra valideringsfel med en nyinstallerad version av pylint än vad du får genom dbwebb validate. Du kan välja att antingen ändra din kod för att passa den senaste versionen av pylint, eller ändra inställningarna för att ignorera de fel som dbwebb validate ändå inte noterar.

För att testa linter-pylint:
Öppna en .py-fil och skriv såhär:
Kod: Markera allt
t=a{]

Du borde få:
error: syntax-error invalid syntax




4. Validera PHP

Jag lyckades få Atom att använda sig av samma php-installation som jag redan har i XAMPP.

Börja med att ta reda på var din php.exe ligger och lägg till den i Path. Hur man gör det skrev jag i avsnittet om python ovan. Jag la till C:\xampp\php i Path och startade om hela Windows.

Du kan nu installera Atom-paketet linter-php. Inga inställningar behövs.

För att testa linter-php:
Öppna en .php-fil och skriv såhär:
Kod: Markera allt
$;

Du borde få:
Error: syntax error, unexpected ';', expecting variable (T_VARIABLE) or '$'


Nästa steg är att installera CodeSniffer. Öppna kommandoprompten (cmd) och kör följande kommando:
Kod: Markera allt
pear install PHP_CodeSniffer

Installera sedan Atom-paketet linter-phpcs och ändra inställningarna:

Executable Path: C:\xampp\php\phpcs.
Code Standard Or Config File: E:\htmlphp\.phpcs.xml

För att testa linter-phpcs:
Öppna en .php-fil och skriv såhär:
Kod: Markera allt
int (5.3);

Du borde få:
ERROR: Space before opening parenthesis of function call prohibited




Jag försökte även installera linter-phpmd men fick det inte att fungera. Ska testa lite till och återkommer med mer info...
Användarvisningsbild

Allinrep

dbwebb

  • Inlägg: 1124
  • Blev medlem: 03 sep 2012, 09:19
  • Ort: Portugal (tillfälligt)

Re: Hur man validerar kod direkt i Atom med linter (Win10)

Vilka är online

Användare som besöker denna kategori: Inga registrerade användare och 5 gäster