Uvod

PHP Storm je jedan od najboljih IDE (eng. Integrated development environment) koji pruža veliki broj olakšica u radu:

  • Kompletiranje koda
  • Refractoring koda
  • Integraciju version control (Git)
  • Integraciju Command Prompt-a
  • Integracija Sass kompjalera i Typscripte transpilera
  • WordPress integracija
  • Debuging…

Najčešće korišćene prečice

Prečice za rad sa kodom

Shortcut Objašnjenje
CTRL+SHIFT+Backspace Vraća na mesto prethodno mesto u kodu
Ctrl+W Selektovanje dela gde je kursor
Crtl+Shift+W Smanjivanje selektovanog dela
Alt+Click Postavljanje višestrukih kursora za istovremeno delovanje
Ctrl+Shift+L Sredjivanje koda
Ctrl+ NumPad (plus ili minus) Minus za collapse dela koda, dok je plus za Expand
Shift+Enter Dodavanje nove prazne linije ispod
Ctrl+Alt+Enter Dodavanje nove prazne linije iznad
Ctrl+Shift+J Spajanje sa kolonom ispod u jedan red
Ctrl+Shift+(Up ili Down) Pomeranje linije preko celog bloka kod – gore dole
Alt+Shift+(Up ili Down) Pomeranje linije za jednu liniju – gore dole
Tab Pomeranje teksta udesno
Shift+Tab Pomeranje teksta ulevo
Ctrl+D Dupliranje:

  • označenog dela
  • cele linije gde je kursor
Ctrl+Shift+V Paste selected entry from the Clipboard to the caret location.
Ctrl+[ (za HTML) ili Ctrl+Shift+m (za PHP) Kursor na otvarajući tag
Ctrl+ ] (za HTML) ili Ctrl+Shift+m (za PHP) Kursor na zatvarajući tag
Shift+del Brisanje tekućeg reda
Ctrl+Shift+U Prebacivanje izabranog dela da budu napisana velikim ili malim slovima
Ctrl+(Up ili Down) Skrolovanje sa tastaturom
Ctrl+M Postavljanje kursora ili označenog dela u centar ekrana
Shift+F1 Dokumentacija selektovang bloka
Ctrl+Shift+Alt+zarez Encodovanje specijalnih karaktera korišćenjem plugina “Shifter”
Ctrl+Alt+R (custom) Otvaranje prozora za upis i analiziranje error-a iz browser-a Stacktrace (moja custom prečica)

Pretraga

Shortcut Objašnjenje
Shift Shift Pretraga svaga (funkcija, fajlova, klasa….) po imenu
Ctrl+F Pretraga po selektovanoj reči u trenutno otvorenom fajlu
Ctrl+R Pretraga i mogućnost zamene selektovane reči nekom drugom u trenutno otvorenom fajlu
Alt+J Potraga za još jednim tekstom kao što je obeleženi a zatim zajednjička modifikacija pronadjenih delova
Ctrl+Shift+Alt+J Pronalazi sav tekst u fajlu jednak kao obeleženi i omogućava zajedničku modifikaciju pronadjeneih delova
Ctrl+Shift+F Pretraga označenog teksta kroz fajlove
Ctrl+N Pretraga klasa po nazivu klase
Ctrl+Shift+N Pretraga fajlova po nazivu fajla
Ctrl+E Pretraga skorašnjih fajlova
Ctr + F12 (custom Ctrl+Shift+Q) Pregled strukture fajla
Ctrl+Shift+Alt+N Pretraga simbola (wordpress funkcija ako je integrisan) po nazivu simbola
Ctrl + klik Lokacija gde je definisan pojam
Ctrl+B Odvodi na lokaciju gde je definisan pojam
CTRL+SHIFT+A Pretraga po pojmovima vezanim za PhpStorm
F11 Obeležavanje linije koda (Bookmark)
SHIFT + F11 Pregled svih Bookmark-sa u projektu
Ctrl + Alt + W (custom) Next Bookmark u fajlu (moja custom prečica)
Ctrl + Alt + Q (custom) Prethodni Bookmark u fajlu (moja custom prečica)

