PHP Storm

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

Pretraga

Rad sa tagovima

Komentari

Refractoring

Dokumentacija PHP

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

Sass integracija

×

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

×

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”

×

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

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:

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.

Š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 nas odvodi do mesta gde je ugradjena udica, ukoliko kliknemo na ikonu “h”
   
3. 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.
4. 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

×

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

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:

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.

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.