Optymalne środowisko do efektywnej pracy z HTML/CSS (4 narzędzia)

Jedną z rzeczy, o którą jestem często pytany, jest organizacja środowiska pracy. Jaki wybrać edytor? Jak przyśpieszyć pisanie CSS? Jak optymalnie pisać kod HTML? Obecnie Web Developerzy mają dostęp do tysięcy narzędzi. Każde z nich oferuje przyśpieszenie i ułatwienie pracy. Łatwo się w tym pogubić, szczególnie początkującym.

W tym artykule przedstawię Ci 4 narzędzia, których użycie znacznie przyśpieszy pracę z HTML i CSS. Dołączone poradniki pozwolą Ci natychmiast wykorzystać ich potencjał.

Visual Studio Code

Jeśli jesteś stałym czytelnikiem bloga, to mogłeś zauważyć, że korzystam głównie z Atoma. Używałem wcześniej z kilkunastu edytorów (m.in. Dreamweaver, Sublime Text 3, Brackets), ale w każdym czegoś mi brakowało. Przeniosłem się całkowicie na Atom i tam wykonywałem większość swojej pracy.

Jakiś czas temu jeden z czytelników wspomniał na fanpage’u Devcorner o edytorze Visual Studio Code. Słyszałem o nim wcześniej, ale nie miałem okazji go przetestować (to relatywnie „młody” edytor, powstał w kwietniu 2015). Postanowiłem dać mu szansę.

Po zrealizowaniu kilku projektów w VSC prawdopodobnie nie wrócę już do Atoma. Mam wrażenie, że robi wszystko to co Atom, tylko lepiej. Jest wyraźnie szybszy i lepiej zorganizowany. Praca w tym edytorze jest po prostu znacznie wygodniejsza.

Pobierz Visual Studio Code >>

visual studio code

Emmet

Emmet to wtyczka do popularnych edytorów, która znacznie usprawnia pisanie kodu HTML i CSS. Działanie pluginu polega na przekształcaniu skrótów na odpowiadające fragmenty kodu.

Emmet jest automatycznie instalowany z Visual Studio Code. Jeśli chcesz jednak korzystać z innego edytora, to nic nie stoi na przeszkodzie.

Jakiś czas temu napisałem dwa artykuły, dzięki którym szybko nauczysz się korzystać z tego narzędzia:

  1. Błyskawiczne pisanie kodu HTML z Emmet
  2. Błyskawiczne pisanie kodu CSS z Emmet

demo emmet

SASS

Krótki wstęp dla tych dwóch osób, które jeszcze nie słyszały o SASS – jest to preprocesor CSS, który pozwala na szybszą i bardziej wydajną pracę ze stylami strony. Więcej o SASS pisałem w kursie SASS dla początkujących.

Składnia SASS nie jest domyślnie wspierana w Visual Studio Code, ale możesz zainstalować odpowiednie rozszerzenie w bardzo prosty sposób. Otwórz VSC i przejdź do panelu Extensions (CTRL + Shift + X). W wyszukiwarce wpisz „SASS” i kliknij przycisk Install obok rozszerzenia Sass.

extensions

LiveReload

LiveReload to świetne narzędzie, które monitoruje zmiany plików w katalogu ze stroną i automatycznie odświeża ją w przeglądarce. Jest to szczególnie efektywne rozwiązanie, jeśli posiadasz więcej niż jeden monitor (jeśli nie, to bardzo polecam).

Jak korzystać z LiveReload?

Na początku musisz go pobrać. Jeśli korzystasz z Maca, to za LiveReload będziesz musiał zapłacić 9.99$.

Wersja na Windows jest darmowa. Wystarczy że przejdziesz na tę stronę i pod nagłówkiem Downloads klikniesz na Try LiveReload 0.9.2 Alpha. Po pobraniu zainstaluj program. Teraz możesz otworzyć LiveReload. Zobaczysz podobne okno:

livereload

Teraz wystarczy kliknąć przycisk +add i wybrać główny katalog strony.

livereload 2

Skopiuj skrypt z drugiego kroku i wklej go przed zamykający tag </body>. Od teraz LiveReload będzie obserwował zmiany w plikach. Jeśli takie wystąpią, to automatycznie odświeży stronę.

Korzystasz z innych narzędzi, które przyśpieszają Twoją pracę z HTML i CSS? Podziel się w komentarzu 🙂

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

10 niezbędnych pluginów do Visual Studio Code 7 często popełnianych błędów przez Webdeveloperów 6 błędów, które popełniają osoby uczące się tworzenia stron internetowych (2021)
View Comments
  • Widzę, że LiveReload to praktycznie to samo co Koala. Tylko Koala jest darmowa na wszystkie platformy.
    http://koala-app.com/

    Opcje obydwu tych programów łączy też dobrze skonfigurowany Webpack.

    Ja jestem miłośnikiem takiego dinozaura jak NetBeans ale powoli przesiadam się na VSC.
    W VSC brakuje mi rozpoznawania w pliku css, class i id wcześniej zdefiniowanych w pliku html.
    Chyba, że brakuje mi jakiegoś plugina.

  • Sztosem, kombajnem do pracy jest webstorm polecam sprawdzić 🙂

  • VSC jest najlepszy nie tylko do HTML i CSS ale również JS, a szczególnie Node.js. Gdyby jeszcze dodano rozszrzenie o najnowsze narzędzia Google, Chrome zaprezentowane na Google I/O ’17 to VSC jest nie do pobicia https://youtu.be/PjjlwAvV8Jg

  • Co do ostatniego – brackets wspiera coś takiego natywnie 😉 spoko opcja, ale niestety przestaje działać kiedy włączamy narzędzia deweloperskie w chromie, a ponadto działa tylko z chromem :/