WebStorm ilə işləmək

6.1 IDE-nin quruluşunu araşdırmaq

Gəlin görək burda nə var.

1. Layihənizin qovluq və fayl ağacı:

Burada layihəmizin qovluğunun məzmunu göstərilir — web-storm-10.

Spesifik olaraq bir fayl yaratdım ki, buranın necə qurulduğu daha anlaşıqlı olsun. Növbəti dərsdə siz də bunu edəcəksiniz.

2. Cari açıq fayl:

Bu sadəcə index.html faylının məzmunudur, kodun sintaksisi vurğulanmışdır.

3. Yuxarıda əsas menyunu görə bilərsiniz:

Sağ yuxarıda faydalı düymələr:

• «Yaşıl üçbucaq» — layihəni işə salma düyməsi
• «Böcək» — debugging rejimini işə salma düyməsi
• «Lupe» — layihə üzrə axtarış
• «Dişli çarx» — sazlamalar

4. Solda yan menyunu görə bilərsiniz:

Burada bir neçə faydalı düymə var. Xüsusilə, bizi Terminal düyməsi maraqlandıracaq.

5. Status bar:

Status barın solunda cari açıq faylın yolu göstərilir. Sağda isə onun kodlaşdırması: CRLF, UTF-8. Tezliklə bütün bunları detallı şəkildə biləcəksiniz.

6.2 Layihənin təhlili

1. HTML-fayllar.

Belə faylların sonluğu .html olur və WebStorm onları iki oxu olan yaşıl ikonla işarələyir. Burada yalnız bir belə fayl var — index.html

Belə faylların sonluğu .js olur və WebStorm onları sarı ikonla işarələyir. İndi screenshot-da belə fayllar görünmür.

2. CSS-fayllar (üslublar faylları).

Belə faylların sonluğu .css olur və WebStorm onları mavi ikonla işarələyir. İndi screenshot-da belə fayllar görünmür.

3. Statik media fayllar. Bu ad altında kod olmayan məlumat faylları nəzərdə tutulur. Məsələn, mətn faylları, şəkillər, media fayllar və s. İndi bizim layihədə belə fayllar yoxdur.

4. Xarici kitabxanalar (External libraries). İndi bizim layihədə belə kitabxanalar yoxdur, amma siz onları yüklədiyinizdə, WebStorm mütləq onları burda göstərəcək.

6.3 Terminal ilə işləmək

WebStorm-da birbaşa əməliyyat sisteminizin komanda sətri ilə işləyə bilərsiniz. Linux və MacOS-da komanda sətri adətən Terminal (Terminal) adlanır, buna görə də WebStorm-da da onun adı belədir. Əslində bu WebStorm-un özfəaliyyəti deyil, proqramçılar arasında qəbul olunmuş bir addır.

Terminal-ı açmaq üçün yan menyuda terminal düyməsini sıxmalısınız:

Belə bir pəncərə açılmalıdır:

Bu pəncərədə siz əməliyyat sisteminizin komandalarını yaza bilərsiniz. Amma bizi onlardan biri maraqlandırır.

Gəlin hazırkı Windows versiyasını öyrənək. Bunun üçün yazmaq lazımdır:

    
      ver
    
  

Məndə bu nəticə çıxdı:

Əgər sizdə səhv çıxarsa, əvvəlcə «cmd» komandasını yazın, sonra isə «ver» komandasını yazın.

6.4 CodeGym plaqini nədir və nə üçün lazımdır?

Bu, Intellij IDEA və ya WebStorm mühitinə əlavə edilən xüsusi proqram modulu olan bir tətbiqdir. Bu plaqin vasitəsilə CodeGym kursunun tapşırıqları ilə işləyə bilərsiniz. Məsələn, həlli kodunu yazmaq, yoxlamaya göndərmək, öz həllinizi "default" həll ilə müqayisə etmək və s. Plaqin vasitəsilə tapşırıqların həllindəki irəliləyiş CodeGym hesabınızla sinxronizasiya olunur, buna görə həm veb saytında, həm də inkişaf mühitində eyni görsənəcək.

CodeGym plaqinini birbaşa inkişaf mühitində Jetbrains marketplace-dən yükləyə bilərsiniz. Aşağıda, nümunə olaraq, WebStorm üzərindən prosesləri göstərəcəyik, amma eyni addımlar Intellij IDEA üçün də keçərlidir.

1. "Ayarlar" bölməsinə daxil olun, Windows/Linux üçün File - Settings, MacOS üçün WebStorm - Preferences. Əgər ayarlar bölməsi yoxdursa, hər hansı bir layihə açın və ya yenisini yaradın.

2. Açılan pəncərədə yan menyuda Plugins bölməsini seçin və Marketplace sekmesini açın. Axtarış sətrində codegym yazın.

3. Plaqin seçin və Install düyməsinə basın.
4. Plaqin ilə işləməyə başlamaq üçün WebStorm-u yenidən başladın (Restart IDE).
5. Yuxarı horizontal paneldə bir az dəyişdirilmiş interfeys və Hesaba daxil olun düyməsini görəcəksiniz.

Düyməyə basdıqda hesabınıza daxil olmaq üçün pəncərə açılacaq və sirr açarınızı daxil etməlisiniz:

Xatırladırıq ki, sirr açarınızı “Ayarlar” → “Təhlükəsizlik və giriş” bölməsində tapa bilərsiniz.

Giriş etdikdən sonra layihənin və Codegym SDK-nın yüklənməsi başlayacaq (versiyanı dəyişmək lazım deyil).

6. Yeni bir tapşırığı açmaq üçün sol vertikal paneldə Tasks düyməsinə basın, sonra təqdim olunan tapşırıq kartını seçin və açılan pəncərədə Aç düyməsinə basın:

7. Qarşınızda iki tab olan bir pəncərə açılacaq. Birincisi – şərtlər, ikincisi – kod daxil etmək üçün.
8. İndi tapşırığın həllini yazın və Yoxla düyməsini basın.

Plugin quraşdırıldı! İndi tapşırıqları həll edə bilərsiniz.

Tapşırıqların sayt — plugin ilə sinxronizasiyası

Tapşırıqların siyahısı və onların statusu avtomatik olaraq yenilənir, hər beş dəqiqədən bir və ya hər hansı tapşırığı yoxlama üçün göndərdikdən sonra (codegym serveri).

Ona görə, əgər tapşırığı saytda həll etdinizsə, pluginin içində də o həll olunmuş tapşırıqlar siyahısında olacaq. Əgər tapşırıqların statusları ilə bağlı məlumatı dərhal yeniləmək lazımdırsa, sağ üst küncdə avatarınıza basın və açılan menyuda Tapşırıqları sinxronizasiya et seçimini edin:

Plugində yeni başlayan rejimi

Bu, WebStorm və digər inkişaf mühitləri ilə kifayət qədər təcrübəsi olmayan istifadəçilər üçün sadələşdirilmiş versiyadır. Bu rejimdə WebStorm-un bəzi funksiyaları gizlədilir. Bu rejimi söndürmək üçün sağ üst küncdə avatarınıza basın və açılan menyuda Tənzimləmələr seçimini edin:

PRO rejimində pluginin naviqasiya panelini necə gizlətmək olar

Tənzimləmələr (⚙️) bölməsinə basın və "Pluginin naviqasiya panelini göstər" seçimini deaktiv edin: