Hur man ställer in JavaScript-linting i Visual Studio Code

Jag är uppenbarligen ett stort fan av att använda kodningsstandarder när du skriver kod på serversidan (oavsett om det är WordPress, PSR2 eller vad som helst annat – så länge du använder något tycker jag att det är bra).

Men när det kommer till att skriva kod på klientsidan, nämligen JavaScript för det här inlägget, ser vi det inte diskuterat så mycket även om jag tycker att det är lika viktigt. Detsamma gäller CSS, Sass eller LESS, men det är innehållet för ett annat inlägg.

För de senaste projekten har vi använt Airbnbs JavaScript Style Guide för våra projekt. Jag är ett fan och tycker att det hjälper att skriva ren, läsbar JavaScript (det ser ut som om det är skrivet av samma person – det slutliga målet med kodningsstandarder, eller hur?).

I det här inlägget kommer jag att gå igenom processen för att ställa in det i Visual Studio Code.

JavaScript-linting i Visual Studio Code

Det här inlägget förutsätter att du är bekant med att ställa in Node Package Manager på din lokala dator.

Om du inte är det, så har jag en guide för hur du gör det i det här inlägget. Genvägen? Det är bokstavligen så enkelt som detta (när Homebrew väl är installerat):

När du väl har konfigurerat det (antingen genom att använda nämnda inlägg eller om det redan är konfigurerat), är du redo att gå vidare med att faktiskt installera de nödvändiga verktygen för att konfigurera JavaScript-linting i Visual Studio Code.

1 Installera ESLint

Säg till exempel att du kör ett projekt från en katalog som heter acme i din projektkatalog i Dropbox. Om så är fallet, navigera till plugins-katalogen för nämnda projekt. Det kommer troligen att se ut ungefär så här:

$ cd ~/Dropbox/Projects/acme/wp-content/plugins/acme-plugin

Här måste du installera ESLint och Airbnbs konfigurationsfiler. Som tur är är det väldigt lätt att göra. Från terminalen anger du helt enkelt följande kommando:

$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import

Jag antar att inget av ovanstående paket redan är installerat. Om så är fallet, till exempel eslint, kan du ta bort just det argumentet från raden ovan.

Dessutom är det viktigt att förstå att eslint-plugin-import-projektet är viktigt för att lägga till stöd för import och export av JavaScript-moduler.

2 ESLint-konfigurationen

Det krävs ytterligare ett steg innan du får konfigurationsinställningarna i Visual Studio Code. Det handlar nämligen om att skapa en ESLint-konfigurationsfil. Från acme-plugin- katalogen som visas ovan anger du följande kommando:

$ touch .eslintrc.js

Detta kommer att skapa en tom fil (eller tom punktfil som vissa kan hänvisa till den) och det är här vår konfiguration refererar till Airbnbs stilguide.

Lägg bara till följande rader med konfigurationskod i filen:

module.exports = {
  "extends": "airbnb-base"
};

Nu när du har installerat ESLint, du har en referens till Airbnb Styleguide, och du har en referens till stöd för ytterligare syntax, är det dags att ställa in Visual Studio Code.

3 Konfigurera Visual Studio Code

Enligt mig är detta den enklaste delen. Öppna tilläggspanelen på det sätt som passar dig bäst (klicka på ikonen eller använd genvägen) och kör sedan en sökning efter ESLint. Du kan se flera resultat, men det du vill ha är det som ser ut så här:

Installera det och ladda sedan om Visual Studio-koden. Det bör ställas in i dina standardinställningar som du kan bekräfta genom att öppna inställningarna och leta efter denna kodbit:

// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,

Om det inte finns kan du lägga till det i användarinställningarna (jag är inte ett fan av att smutskasta med standardinställningarna ifall du någonsin skulle behöva återställa från en ren grund).

När detta har definierats är du bra att gå och du bör ha din JavaScript-lint när du arbetar med ditt projekt.

Andra pakethanterare?

Ovan har jag gett ett exempel på hur man gör detta via Node; men det är också möjligt att uppnå med Yarn. Detta är något som jag planerar att skriva om i framtiden, men eftersom jag har täckt Node i ett tidigare inlägg verkade det logiskt och enklast att följa upp det inlägget med det här innehållet som referens.

När det är dags för mig att gå igenom med en annan pakethanterare, Garn specifikt, kommer jag att täcka det också.