Daha Hızlı Proje Geliştir

Merhaba, okuyucu. Daha hızlı kod yazabilmeniz ve projeler geliştirebilmeniz için keşke önceden biliyor olsaydım diyeceğiniz tüyolar. Örneğin, kod yazarken gözünüz ağrıyabilir. Bunun için göz almayan temalar kullanın.

Daha detaylı bilgiler alt başlıklarda içerir.

Visual Studio Code Kullanın

VS Code kullanarak kodlarınızı daha hızlı yazarken ve bir yandan daha kontrollü devam edin. Kod yazarak projeler geliştirmek kadar kullandığınız yazı editörü de o kadar önemlidir. Yazı editörleri kodlarınızı daha hızlı yazmanızı sağlar ve Bootstrap gibi çerçevelerin desteğini sağlar. Bunun yanı sıra göz almayan temalar ve kodlarınızı daha hızlı kontrol edebilmenizi sağlamaktadır.

Bkz: https://code.visualstudio.com

For those of you who didn't like my Light Theme setup...: vscode

Live Server Eklentisini Kullanın

Eğer web sitesi geliştiriyorsanız her yaptığınız değişiklikte sayfayı yenilemelisiniz. Bu problemi giderebilmek için Live Share kullanın ve kodda yaptığınız değişikliği algıladığı anda sayfayı yenilesin. Her yaptığınız değişiklikte F5 tuşuna basmaya gerek kalmaz ve daha hızlı kodlar yazabilmenizi sağlar.

Bkz: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live Server Demo VSCode

Göz Almayan Temalar Kullanın

Eğer bir yazılımcı veya tasarımcıysanız bilgisayar başında günlerce uğraşıyor olabilirsiniz. Bilgisayarda durduğunuz süre boyunca gözünüz ağrıyorsa bu sizin için büyük problemlere yol açabilir. Bunu önleyebilmek için kod yazarken veya tasarım yaparken karanlık(göz yormayan) ekrana bakmaya çalışın. Karanlık ekran gözünüzü daha az yorarken daha net bakabilmenizi sağlar.

Bkz: https://marketplace.visualstudio.com/items?itemName=mskelton.one-dark-theme

Code example

Kodlarınızda IntelliSense Kullanın

Kod yazarken dosyalarda nelerin olduğunu görmek istersiniz. Örneğin, bt yazdığınızda btn-primary veya contain yazdığınızda container çıkmasını isteyebilirsiniz. Kısacası kodlarınızı tamamlamasını istersiniz. Proje geliştirirken binlerce satır kod yazarsınız ve bu karmaşaya yol açabilir. Bu yüzden dolayı IntelliSense kullanın.

Bkz: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Bu görsel boş bir alt niteliğe sahip; dosya adı 5crMfTj.gif

Debugger Kullanın

Proje geliştirirken birden fazla işlemi kontrol edebilmek veya hatanızı görebilmeniz için debugger kullanın. Debugger ile kod satırınızı işaretleyin ve program o kod satırına geldiğinde size neler olduğu hakkında bilgiler verecek. Örneğin, butona bastığınızda hangi fonksiyonların çalıştığını ve ne işe yaradığını öğrenmek isterseniz debugger ile test edebilirsiniz. Eğer web site geliştirirken debugger kullanmak isterseniz aşağıdaki bağlantı adresinden ulaşabilirsiniz.

Bkz: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Demo

Bootstrap, Font Awesome ve Snippet Desteği

Kod yazarken snippet baya önemli bir konudur. En kolay örneklerden bir tanesi bir harfle projenizi kurabilirsiniz ve 2-3 dakikanızı önleyebilirsiniz. Ben yeni proje oluştururken çok üşenirdim ve kurmak için bir klasör oluşturmuştum onu kopyalayıp, yapıştırıyordum. Ta ki bu eklentiyi bulana kadar. Bu eklenti benim işlerimi çok kolaylaştırdı. Artık tek harfle projeyi kurabiliyorum ve daha hızlı kodlar yazabiliyorum.

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

Plugin in action

Otomatik Etiket Düzenleyici

Tek bir div içerisinde 100’ü aşkın kod satırı olabilir. Örneğin 125. satırda bulunan <div> etiketini değiştirip <span> yapacaksınız. Ama kapandığı kısmı bulmanız biraz uğraştırıcı olabilir veya daha kısasını bilmiyor olabilirsiniz. Auto Rename Tag eklentisi ile açılıp, kapanan etiketleri otomatik düzenliyor. <div> etiketini <span> yaptığınızda otomatik kapandığı etiketi de düzenliyor.

Bkz: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Usage
5 1 vote
Puanla
guest
0 Yorum
Inline Feedbacks
View all comments