9 października 2020

Przygotowanie środowiska

Niedawno rozpocząłem od podstaw nowy projekt, w dodatku na czystym systemie, zastanowiłem się chwilę nad narzędziami które będą mi w tym celu potrzebne, postanowiłem jednocześnie opisać pewne kwestie tutaj na blogu.

Ciężko mi stwierdzić do kogo kieruję ten wpis, jak w sumie cały blog. Zacznijmy jednak od początku… Opiszę poniżej narzędzia i biblioteki z których korzystam najczęściej. Oczywiście lista jest trochę dłuższa 🙂 ale skupie się na absolutnym „must have„.

Nie ważne gdzie pracuje, zawsze towarzyszy mi Linuks, dokładnie to zawsze jakieś distro które opiera się o ubuntu. Ostatecznie po kilku różnych bardziej i mniej dobranych dystrybucji, skończyłem na Ubuntu Budgie którego nie zamierzam już zmieniać.
Obraz Ubuntu Budgie pobrać możemy tutaj: https://ubuntubudgie.org/

Po kilku modyfikacjach wizualnych, moje ubuntu prezentuje się tak:

Visual Studio Code

Program lekki, nie wymagający sporej mocy obliczeniowej i szybkiego dysku aby działał przyzwoicie. Pobrać VSC można pod tym linkiem:

https://code.visualstudio.com/

Na powyższej stronie internetowej można znaleźć również zakładkę z dodatkami, mam wrażenie, że ciągle powstają kolejne, a część z nich ma po kilka milionów pobrań.

Dodatki do programu Visual Studio Code

Prettier – Code formatter

Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Dodatek poprawia formatowanie kodu.

vscode-faker

Link: https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker

Dodatek tworzy na nasze życzenie fikcyjne treści, zdjęcia adresy, daty, wszelakie nazwy (np. „Lorem ipsum„).

PHP Intelephense

Link: https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

Prawdziwy kombajn który instaluję jako pierwszy na czystym systemie.
Podpowiada składnię PHP, daje dostęp do opisu funkcji, listy parametrów.

PHPDoc Comment

Link: https://marketplace.visualstudio.com/items?itemName=rexshi.phpdoc-comment-vscode-plugin

Przy pomocy skrótu klawiszowego dodamy blok komentarza opisującego metody w PHP.

PHP Debug

Link: https://marketplace.visualstudio.com/items?itemName=robberphex.php-debug

Przy pomocy tego narzędzia możemy w bardzo przyjemny sposób debugować nasz kod (wymaga zainstalowania na serwerze xdebug).

Path Intellisense

Link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Podpowiada nam ścieżki do plików.

JS-CSS-HTML Formatter

Link: https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter

Tytuł mówi nam wszystko, poprawia formatowanie plików css, html i javascript.

GitLens — Git supercharged

Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Daje nam dostęp do historii plików, autorach konkretnych linii w kodzie itd.

CSS Peek

Link: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Ułatwia przeszukiwanie plików css, daje możliwość prostego przejścia do odpowiednich styli po wybraniu elementu html.

Color Info

Link: https://marketplace.visualstudio.com/items?itemName=bierner.color-info

Dodaje popup w którym możemy zobaczyć kolory css oraz w prosty

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Link: https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode

Podpowiadanie klas pochodzących z bootstrap’a oraz font awesome.

Better Comments

Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Możemy tworzyć komentarze w odpowiednim kolorze.

DBeaver

Jest to darmowy klient baz danych. Z powodzeniem korzystam od bardzo dawna i polecam. Wśród obsługiwanych baz znajdują się między innymi:

  • MySQL
  • PostgreSQL
  • SQLite
  • Oracle
  • SQL Server

Po instalacji Obu powyższych programów, możemy przejść dalej.

Firefox

Od wersji 2.x do dziś korzystam z Firefox’a, polecam natomiast wzbogacić jego funkcjonalność o trzy dodatki:

Web-developer

daje masę możliwości, ukrycia obrazków, edycji styli, usuwa lub wyświetla ciasteczka i wiele innych.

Link: https://addons.mozilla.org/pl/firefox/addon/web-developer/

Vue.js devtools

Pozycja obowiązkowa w sytuacji gdy pracujemy przy użyciu frameworka Vue.

https://addons.mozilla.org/pl/firefox/addon/vue-js-devtools/

ColorZilla

Próbnik koloru HEX.

Link: https://addons.mozilla.org/pl/firefox/addon/colorzilla/

Projekt

Na potrzeby tego wpisu wysłałem moją strukturę katalogów na github:
https://github.com/rafaldanis/starter

Możemy ściągnąć całość i śmiało korzystać 🙂

Przejdźmy teraz do konsoli i wpiszmy „webpack„, plik „base.js” zostanie wygenerowany. A na naszej stronie zobaczymy załadowany bootstrap oraz vue.js

Po podaniu komendy „webpack” konsola poinformuje nas o brakujących paczkach które możemy zainstalować przy pomocy npm.

Następne polecenie które powinniśmy wykonać to „docker-compose up” w celu uruchomienia naszego serwera.

Po wydaniu polecenia „docker-compose up” uruchomiona zostanie wirtualna maszyna. Po wpisaniu w przeglądarce adresu „127.0.0.1:8080” zobaczymy naszą stronę internetową.

Z naszą bazą danych możemy połączyć się następującymi dostępami:

host: 127.0.0.1
port: 3306
user: root
password: root

Baza danych swoje pliki przechowuje w katalogu „data” który zostanie utworzony w głównym katalogu.

Aby móc skorzystać z xdebug, będziemy zmuszeni do modyfikacji ścieżki dostępowej w pliku:
https://github.com/rafaldanis/starter/blob/main/.vscode/launch.json