{"id":229713,"date":"2022-11-26T15:29:00","date_gmt":"2022-11-26T12:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229713"},"modified":"2022-11-26T15:33:20","modified_gmt":"2022-11-26T12:33:20","slug":"jak-skonfigurowac-linting-javascript-w-visual-studio-code","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-skonfigurowac-linting-javascript-w-visual-studio-code\/","title":{"rendered":"Jak skonfigurowa\u0107 linting JavaScript w Visual Studio Code"},"content":{"rendered":"\n

Jestem oczywi\u015bcie wielkim fanem u\u017cywania standard\u00f3w kodowania za ka\u017cdym razem, gdy piszesz kod po stronie serwera (niezale\u017cnie od tego, czy jest to WordPress, PSR2 czy cokolwiek innego \u2013 je\u015bli czego\u015b u\u017cywasz, my\u015bl\u0119, \u017ce to dobra rzecz).<\/p>\n

Ale je\u015bli chodzi o pisanie kodu po stronie klienta, a konkretnie JavaScript do tego postu, nie widzimy tego tak cz\u0119sto, chocia\u017c uwa\u017cam, \u017ce jest on r\u00f3wnie wa\u017cny. To samo dotyczy CSS, Sass<\/a><\/strong> czy LESS<\/a><\/strong>, ale to ju\u017c tre\u015b\u0107 na inny post.<\/p>\n

W przypadku ostatnich projekt\u00f3w korzystali\u015bmy z przewodnika Airbnb JavaScript Style dla naszych projekt\u00f3w. Jestem fanem i uwa\u017cam, \u017ce pisanie czystego, czytelnego JavaScriptu pomaga (wygl\u0105da na to, \u017ce napisa\u0142a go ta sama osoba \u2013 ostateczny cel standard\u00f3w kodowania, prawda?).<\/p>\n

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

W tym po\u015bcie om\u00f3wi\u0119 proces uzyskiwania konfiguracji w Visual Studio Code.<\/a><\/strong><\/p>\n

Linting JavaScript w Visual Studio Code<\/h2>\n

W tym po\u015bcie za\u0142o\u017cono, \u017ce znasz si\u0119 na konfigurowaniu Mened\u017cera pakiet\u00f3w w\u0119z\u0142\u00f3w<\/a><\/strong> na komputerze lokalnym.<\/p>\n

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

Je\u015bli nie, to mam przewodnik, jak to zrobi\u0107 w tym po\u015bcie<\/a><\/strong>. Skr\u00f3t? To<\/a><\/strong> dos\u0142ownie tak proste (po zainstalowaniu Homebrew):<\/p>\n

Po skonfigurowaniu (za pomoc\u0105 wspomnianego wpisu lub je\u015bli jest ju\u017c skonfigurowany), b\u0119dziesz gotowy do kontynuowania faktycznego instalowania niezb\u0119dnych narz\u0119dzi do konfigurowania lintingu JavaScript w Visual Studio Code.<\/p>\n

1 Instalacja ESLint<\/h3>\n

Za\u0142\u00f3\u017cmy na przyk\u0142ad, \u017ce uruchamiasz projekt z katalogu o nazwie acme w katalogu Projekty w Dropbox. Je\u015bli tak jest, przejd\u017a do katalogu wtyczek dla tego projektu. Prawdopodobnie b\u0119dzie wygl\u0105da\u0107 mniej wi\u0119cej tak:<\/p>\n

$ cd ~\/Dropbox\/Projects\/acme\/wp-content\/plugins\/acme-plugin<\/code><\/pre>\n
W tym przypadku musisz zainstalowa\u0107 ESLint i pliki konfiguracyjne Airbnb. Na szcz\u0119\u015bcie jest to naprawd\u0119 \u0142atwe. Z terminala po prostu wpisz nast\u0119puj\u0105ce polecenie:<\/p>\n
$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import<\/code><\/pre>\n
Zak\u0142adam, \u017ce \u017caden z powy\u017cszych pakiet\u00f3w nie jest ju\u017c zainstalowany. Je\u015bli tak, na przyk\u0142ad eslint, mo\u017cesz usun\u0105\u0107 ten konkretny argument z powy\u017cszej linii.<\/p>\n
Ponadto wa\u017cne jest, aby zrozumie\u0107, \u017ce projekt eslint-plugin-import jest wa\u017cny dla dodania obs\u0142ugi importowania i eksportowania modu\u0142\u00f3w JavaScript.<\/p>\n
2 Konfiguracja ESLint<\/h3>\n
Przed uzyskaniem konfiguracji konfiguracji w Visual Studio Code potrzebny jest jeszcze jeden krok. Mianowicie jest to kwestia stworzenia pliku konfiguracyjnego ESLint. W katalogu acme-plugin<\/strong>, jak pokazano powy\u017cej, wprowad\u017a nast\u0119puj\u0105ce polecenie:<\/p>\n
$ touch .eslintrc.js<\/code><\/pre>\n
Spowoduje to utworzenie pustego pliku (lub pustego pliku z kropkami, jak niekt\u00f3rzy mog\u0105 go nazywa\u0107) i tutaj nasza konfiguracja b\u0119dzie odwo\u0142ywa\u0107 si\u0119 do przewodnika po stylu Airbnb.<\/p>\n
W pliku po prostu dodaj nast\u0119puj\u0105ce wiersze kodu konfiguracyjnego:<\/p>\n
module.exports = {\n\u00a0 \"extends\": \"airbnb-base\"\n};<\/code><\/pre>\n
Teraz, gdy masz ju\u017c zainstalowany ESLint, masz odniesienie do przewodnika po stylach Airbnb i masz odniesienie do obs\u0142ugi dodatkowej sk\u0142adni, czas skonfigurowa\u0107 Visual Studio Code.<\/p>\n
3 Konfigurowanie kodu programu Visual Studio<\/h3>\n
Moim zdaniem to naj\u0142atwiejsza cz\u0119\u015b\u0107. Otw\u00f3rz panel rozszerze\u0144 w dowolny spos\u00f3b, kt\u00f3ry najbardziej Ci odpowiada (klikaj\u0105c ikon\u0119 lub u\u017cywaj\u0105c skr\u00f3tu), a nast\u0119pnie uruchom wyszukiwanie ESLint. Mo\u017cesz zobaczy\u0107 kilka wynik\u00f3w, ale ten, kt\u00f3ry chcesz, to ten, kt\u00f3ry wygl\u0105da tak:<\/p>\n
\"Jak<\/a><\/p>\n
Zainstaluj go, a nast\u0119pnie ponownie za\u0142aduj kod programu Visual Studio. Powinien by\u0107 ustawiony w ustawieniach domy\u015blnych, kt\u00f3re mo\u017cesz potwierdzi\u0107, otwieraj\u0105c ustawienia i szukaj\u0105c tego fragmentu kodu:<\/p>\n
\/\/ Controls whether eslint is enabled for JavaScript files or not.\n\"eslint.enable\": true,<\/code><\/pre>\n
Je\u015bli go nie ma, mo\u017cesz doda\u0107 go do ustawie\u0144 u\u017cytkownika (nie jestem fanem muckowania z ustawieniami domy\u015blnymi na wypadek, gdyby\u015b kiedykolwiek musia\u0142 zresetowa\u0107 z czystego podk\u0142adu).<\/p>\n
Gdy to zostanie zdefiniowane, mo\u017cesz ju\u017c i\u015b\u0107 i powiniene\u015b mie\u0107 podpi\u0119ty JavaScript podczas pracy nad swoim projektem.<\/p>\n
Inni mened\u017cerowie pakiet\u00f3w?<\/h2>\n
Powy\u017cej poda\u0142em przyk\u0142ad, jak to zrobi\u0107 za po\u015brednictwem Node; jednak mo\u017cna to r\u00f3wnie\u017c osi\u0105gn\u0105\u0107 za pomoc\u0105 prz\u0119dzy. Jest to co\u015b, o czym planuj\u0119 napisa\u0107 w przysz\u0142o\u015bci, ale poniewa\u017c om\u00f3wi\u0142em Node w poprzednim po\u015bcie, wydawa\u0142o si\u0119 logiczne i naj\u0142atwiejsze, aby \u015bledzi\u0107 ten post z t\u0105 tre\u015bci\u0105 w celach informacyjnych.<\/p>\n
\"Jak<\/a><\/p>\n
Kiedy nadejdzie czas, abym przeszed\u0142 przez innego mened\u017cera pakiet\u00f3w, konkretnie Yarn, om\u00f3wi\u0119 to r\u00f3wnie\u017c.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Przewodnik, jak skonfigurowa\u0107 linting JavaScript w Visual Studio Code z NPM i niezb\u0119dnym rozszerzeniem Code.<\/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":[732,897,845],"tags":[1169],"class_list":["post-229713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-7","category-kod","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=229713"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229713\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/164308"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}