Programlama dünyası çok geniştir, özellikle konu Javascript olduğunda. Kapsamlı bir zemin yelpazesi ve kullanılacak çeşitli teknolojiler vardır. Geliştiriciler her gün yeni araçlar yaratıyor ve mevcut olanlardan bazıları önemini kaybedebilir. Bu ortamda gezinmek göz korkutucu olabilir, ancak yardımcı olabilecek bir şey var: Entegre Geliştirme Ortamı veya IDE.
Javascript projelerinizi geliştirmek için çok sayıda IDE mevcuttur. En popüler olanlardan bazıları VsCode, Sublime Text, Atom, Eclipse, Notepad++ ve Webstorm’dur. Bu yazı JetBrains tarafından geliştirilen Webstorm IDE’ye odaklanacak. Bu şirket aynı zamanda Java geliştiricileri için IntelliJ IDEA, Python geliştirme için Pycharm ve PHP geliştirme için PHPStorm gibi iyi bilinen IDE’lerin oluşturulmasından da sorumludur.
WebStorm
Webstorm, web geliştirme için tasarlanmış mükemmel bir IDE’dir. HTML’nizi, stil sayfalarınızı ve Javascript kodunuzu hızlı bir şekilde yazmak için kullanabilirsiniz. Farklı Javascript çerçeveleriyle çalışmak için eklenti kullanmanız gereken diğer IDE’lerden farklı olarak Webstorm, çeşitli Javascript kitaplıkları ve NodeJS, ReactJS, VueJS, Electron, Angular ve çok daha fazlası gibi çerçeveler için temel destek içerir.
Kullanımı ve gezinmesi kolay sezgisel kullanıcı arayüzünün yanı sıra WebStorm, aşağıdakiler de dahil olmak üzere birçok başka inanılmaz özelliği destekler:
- Code completion: WebStorm, siz kodunuzu yazarken ilgili anahtar kelimeleri ve simgeleri otomatik olarak tamamlar. Bunlardan bazıları. Javascript ve Typescript’te bulunan özellikler, makine öğrenimi algoritmaları kullanılarak mümkün kılınmıştır. Yazma hızınızı artırmak için son düzeltme tamamlama, canlı şablonlar ve Emmet gibi araçları da kullanabilirsiniz.
- Code quality analysis: WebStorm’un çok sayıda inceleme, yazım denetimi ve Stylelint ve ESLint gibi linterlerle entegrasyonla desteklenen güçlü hata algılama özelliği, siz yazarken sorunları vurgulayarak ve doğrudan düzenleyici içinde hızlı düzeltme çözümleri sunarak kusursuz bir kodlama deneyimi sağlar.
- Quick documentation: WebStorm’da sembollere ilişkin belgelere erişim zahmetsizdir; sembolün üzerine gelin veya düzeltme imlecini üzerine yerleştirin ve ilgili birçok ayrıntıyı ortaya çıkarmak için F1 tuşuna basın.
- Built-in HTML preview: WebStorm, statik HTML dosyalarını doğrudan IDE içinde önizlemenizi sağlayan kullanışlı bir özellik sunar. HTML dosyasında veya ilgili CSS ve JavaScript dosyalarında yapılan herhangi bir değişiklik otomatik olarak kaydedilir ve önizlemeye hemen yansıtılır; böylece değişikliklerinizi görselleştirmenin kusursuz ve etkili bir yolu sağlanır.
- Built-in HTTP client: Web hizmetlerinizi zahmetsizce test etmek için WebStorm’un yerleşik HTTP istemcisinden yararlanın. Verimli ve kolaylaştırılmış testler için doğrudan düzenleyicinin içinde HTTP isteklerini oluşturun, düzenleyin ve yürütün.
- And many more code-editing boosters: WebStorm, kodlamayı hızlandırmak için çeşitli özellikler sunarak geliştiricilerin üretkenliğine öncelik verir. Birden fazla düzeltme işareti, satır düzenleme eylemleri ve otomatik kod yeniden biçimlendirme gibi özelliklerle gelişmiş hızı deneyimleyin; sizi bekleyenlere yalnızca bir göz atın.
WebStorm’u Ubuntu’ya Kurmak
WebStorm’u Ubuntu sisteminize kurmak için iki yol kullanabilirsiniz.
- Snap’ı kullanarak WebStorm’u yükleme
- WebStorm kurulum paketini JetBrains resmi web sitesinden indirip kurma
Bu yazı her iki yönteme de bakacaktır.
Yöntem 1: WebStorm’u Snap kullanarak Ubuntu’ya yükleme
Snap, çeşitli Linux sistemleri için kullanılabilen, dağıtımdan bağımsız bir paket yönetim yazılımıdır. Bu, Snap paketlerinin farklı Linux dağıtımlarında değişiklik yapılmadan kullanılabileceği anlamına gelir. Bu, Snap’in en önemli avantajlarından biridir.
Snap kullanarak Ubuntu üzerinde WebStorm kurulumu yapmak için aşağıdaki adımları sırasıyla takip ediniz.
1. Ubuntu sisteminizi güncellemek için aşağıdaki komutları uygulayınız. Yeni bir paket kurmadan önce Ubuntu’da güncelleme komutlarını çalıştırmak, en son paket bilgilerine, güvenlik güncellemelerine ve bağımlılıklara sahip olmanızı sağlayarak kurulum hatalarını önlemeye ve sistem kararlılığını korumaya yardımcı olur.
sudo apt update
sudo apt upgrade
2. Sisteminizi başarıyla güncelledikten sonra snaps arka plan programını yüklemek için aşağıdaki komutu çalıştırın. Snapd arka plan programı, bir Linux sistemindeki Snap paketlerinin işlevselliğini yöneten bir arka plan hizmetidir. Snap paket yönetim sisteminin ayrılmaz bir parçası olup kullanıcıların Snap paketlerini sorunsuz bir şekilde kurmasına, güncellemesine ve yönetmesine olanak tanır.
sudo apt install snapd
Yukarıdaki görüntüden snapd’in sistemimizde zaten kurulu olduğunu görebilirsiniz.
3. Snapd arka plan programını başarıyla yükledikten sonra, aşağıdaki komutu kullanarak WebStorm’u Ubuntu’ya yükleyebilirsiniz.
sudo snap install webstorm –classic
WebStorm’un büyük bir paket olduğunu ve internet bağlantınıza bağlı olarak indirme işleminin biraz zaman alabileceğini lütfen unutmayın. Lütfen sabırlı olun.
Başarılı bir kurulumun ardından WebStorm’u aşağıdaki uygulamalar menüsünden başlatabilirsiniz.
Yöntem 2: Ubuntu’da WebStorm’un Manuel Kurulumu: JetBrains Sitesinden İndirme
WebStorm snap paketini kurmak istemiyorsanız JetBrains’in web sitesinden manuel olarak kurabilirsiniz. Kurulum süreci daha uzun olsa da bazı faydaları da vardır.
- JetBrains’in web sitesinden WebStorm’un en son sürümüne doğrudan erişim sağlar.
- Kurulum süreci ve konumu üzerinde daha fazla kontrol sunar.
- İhtiyaçlarınıza göre özelleştirilebilir ve yapılandırılabilir.
Aşağıdaki adımları takip et.
1. İlk adım kurulum dosyasını indirmektir. Bir web tarayıcısı açın ve JetBrains web sitesine gidin: https://www.jetbrains.com/webstorm/. İndirme düğmesinin yanında .tar.gz (Linux) veya .tar.gz (Linux ARM64) seçeneğini seçmenizi sağlayan bir açılır menü göreceksiniz.
- .tar.gz (Linux) standart bir x86_64 Linux sistemi içindir. Bu, en yaygın Linux sistemi türüdür ve çoğu insanın kullandığı şeydir.
- .tar.gz (Linux ARM64), ARM64 mimarisini kullanan daha yeni bir Linux sistemi türü içindir. Bu mimari, özellikle sunucular ve gömülü cihazlar için daha popüler hale geliyor.
Sisteminizin hangi mimariyi kullandığından emin değilseniz sistem bilgilerini kontrol edebilirsiniz. Linux sisteminde aşağıdaki komutu çalıştırabilirsiniz:
uname -m
Bu, sisteminizin mimarisinin çıktısını alacaktır. “x86_64” yazıyorsa .tar.gz (Linux) dosyasını indirmelisiniz. “aarch64” yazıyorsa .tar.gz (Linux ARM64) dosyasını indirmelisiniz.
Bizim durumumuzda x86_64 sistem mimarisini kullanıyoruz. Bu nedenle .tar.gz (Linux) dosyasını aşağıda gösterildiği gibi indireceğiz.
2. WebStorm kurulum dosyasını başarıyla indirdikten sonra uygulamalar menüsünden Terminal’i başlatın veya Ctrl + Alt + T klavye kısayolunu kullanın.
3. İndirilen dosyanın bulunduğu dizine gitmek için cd komutunu kullanın. Örneğin dosyamız İndirme dizininde bulunuyor.
cd ~/Downloads
4. İndirilen dosyanın tar.gz dosya uzantısı vardır. Bu, sıkıştırıldığı anlamına gelir.
İndirilen arşivi çıkarmak için tar komutunu kullanın. WebStorm-2023.2.tar.gz dosyasını indirdiğiniz gerçek dosya adıyla değiştirin:
tar -xzf WebStorm-2023.2.tar.gz
5. Başarılı bir çıkarma işleminden sonra çalışma dizininizde yeni bir dizinin oluşturulduğunu göreceksiniz. Yeni çıkartılan bu klasörü /opt dizinine taşıyın.
sudo mv WebStorm-232.8660.143 /opt
Bu kadar! Başarıyla yüklediniz. Ancak yapmanız gereken bir şey daha var. WebStorm’a Uygulamalar menüsünden erişilebilmesini sağlamak için bir masaüstü girişi oluşturun.
6. Bunu yapmak için /usr/share/applications dizininde bir .desktop dosyası oluşturun. webstorm.desktop adında bir dosya oluşturmak için aşağıdaki komutu çalıştırın.
sudo nano /usr/share/applications/webstorm.desktop
Aşağıdaki içeriği dosyaya ekleyin.İpucu: Lütfen dosya adlarını buna göre ayarlamayı unutmayın.,
[Desktop Entry]Name=WebStorm
Exec=/opt/WebStorm-232.8660.143/bin/webstorm.sh
Terminal=false
Type=Application
Icon=/opt/WebStorm-232.8660.143/bin/webstorm.png
Categories=Development;IDE;
Metin düzenleyiciyi kaydedin ve çıkın (nano’da Ctrl + X, ardından Y ve Enter tuşlarına basın).
7. Daha sonra webstorm.sh betiği için yürütülebilir izinleri ayarlamanız gerekir. Aşağıdaki komutu kullanın.
sudo chmod +x /opt/WebStorm-232.8660.143/bin/webstorm.sh
Bu kadar! WebStorm’u Ubuntu sisteminize başarıyla yüklediniz.
8. Artık WebStorm’u Uygulamalar menüsünden veya terminalde aşağıdaki komutu çalıştırarak başlatabilirsiniz:
/opt/WebStorm-232.8660.143/bin/webstorm.sh
Ubuntu’da WebStorm’u kullanma
WebStorm’u başlattığınızda aşağıdaki görüntüdeki gibi bir Kullanıcı Sözleşmesi penceresi göreceksiniz. Alttaki onay kutusunu işaretleyin ve “Devam Et”i tıklayın.
Daha sonra aktivasyon ekranını göreceksiniz. WebStorm’un ücretsiz olmadığını, ticari bir ürün olduğunu unutmayın. Tüm özelliklerini kullanmak için 30 günlük ücretsiz deneme süresi sunar. Deneme süresi sona erdikten sonra WebStorm’u kullanmaya devam etmek için bir lisans satın almanız gerekir.
Aktivasyon ekranında iki seçenek göreceksiniz.
- Activate WebStorm
- Start trial
Bu yazı için “Deneme” sürümünü kullanacağız. Ancak aktivasyon kodunuz varsa “WebStorm’u Etkinleştir” seçeneğini seçin.
Not: Etkinleştirme kodunuz varsa veya Deneme sürümünü kullanmayı tercih ediyorsanız JetBrains hesabınızı kullanarak oturum açın. Henüz bir hesabınız yoksa “JetBrains Hesabında Oturum Açın” veya “Kayıt Ol” seçeneğine tıklayın.
İşiniz bittiğinde, aşağıdaki resimdeki gibi ana WebStorm penceresini göreceksiniz.
WebStorm Kullanıcı Arayüzünde Gezinme
WebStorm kullanıcı arayüzü sezgiseldir ve gezinmesi kolaydır. Solda bir kenar çubuğu ve çeşitli seçeneklere sahip bir orta bölme bulunur.
Kenar çubuğunda aşağıdaki seçenekler bulunur:
Projects: “Projeler” bölümü mevcut projelerinizin düzenli bir görünümünü sağlar. Farklı kodlama projelerinizi verimli bir şekilde yönetmenize ve bunlar arasında gezinmenize yardımcı olur. Projeler arasında kolayca geçiş yapabilir ve dosyalarına erişebilirsiniz; bu da birden fazla görev üzerinde karışıklık yaşamadan çalışmayı kolaylaştırır.
Remote Development (beta): Şu anda beta sürümünde olan “Uzaktan Geliştirme” seçeneği, uzak sunucularda veya sanal makinelerde bulunan projeler üzerinde çalışmanıza olanak tanır. Projeyi yerel cihazınızdaymış gibi kodlamanıza olanak tanır, işbirliğini geliştirir ve farklı ortamlardaki kaynaklardan yararlanmanıza olanak tanır.
Customize: “Özelleştir” bölümü, WebStorm’u tercihlerinize göre uyarlamanıza olanak tanır. Ayarları, temaları, tuş atamalarını ve daha fazlasını düzenleyerek kodlama deneyiminizi kişiselleştirebilirsiniz. Bu esneklik, çalışma alanınızın rahat olmasını ve iş akışınızla uyumlu olmasını sağlar.
Plugins: “Eklentiler” seçeneği, ekstra özellikler veya entegrasyonlar ekleyerek WebStorm’un işlevselliğini genişletir. Dil desteği, sürüm kontrolü veya proje yönetimi gibi özel ihtiyaçlarınızı karşılayan eklentiler yükleyerek kodlama yeteneklerinizi geliştirebilir ve sonuçta geliştirme sürecinizi optimize edebilirsiniz.
Learn: “Öğren” bölümü, becerilerinizi geliştirmenize ve WebStorm konusunda daha yetkin olmanıza yardımcı olan eğitim kaynaklarına ve öğreticilere erişim sağlar. Doğrudan IDE içinde değerli bir öğrenme merkezi sunarak bilginizi geliştirmenizi ve en iyi uygulamalarla güncel kalmanızı kolaylaştırır.
WebStorm’daki orta bölme, kodlama projeleriniz için bir ağ geçidi görevi görür.
New Project: “Yeni Proje” seçeneği, sıfırdan yeni bir kodlama projesi oluşturmanıza olanak tanır. Proje ayarlarını tanımlayabilir, bir şablon seçebilir ve gerekli dosya ve klasörleri ayarlayarak proje oluşturmanın ilk aşamalarını kolaylaştırabilirsiniz.
Open: “Aç” özelliği, mevcut projelere erişmenizi ve bunlar üzerinde çalışmanızı sağlar. Belirli bir proje dizinine gidebilir ve kodlamaya kaldığınız yerden hızla devam ederek görevler arasında sorunsuz bir geçiş sağlayabilirsiniz.
Get from VCS: “VCS’den yükleme”, Git gibi sürüm kontrol sistemlerinin entegre edilmesine yardımcı olur. Bir sürüm denetim hizmetinden bir proje deposunu klonlamanıza olanak tanıyarak, işbirliğine dayalı ve organize geliştirme için projenin kaynak koduna ve revizyon geçmişine doğrudan erişmenizi sağlar.
WebStorm’da yeni bir proje oluşturma
Aşağıdaki adımları izleyin ve yeni bir WebStorm projesine nasıl başlayacağınızı öğrenin. Bu yazı için yeni bir ReactJS projesi oluşturmaya bakacağız. Ancak, prosedür Angular, NextJS gibi diğer uygulamalar için farklı olmamalıdır.
1. WebStorm’un Hoş Geldiniz ekranının orta bölmesinde “New Project” seçeneğine tıklayın. Bu, “New Project” iletişim kutusunu açacaktır.
2. “New Project” iletişim kutusunda, Angular, NextJS, NodeJS, ReactNative, vb. dahil olmak üzere proje türlerinin bir listesini göreceksiniz. “React” veya “React App” i arayın (tam ad WebStorm sürümünüze göre değişebilir). Bu seçeneği belirleyin.
3. “…” düğmesine basarak “Konum” alanının yanındadır. React proje klasörünüzü oluşturmak istediğiniz dizine gidin ve ardından “Tamam”a tıklayın. “Ad” alanına projeniz için bir ad girin. Bu, proje dosyalarınızın depolanacağı dizin adı olacaktır.
4. Proje bağımlılıklarını yönetmek için tercih ettiğiniz paket yöneticisini seçin. “npm” ve “iplik” arasında seçim yapabilirsiniz. Emin değilseniz, “npm” yaygın bir seçimdir.
5. Proje ayarlarınızı yapılandırdıktan sonra “Oluştur” düğmesine tıklayın. WebStorm proje dizinini oluşturacak ve React projeniz için başlangıç dosyalarını ayarlayacaktır. WebStorm projenizi otomatik olarak kuracak ve gerekli bağımlılıkları kuracaktır. Bu işlem birkaç dakika sürebilir, özellikle de ilk kez bir React projesi oluşturuyorsanız.
6. Kurulum tamamlandıktan sonra yeni React projeniz hazırdır. Proje dosyalarını düzenleyicide açarak ve dizin yapısını keşfederek kodlamaya başlayabilirsiniz.
Yazının orijinalini buradan okuyabilirsiniz.
Kariyerime 26 yıl önce başladım. Windows ve Linux sistemlerinin kurulumu, yapılandırılması, yönetimi ve bakımı dahil olmak üzere birden fazla sistem üzerinde uzmanlaştım.
Açık kaynak dünyasındaki en son gelişmelerden haberdar olmaktan ve Linux hakkındaki en son araçları, özellikleri ve hizmetleri denemekten hoşlanıyorum.
Son 6 yıldır sistem ve ağ yöneticisi olarak görev yapıyorum ayrıca Pardus Dönüşüm Projesini yönetiyorum ve Pardus İşletim Sisteminin yaygınlaşması adına uğraş gösteriyorum.
Boş zamanlarımda açık kaynaklı uygulamaların Türkçe çevirisine katılıyorum ve The Document Foundation üyesiyim.