Przydatne wtyczki do Atoma TOP 10

Przetestowałam wiele edytorów kodu. Jednak najbardziej przypadł mi do gustu Atom. Przede wszystkim ze względu na swoją prostotę oraz wygodę w użyciu. Poza tym dostępnych jest mnóstwo ciekawych pluginów, dzięki czemu praca w Atomie staje się szybka, a także przyjemna. Zobacz najbardziej przydatne wtyczki do Atoma.

O Atomie

Atom został stworzony przez twórców GitHuba przy użyciu technologii webowych: HTML, CSS, a także JavaScript. Dostępny jest dla użytkowników Window, Mac jak również Linux. Atom dostępny jest na licencji MIT, czyli mówiąc prostym językiem, jest w pełni darmowy. Bez wątpienia najważniejszą zaletą Atoma jest jego modułowość. Poszczególne jego funkcje są określane mianem pakietów. Wokół Atoma skupiona jest bardzo duża społeczność, która go cały czas ulepsza i tworzy nowe, bardzo przydatne dodatki. Poniżej lista moim zdaniem najważniejszych wtyczek.

Wtyczki do Atoma – istalacja

Instalacja wtyczek do Atoma jest niezwykle prosta. Należy przejść do ustawień wybierając z menu File ->Settings (Plik -> Ustawienia).

Następnie należy przejść do sekcji Install.

Zostanie otwarta wyszukiwarka.

Do wyszukiwarki należy wpisać nazwę interesującego nas dodatku. Obok każdej wtyczki znajduje się przycisk Install (Zainstaluj), który należy kliknąć.

1. Emmet

Rozszerzenie Emmet pozwala na błyskawiczne pisanie kodu. Po wpisaniu skrótu selektorów i wciśnięciu przycisku Tab, tworzony jest pełny kod. Poniżej kilka przykładów:

Lista nienumerowana pięcioelementowa – wystarczy, że wpiszesz skrót ul>li*5 i wciśniesz Tab. Dzięki takiej kombinacji utworzysz poniższy kod:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Nawigacja na stronie – nav>ul>li + Tab

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Link – a:link + Tab

<a href="http://"></a>

Więcej przykładów znajdziesz pod tym adresem.

Instalacja: wpisz do wyszukiwarki frazę emmet.

2. Beautify

Wtyczka Beautify sprawia, że kod jest ładnie sformatowany z wcięciami, a także tabulacjami. Uporządkowany kod staje się bardziej przejrzysty i przede wszystkim łatwiejszy do odczytania.

Po zainstalowaniu wtyczki zaznacz kod, który wymaga formatowania i użyj kombinacji CTRL + ALT + B.

Kod przed sformatowaniem:

Kod po sformatowaniu:

Instalacja: wpisz do wyszukiwarki frazę atom-beautify.

3. File Icons

Atom domyślnie wyświetla tylko rozszerzenia plików. Wtyczka File Icons dodaje do nazw plików odpowiednie ikonki. Pozwala to na szybsze zorientowanie się w strukturze plików, a także na łatwiejsze odszukanie interesującego nas pliku.

Instalacja: wpisz do wyszukiwarki frazę atom-file-icons.

4. Minimap

Po zainstalowaniu wtyczki Minimap, po prawej stronie wyświetlany jest podgląd pliku, nad którym aktualnie pracujemy. W znaczący sposób ułatwia to nawigację po pliku, a co za tym idzie usprawnia pracę.

Instalacja: wpisz do wyszukiwarki frazę minimap.

5. Auto Close HTML

Rozszerzenie Auto Close dodaje funkcję automatycznego domykania znaczników HTML. Dzięki temu mamy mniej kodu do napisania 🙂

Instalacja: wpisz do wyszukiwarki frazę autoclose-html.

6. Pigments

Wtyczka Pigments koloruje użyte w arkuszu styli wartości kolorów.

Instalacja: wpisz do wyszukiwarki frazę pigments.

7. Highlight Selected

Po zainstalowaniu Highlight Selected zostaną podświetlone wszystkie szukane frazy wewnątrz pliku. Bez wątpienia jest to bardzo przydatna funkcja.

Instalacja: wpisz do wyszukiwarki frazę highlight-selected.

8. Color picker

Color picker dodaje do Atoma łatwy w użyciu przybornik do wybierania koloru. Żeby użyć przybornika należy po zainstalowaniu dodatku kliknąć prawym przyciskiem myszy i wybrać opcję Color Picker.

Instalacja: wpisz do wyszukiwarki frazę color-picker.

9. Autoprefixer

Za pomocą wtyczki Autoprefixer możemy wygenerować prefixy wymagane przez przeglądarki w kodzie CSS.

Instalacja: wpisz do wyszukiwarki frazę autoprefixer.

10. Linter

Linter jest bardzo przydatnym narzędziem wyszukującym błędy w kodzie.

Instalacja: wpisz do wyszukiwarki frazę linter.

Przydatne wtyczki do Atoma – podsumowanie

Podsumowując, Atom dzięki dużej ilości wtyczek jest bardzo elastyczny. W rezultacie praca z nim staje się szybsza i przyjemniejsza. Przedstawione wtyczki bardzo ułatwiają pracę z kodem. Oczywiście nie są to jedynie dostępne dodatki. Na dzień dzisiejszy (22.02.2020 r.) mamy do dyspozycji aż 8702 wtyczek, więc jest w czym wybierać.

A jakie są Twoje ulubione wtyczki do edytora Atom? Zostaw swój komentarz!

Poradniki