Jak skonfigurować linting JavaScript w Visual Studio Code

Jestem oczywiście wielkim fanem używania standardów kodowania za każdym razem, gdy piszesz kod po stronie serwera (niezależnie od tego, czy jest to WordPress, PSR2 czy cokolwiek innego – jeśli czegoś używasz, myślę, że to dobra rzecz).

Ale jeśli chodzi o pisanie kodu po stronie klienta, a konkretnie JavaScript do tego postu, nie widzimy tego tak często, chociaż uważam, że jest on równie ważny. To samo dotyczy CSS, Sass czy LESS, ale to już treść na inny post.

W przypadku ostatnich projektów korzystaliśmy z przewodnika Airbnb JavaScript Style dla naszych projektów. Jestem fanem i uważam, że pisanie czystego, czytelnego JavaScriptu pomaga (wygląda na to, że napisała go ta sama osoba – ostateczny cel standardów kodowania, prawda?).

W tym poście omówię proces uzyskiwania konfiguracji w Visual Studio Code.

Linting JavaScript w Visual Studio Code

W tym poście założono, że znasz się na konfigurowaniu Menedżera pakietów węzłów na komputerze lokalnym.

Jeśli nie, to mam przewodnik, jak to zrobić w tym poście. Skrót? To dosłownie tak proste (po zainstalowaniu Homebrew):

Po skonfigurowaniu (za pomocą wspomnianego wpisu lub jeśli jest już skonfigurowany), będziesz gotowy do kontynuowania faktycznego instalowania niezbędnych narzędzi do konfigurowania lintingu JavaScript w Visual Studio Code.

1 Instalacja ESLint

Załóżmy na przykład, że uruchamiasz projekt z katalogu o nazwie acme w katalogu Projekty w Dropbox. Jeśli tak jest, przejdź do katalogu wtyczek dla tego projektu. Prawdopodobnie będzie wyglądać mniej więcej tak:

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

W tym przypadku musisz zainstalować ESLint i pliki konfiguracyjne Airbnb. Na szczęście jest to naprawdę łatwe. Z terminala po prostu wpisz następujące polecenie:

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

Zakładam, że żaden z powyższych pakietów nie jest już zainstalowany. Jeśli tak, na przykład eslint, możesz usunąć ten konkretny argument z powyższej linii.

Ponadto ważne jest, aby zrozumieć, że projekt eslint-plugin-import jest ważny dla dodania obsługi importowania i eksportowania modułów JavaScript.

2 Konfiguracja ESLint

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, jak pokazano powyżej, wprowadź następujące polecenie:

$ touch .eslintrc.js

Spowoduje to utworzenie pustego pliku (lub pustego pliku z kropkami, jak niektórzy mogą go nazywać) i tutaj nasza konfiguracja będzie odwoływać się do przewodnika po stylu Airbnb.

W pliku po prostu dodaj następujące wiersze kodu konfiguracyjnego:

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

Teraz, gdy masz już zainstalowany ESLint, masz odniesienie do przewodnika po stylach Airbnb i masz odniesienie do obsługi dodatkowej składni, czas skonfigurować Visual Studio Code.

3 Konfigurowanie kodu programu Visual Studio

Moim zdaniem to najłatwiejsza część. Otwórz panel rozszerzeń w dowolny sposób, który najbardziej Ci odpowiada (klikając ikonę lub używając skrótu), a następnie uruchom wyszukiwanie ESLint. Możesz zobaczyć kilka wyników, ale ten, który chcesz, to ten, który wygląda tak:

Zainstaluj go, a następnie ponownie załaduj kod programu Visual Studio. Powinien być ustawiony w ustawieniach domyślnych, które możesz potwierdzić, otwierając ustawienia i szukając tego fragmentu kodu:

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

Jeśli go nie ma, możesz dodać go do ustawień użytkownika (nie jestem fanem muckowania z ustawieniami domyślnymi na wypadek, gdybyś kiedykolwiek musiał zresetować z czystego podkładu).

Gdy to zostanie zdefiniowane, możesz już iść i powinieneś mieć podpięty JavaScript podczas pracy nad swoim projektem.

Inni menedżerowie pakietów?

Powyżej podałem przykład, jak to zrobić za pośrednictwem Node; jednak można to również osiągnąć za pomocą przędzy. Jest to coś, o czym planuję napisać w przyszłości, ale ponieważ omówiłem Node w poprzednim poście, wydawało się logiczne i najłatwiejsze, aby śledzić ten post z tą treścią w celach informacyjnych.

Kiedy nadejdzie czas, abym przeszedł przez innego menedżera pakietów, konkretnie Yarn, omówię to również.