Dzisiaj będzie mowa o tym ostatnim z kilku względów. Po pierwsze, jest to edytor, który został stworzony wykorzystując całkowicie technologie webowe – HTML, CSS, JavaScript oraz Node.js (dla przykładu, Sublime Text został napisany w C/C++, a dodatkowe wtyczki w większości w Pythonie). Po drugie, od 2008 roku intensywnie był rozwijany przez twórców GitHuba a obecnie jest do dyspozycji dla użytkowników Windows, Mac oraz Linux. A po trzecie, jeżeli wcześniej używałeś Sublime Text bez wykupienia licencji i pojawiające się co chwilę okienko o zakupie licencji zaczęło Ci już doskwierać, to czas na Atom! Przesiadka na Atom jeżeli wcześniej używałeś Sublime Text będzie bardzo prosta. Te dwa edytory, pomimo tego, że zostały napisane w zupełnie innych technologiach, są do siebie bardzo zbliżone funkcjonalnie. A jeżeli weźmiemy pod uwagę dodatkowe wtyczki dla Atom, które możemy zainstalować przechodząc do ustawień edytora, to mogę śmiało stwierdzić, że funkcjonalnością przebija Sublime Text. Dlatego w dzisiejszym artykule zapraszam do zapoznania się z kilkoma najciekawszymi wtyczkami do edytora Atom, które usprawnią Twoją pracę.
1. Pigments
Wtyczka wyświetla kolory w plikach oraz całym projekcie.
Warto zwrócić uwagę, że wtyczka umożliwia wyszukiwanie wszystkich kolorów z projektu. Dzięki temu, w osobnej zakładce, pod ręką będziemy mieć dostęp do wszystkich używanych kolorów.
I na deser, możemy skonwertować kolor na inny model, bardzo przydatne gdy chcemy dany model skonwertować do RGBA aby dodać przeźroczystość.
We właściwościach wtyczki, będziemy jeszcze mogli określić dla jakich typów plików domyślnie wtyczka ma działać oraz czy przy autouzupełnianiu kolory również mają być brane pod uwage.
2. Minimap
Znana wszystkim użytkownikom Sublime Text wtyczka, która wyświetla “minimape” z podglądem pliku źródłowego. Warto zaznaczyć, że pozycję minimapy w łatwy sposób możemy przenieść z prawej strony na lewą.
3. Highlight-selected
Wtyczka również znana użytkownikom Sublime Text, po zaznaczeniu słowa podświetlane są pozostałe takie same. Ułatwia to nawigowanie po dokumencie. Jak zwrócisz uwagę na minimapę, to możesz zauważyć na niej, że również została na niej podświetlona właściwość color. Odpowiedzialna za to jest wtyczka Minimap Highlight Selected.
4. Linter
Linter jest narzędziem, które przeszukuje Twój kod w poszukiwaniu błędów. Dokładnie omówiłem go w artykule Literówki w kodzie? Nigdy więcej. Tutaj przypomnę, że jak chodzi o edytor Atom i tworzenie stron internetowych to oprócz samego rdzenia narzęnia, przydadzą się również linter-htmlhint (dla HTML), linter-csslint (dla CSS) oraz linter-eslint (dla JavaScript).
5. Atom Beautify
Jeżeli Twój kod wygląda jak spaghetti, jest bez ładu i składu to można go upiększyć wykorzystując do tego Atom Beautify. Wspierane języki to nie tylko HTML, CSS i JavaScript lecz również PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, i SQL.
Poniższy brzydki kod CSS…
… został skonwertowany do ładnie wyglądającego kodu.
6. File-icons
File-icons jest wtyczką, którą dodaje zestaw ikon, reprezentujący typ dokumentu. Od teraz szybki rzut okiem wystarczy, aby wiedzieć z jakim typem pliku mamy do czynienia. Bardzo przydatne, gdy mamy w dokumencie pliki z taką samą nazwą a innym rozszerzeniem.
7. Advanced Open File
Wtyczka ułatwia przechodzenie po dokumencie, otwieranie i zakładanie katalogów. Za pomocą CTRL + ALT + o w bardzo szybki sposób możemy poruszać się po całym projekcie.
8. Markdown-pdf
Markdown jest językiem, dzięki któremu za pomocą prostych znaczników możemy sformatować tekst. Od dzisiaj koniec z kopiowaniem kodu do Worda :). Teraz wystarczy utworzyć prosty dokument markdown a za pomocą markdown-pdf możemy wygenerować z poniższego kodu, pdf taki jak tutaj.
9. Autoprefixer
Nazwa wtyczki mówi sama za siebie, za jej pomocą w kodzie CSS możemy wygenerować prefixy wymagane przez przeglądarki.
10. Color-Picker
Za pomocą Color Picker w łatwy sposób będziesz mógł wybrać interesujący Ciebie kolor z palety kolorów, do dyspozycji podobnie jak w przypadku wtyczki pigments będziesz miał kilka modeli kolorów.
Jest to 10 przydatnych wtyczek, jeżeli w swojej pracy wykorzystujesz GIT to polecam zapoznać się z git-plus, dzięki tej wtyczce będziesz mógł wykonywać operacje na repozytorium bez przełączania edytora na konsolę. A jak bardziej preferujesz konsolę, to polecam wtyczkę term2 – dzięki niej, będziesz miał dostęp do konsoli bezpośrednio z edytora. I oczywiście nie mógłbym pominąć wtyczki emmet, która przyspiesza pisanie kodu HTML. Dokładnie opisałem ją w artykule Przyspiesz swoją pracę. Część 2.
Edytor Atom dzięki ogromnemu repozytorium wtyczek, jest bardzo konfigurowalny. Wśród dostępnych wtyczek możemy znaleźć takie perełki jak compile-watch, dzięki której wygenerujemy CSS z plików LESS czy SASS. Jak automatyczne zamykanie znaczników HTML jest tym co lubisz, przydatną wtyczką może kazać się Less Than Slash. Jeżeli jesteś programistą aplikacji C/C++ z pewnością zainteresujesz się gpp-compiler dzięki której, zintegrujesz z edytorem kompilator GCC. Wszystkie wymienione wtyczki to tylko malutki ich wycinek. W repozytorium wtyczek na dzień dzisiejszy znajdziesz blisko 4 tysiące wtyczek, dlatego bardzo zachęcam do samodzielnego poszukiwania i rozszerzania funkcjonalności swojego edytora.
A Tobie która z wymienionym wtyczek najbardziej przypadłą do gustu? A może masz swoje ulubione, które nie znalazły się na liście? Jeżeli tak, podziel się swoimi ulubionymi wtyczkami w komentarzu.
Opublikowano 11 kwietnia 2016 w kategorii blog.
