{"id":229848,"date":"2022-11-26T15:08:00","date_gmt":"2022-11-26T12:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229848"},"modified":"2022-11-26T15:08:39","modified_gmt":"2022-11-26T12:08:39","slug":"hur-man-staeller-in-javascript-linting-i-visual-studio-code","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-staeller-in-javascript-linting-i-visual-studio-code\/","title":{"rendered":"Hur man st\u00e4ller in JavaScript-linting i Visual Studio Code"},"content":{"rendered":"\n

Jag \u00e4r uppenbarligen ett stort fan av att anv\u00e4nda kodningsstandarder n\u00e4r du skriver kod p\u00e5 serversidan (oavsett om det \u00e4r WordPress, PSR2 eller vad som helst annat \u2013 s\u00e5 l\u00e4nge du anv\u00e4nder n\u00e5got tycker jag att det \u00e4r bra).<\/p>\n

Men n\u00e4r det kommer till att skriva kod p\u00e5 klientsidan, n\u00e4mligen JavaScript f\u00f6r det h\u00e4r inl\u00e4gget, ser vi det inte diskuterat s\u00e5 mycket \u00e4ven om jag tycker att det \u00e4r lika viktigt. Detsamma g\u00e4ller CSS, Sass<\/a><\/strong> eller LESS<\/a><\/strong>, men det \u00e4r inneh\u00e5llet f\u00f6r ett annat inl\u00e4gg.<\/p>\n

F\u00f6r de senaste projekten har vi anv\u00e4nt Airbnbs JavaScript Style Guide f\u00f6r v\u00e5ra projekt. Jag \u00e4r ett fan och tycker att det hj\u00e4lper att skriva ren, l\u00e4sbar JavaScript (det ser ut som om det \u00e4r skrivet av samma person \u2013 det slutliga m\u00e5let med kodningsstandarder, eller hur?).<\/p>\n

\"Hur<\/a><\/p>\n

I det h\u00e4r inl\u00e4gget kommer jag att g\u00e5 igenom processen f\u00f6r att st\u00e4lla in det i Visual Studio Code.<\/a><\/strong><\/p>\n

JavaScript-linting i Visual Studio Code<\/h2>\n

Det h\u00e4r inl\u00e4gget f\u00f6ruts\u00e4tter att du \u00e4r bekant med att st\u00e4lla in Node Package Manager<\/a><\/strong> p\u00e5 din lokala dator.<\/p>\n

\"Hur<\/a><\/p>\n

Om du inte \u00e4r det, s\u00e5 har jag en guide f\u00f6r hur du g\u00f6r det i det h\u00e4r inl\u00e4gget<\/a><\/strong>. Genv\u00e4gen? Det \u00e4r bokstavligen s\u00e5 enkelt som detta<\/a><\/strong> (n\u00e4r Homebrew v\u00e4l \u00e4r installerat):<\/p>\n

N\u00e4r du v\u00e4l har konfigurerat det (antingen genom att anv\u00e4nda n\u00e4mnda inl\u00e4gg eller om det redan \u00e4r konfigurerat), \u00e4r du redo att g\u00e5 vidare med att faktiskt installera de n\u00f6dv\u00e4ndiga verktygen f\u00f6r att konfigurera JavaScript-linting i Visual Studio Code.<\/p>\n

1 Installera ESLint<\/h3>\n

S\u00e4g till exempel att du k\u00f6r ett projekt fr\u00e5n en katalog som heter acme i din projektkatalog i Dropbox. Om s\u00e5 \u00e4r fallet, navigera till plugins-katalogen f\u00f6r n\u00e4mnda projekt. Det kommer troligen att se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n

$ cd ~\/Dropbox\/Projects\/acme\/wp-content\/plugins\/acme-plugin<\/code><\/pre>\n
H\u00e4r m\u00e5ste du installera ESLint och Airbnbs konfigurationsfiler. Som tur \u00e4r \u00e4r det v\u00e4ldigt l\u00e4tt att g\u00f6ra. Fr\u00e5n terminalen anger du helt enkelt f\u00f6ljande kommando:<\/p>\n
$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import<\/code><\/pre>\n
Jag antar att inget av ovanst\u00e5ende paket redan \u00e4r installerat. Om s\u00e5 \u00e4r fallet, till exempel eslint, kan du ta bort just det argumentet fr\u00e5n raden ovan.<\/p>\n
Dessutom \u00e4r det viktigt att f\u00f6rst\u00e5 att eslint-plugin-import-projektet \u00e4r viktigt f\u00f6r att l\u00e4gga till st\u00f6d f\u00f6r import och export av JavaScript-moduler.<\/p>\n
2 ESLint-konfigurationen<\/h3>\n
Det kr\u00e4vs ytterligare ett steg innan du f\u00e5r konfigurationsinst\u00e4llningarna i Visual Studio Code. Det handlar n\u00e4mligen om att skapa en ESLint-konfigurationsfil. Fr\u00e5n acme-plugin-<\/strong> katalogen som visas ovan anger du f\u00f6ljande kommando:<\/p>\n
$ touch .eslintrc.js<\/code><\/pre>\n
Detta kommer att skapa en tom fil (eller tom punktfil som vissa kan h\u00e4nvisa till den) och det \u00e4r h\u00e4r v\u00e5r konfiguration refererar till Airbnbs stilguide.<\/p>\n
L\u00e4gg bara till f\u00f6ljande rader med konfigurationskod i filen:<\/p>\n
module.exports = {\n\u00a0 \"extends\": \"airbnb-base\"\n};<\/code><\/pre>\n
Nu n\u00e4r du har installerat ESLint, du har en referens till Airbnb Styleguide, och du har en referens till st\u00f6d f\u00f6r ytterligare syntax, \u00e4r det dags att st\u00e4lla in Visual Studio Code.<\/p>\n
3 Konfigurera Visual Studio Code<\/h3>\n
Enligt mig \u00e4r detta den enklaste delen. \u00d6ppna till\u00e4ggspanelen p\u00e5 det s\u00e4tt som passar dig b\u00e4st (klicka p\u00e5 ikonen eller anv\u00e4nd genv\u00e4gen) och k\u00f6r sedan en s\u00f6kning efter ESLint. Du kan se flera resultat, men det du vill ha \u00e4r det som ser ut s\u00e5 h\u00e4r:<\/p>\n
\"Hur<\/a><\/p>\n
Installera det och ladda sedan om Visual Studio-koden. Det b\u00f6r st\u00e4llas in i dina standardinst\u00e4llningar som du kan bekr\u00e4fta genom att \u00f6ppna inst\u00e4llningarna och leta efter denna kodbit:<\/p>\n
\/\/ Controls whether eslint is enabled for JavaScript files or not.\n\"eslint.enable\": true,<\/code><\/pre>\n
Om det inte finns kan du l\u00e4gga till det i anv\u00e4ndarinst\u00e4llningarna (jag \u00e4r inte ett fan av att smutskasta med standardinst\u00e4llningarna ifall du n\u00e5gonsin skulle beh\u00f6va \u00e5terst\u00e4lla fr\u00e5n en ren grund).<\/p>\n
N\u00e4r detta har definierats \u00e4r du bra att g\u00e5 och du b\u00f6r ha din JavaScript-lint n\u00e4r du arbetar med ditt projekt.<\/p>\n
Andra pakethanterare?<\/h2>\n
Ovan har jag gett ett exempel p\u00e5 hur man g\u00f6r detta via Node; men det \u00e4r ocks\u00e5 m\u00f6jligt att uppn\u00e5 med Yarn. Detta \u00e4r n\u00e5got som jag planerar att skriva om i framtiden, men eftersom jag har t\u00e4ckt Node i ett tidigare inl\u00e4gg verkade det logiskt och enklast att f\u00f6lja upp det inl\u00e4gget med det h\u00e4r inneh\u00e5llet som referens.<\/p>\n
\"Hur<\/a><\/p>\n
N\u00e4r det \u00e4r dags f\u00f6r mig att g\u00e5 igenom med en annan pakethanterare, Garn specifikt, kommer jag att t\u00e4cka det ocks\u00e5.<\/p>\n
Inspelningsk\u00e4lla:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
En genomg\u00e5ng av hur du st\u00e4ller in JavaScript-linting i Visual Studio Code med NPM och den n\u00f6dv\u00e4ndiga kodtill\u00e4gget.<\/p>\n","protected":false},"author":1,"featured_media":164308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[848,734,901],"tags":[1173],"class_list":["post-229848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-javascript-9","category-koda","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=229848"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229848\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/164308"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=229848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=229848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=229848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}