Rad sa tagovima

Shortcut Objašnjenje
Ctrl+Alt+T Wrap tag ili Standardna abervacija ili Emmet
Ctrl+Alt+J Standardna abervacija ili Emmet
Ctrl+Alt+K Wrap Emmet oko selektovaog bloka
Ctrl+Shift+Del Uklanjanje taga
Ctrl+Alt+G Update tag with Emmet
Ctrl+J Pozivanje snippeta sa liste
Ctrl+Alt+= (custom) Ovo je moja custom prečica za čuvanje obeleženog bloka kao snippet-a tj. za pozivanje “Live Code Templet”

Mesto gde želimo da nam se nalazi kursor nakon aktiviranja abervacije se obeležava sa “$END$

Komentari

Shortcut Objašnjenje
Ctrl+kosa crta Komentarisanje jedne linije
Ctrl+Shift+kosa linija Komentarisnje celog bloka

Refractoring

Shortcut Objašnjenje
Shift+F6 Rename fajla ili klase (sa promenom u svim delovima tj. update reference)
F6 Premeštanje (move) fajla ili klase (sa promenom putanja u vezama kroz ceo projekat)

Dokumentacija PHP

Shortcut Objašnjenje
/** ENTER Pravi dokumentaciju za funkcije u komentaru (@param ili @return…)
Ctrl+SPACE Dok smo u komentaru nudi sugestiju dodatnih opcija

Sve prečice možete pogledati ovde a odličan članak za korišćenje prečica je na sajtu sitepoint.

Integracija linux terminala

Ukoliko želimo da umesto windows-ovog podrazumevanomg CMD postavimo linux terminal, prvo je neophodno da imamo instaliran linux terminal. Dobra stvar je što linux terminal dolazi zajedno sa instalacijom git-a, pa je dovoljno samo u settings delu vezanom za terminal PhpStorm-a, na mestu Shell path promeniti putanju sa podrazumevanog cmd.exe na C:\Program Files\Git\bin\sh.exe

settings linux terminal

Sass integracija

slika file Watcher

slika ×

Da bi mogao da se koristi SASS kompajler u okviru IDE PhpStorm-a, mora prethodno biti instaliran Sass. Instalaciju Sass-a pogledajte u članku “Instalacija alata za web programiranje”. Nakon toga napravimo novi File Watcher koji prilagodimo našim potrebama.
Za promenu lokacije gde će biti smešten default-ni css fajl, potrebno je na mestu argumenta promeniti putanju do željenog foldera.

Argument

–no-cache –update $FileName$: ../css/$FileNameWithoutExtension$.css –style expanded

U novoj putanji nastavak –style expanded koristimo pri development-u dok za produkciju promenimo zadnji deo argumenta u:

–compressed

Takodje je potrebno promeniti i deo gde se pominje “Output path to refresh” jer se tu definiše gde se nalazi odgovarajući .map fajl koji omogućava da browser prikazuje u inspektoru na kojoj liniji je definisano neko CSS svojstvo ali u okviru .scss fajla.

Output path to refresh:

$FileNameWithoutExtension$.css:../css/$FileNameWithoutExtension$.css.map

Više o ovome u okviru PhpStorma možete pogledati ovde

Typescript integracija

slika

slika ×

Nakon instalacije typescript-a koja je objašnjena u članku “Instalacija alata za web programiranje”, može se pristupiti integrisanju u PHP storm.

Sa integracijom Typescripta u PHPStorm dobijamo:

  1. Kompletiranje koda
  2. Error i syntax isticanje koda
  3. Formatiranje koda
  4. Generisanje JavaScript koda tzv. transpiliranje

Integrisanje Typescripta se aktivira tako što u delu settings/Language&Framework/Typescript čekiramo opciju “Enable Typscript Compajler”.

Pravljenje novog “File Watcher-a”

slika

slika ×

Dodavanje novog File Watcher-a se dobija kada se klikne na dugme + (plus), nakon čega se pojavljuje prozor u kome se vrši podešavanje. Ukoliko se prilikom kompajliranje ipak pojavi greška tipa: error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

Problem se rešava dodavanjem koda –target es5 na mestu arguments unutar FileWatcher dijaloga.

WordPress integracija

Integracija wordpress-a u PHPStorm je aktivna od verzije 8.0 PHPStorma. Neophodno je da se za svaki projekat aktivira wordpress u okviru PHPStorm-a. To se radi u meni-ju settings/Wordpress i čekira se Enable WordPress integration

enable_wordpresss

Kada se bira WordPress installation path onda se bira folder wordpress projekta koji sadrži:

  • wp-insludes
  • wp-content
  • wp-admin

Treba proveriti da li je dobro setovana putanja i u delu settings/project/Directories kao na slici:

wordpress integracija provera

Adaptiranje stila koda po preporukama za WordPress, se vrši tako što u Code Style u delu za PHP izaberemo Set from… a zatim predefinisani stil WordPress.

wordpress_style

Šta nam nudi PHPStorm u radu sa WordPress-om?
  1. WordPress nam nudi pomoć pri kompletiranje parametara pri kačenju na postojeće udice kao na sledećoj slici:
  2. wordpress hook completition

  3. WordPress nas odvodi do mesta gde je ugradjena udica, ukoliko kliknemo na ikonu “h”
    link do udice
  4. Ukoliko držimo Ctrl i kliknemo na drugi parametar za registraciju udice (ime funkcije koju kačimo) odvešće nas do mesta gde je ta funkcija napravljena. Isto se postiže ako obeležimo parametar i uradimo prečicu Ctrl + B.
  5. Ukoliko je integrisan wordpress u PHP Storm onda koristeći standardnu prečicu za pretragu simbola Ctrl+Shift+alt+N možemo da pretražimo i sve wordPress-ove funkcije i udice.

Popularni plugini za PhpStorm

Postoji veliki broj plugina pisanih da dopune funkcionalnosti PhpStorm-a, možete ih pregledati na repozitorijumu oficijelnog sajta. Plugini se instaliraju preko PhpStorm-ovog interfejsa gde takodje mogu da se izaberu i pretraže. U narednom delu ću navesti popularne plugine koje koristim.

Emmet

slika

slika ×

Da bi se aktivirao emmet” potrebno je:

  • u CSS-u čekirati box “Eneble CSS Emmet”, kao i opciju “Auto insert CSS vendor prefixes”
  • u JavaScript-u čekirati Enable JSX Emmet
  • u HTML čekirati “Enable XML Emmet”, kao i opciju “Enable automatic URL recognition while wrapping text with

Više o ovom pluginu možete pogledati u članku.

AceJump

Koristi se za jednostavno i intuitivno prebacivanje kursora na stranici koristeći samo tastaturu. Prečica

Shortcut Objašnjenje
Ctrl+ ; Na trenutnom mestu kursora otvaranje prozora za upis slova na koje želimo da pomerimo kursor.

Browse word at caret

Kao što mu i sam naziv kaže, ovaj plugin prebacuje kursor na prvu sledeću reč istu kao reč gde se trenutno nalazi. Pošto mi je defaultna prečica pravila problem sledeća prečica je custom:

Shortcut Objašnjenje
Ctrl+ ALT + PgDown Prebacuje kursor sa trenutne reči na istu takvu na donjem delu stranice.
Ctrl+ ALT + PgUp Prebacuje kursor sa trenutne reči na istu takvu na gornjem delu stranice.

Scratch

Ovaj plugin omogućava da se otvori privremeni tekst fajl za pravljenje nekih pribeleški koje neće biti sačuvane u sklopu projekta.

Shortcut Objašnjenje
ALT +C pa zatim ALT + A Otvara novi tekst fajl za belešku
ALT + C (dvaput) Otvara poslednje otvorenu belešku.
ALT + L Otvara listu svih beleški (CUSTOM!!!)
del (na izabranoj belešci u listi) Briše belešku sa liste uz prompt.
Ctrl + del (na izabranoj belešci u listi) Briše belešku sa liste bez prompt-a

LiveEdit

Ovaj plugin se koristi za live reload browsera. Aktivira se sa uključivanjem debug opcije nad izabranim fajlom.

Tips and triks

Isključivanje spell inspector-a

Kada se radi sa Srpskim tekstom neophodno je skloniti efekte koje pravi spelling checker. Postoje dve mogućnosti:

  1. Prva verzija je da se skroz isključi ali mora za svaki projekat ponovo, kao što je objašnjeno u sledećem tekstu;

    There is no “global” setting for existing projects — it needs to be done for each project individually (Spell Checker is an inspection and Inspections are configured on per-project level). You need to disable whole group at Settings | Inspections | Spelling. You can configure it to be disabled by default for any future new projects:File /Default Settings / Inspections / Spelling

  2. Druga varijanta je bolja jer samo isključuje efekte ali kada se manuelno startuje code inspector greške će biti vidljive. Uputstvo za isključivanje efekta je:

    You could leave the Spell Checking inspection enabled and just remove the visual effect in the editor by going to Settings | Colors & Fonts | General | Typo and unchecking Effect.
    This way it will not highlight the typos in the editor but when you manually run the code inspector the typos are listed.

Snippets tj. Live Template

U sklopu PhpStorm-a postoji odlična opcija za ubrzanje pisanja koda sa ubacivanjem predefinisanih delova koda (eng.snippet). Postoji mogućnost da se preko plugina unesu pripremljeni snippet-i vezani za specifični jezik ili framework.

Pravljenje novog snippeta

Prvo je potrebno je da napravimo prečicu (eng. keyboard shortcut) za pravljenje novih snippets-a tzv. “Save With Live Template” (moja prečica je “CTRL + ALT + =”).
Za pravljenje novog snippets-a je potrebno da označimo deo koda koji želimo da sačuvamo kao novi live snippets. Zatim pozovemo prethodno napravljenu prečicu (“CTRL + ALT + =”), nakon čega se otvara novi prozor u koji se unose podaci. Na mesto abbreviation stavimo tekst za poziv snippeta, a u description opis snippeta. Podešavanje u kojim programskim jezicima će biti aktivan naš snippet se uredjuje na dnu, u delu “Applicable in”.

Ukoliko želimo da se nakon aktivacije abervacije kursor nadje na odredjenom mestu onda ubacimo $END$ na željeno mesto kao na sledećem primeru:

<strong>$END$</strong>

Pozivanje snippet-a

Snippet se poziva kucanjem prethodno definisanog teksta za poziv, nakon čega se aktivira sa predvidjenom akcijom za aktiviranje snippeta (po defaultu je “Tab“).
Ukoliko želimo pregledamo listu definisanih snippets-a koristimo prečicu CTRL+J.

Pregled korišćenih CSS stilova

Desni klik na tag kome želimo da pregledamo stil. Zatim u meniju izaberemo, “Show Applied Styles for Tag”, nakon čega se u dnu PHPStorm-a otvara prozor sa svim primenjenim CSS stilovima.

Quick navodnici ili zagrade

Opcija stavljanja zagrada ili znaka navodnika oko izabranog teksta se uključuje: Preferences -> IDE -> Editor -> Smart Keys -> Surround Selection on typing quote or brace

Izaberi reč gde je kursor

Uključivanjem opcija pod delom Browse word at caret u meniju Editor/General/Appereance se omogućava da se lako izabere reč gde je kursor.

Podelite:

Ostavite komentar