Uzman Kullanıcılar için VSCode İpuçları ve Püf Noktaları

Neden Visual Studio Yetkili Kullanıcısı Olmak İstiyorum?

Güçlü bir kullanıcı olmak, önde olmanın başka bir yoludur. Geliştiriciler genellikle nasıl oyunlarının zirvesinde kaldıklarından ve sürekli olarak nasıl yeni şeyler öğrendiklerinden ve becerilerini geliştirmeye devam ettiklerinden bahseder. İşverenler, kendilerini beceri setlerini genişletmeye adamış yetenekleri tercih etme eğiliminde olduklarından, bu sıkça sorulan bir mülakat sorusudur. IDE'nizde ve bilgisayarınızda uzmanlaşmak, profesyonel gelişiminize yapılacak en iyi yatırımlardan biri olabilir.

Geliştiriciler her zaman kendilerini işlerinde daha iyi hale getirecek yeni bir blog ararlar. Hangi IDE'yi kullanırsanız kullanın, muhtemelen bir blogu vardır: Abone ol!

Diğer bir sebep ise zamandan tasarruf sağlamasıdır. İş akışınızı iyileştirmeye zaman ayırmak, daha yüksek üretkenlik veya eğlenmek için daha fazla zaman olarak karşılığını verebilir. Bugün, Visual Studio ve VSCode'a daha yakından bakacağız ve güçlü bir kullanıcı olma noktasına kadar becerilerinizi geliştirmenin yollarını tartışacağız.

Nasıl VSCode Uzman Kullanıcısı Olabilirim?

Sıradan bir kullanıcıyı uzman bir kullanıcıdan ayıran şey şudur:

• IDE'niz hakkında kapsamlı bilgi: VSCode'un mükemmel belgeleri var, okuyun!
• Özelleştirme: Uzman kullanıcılar, iş akışlarını kendi özel ihtiyaçlarına göre uyarlar.
• Tüm sıkıcı ve tekrarlayan görevleri otomatikleştirin .
• İş akışınızı sürekli olarak iyileştirin ve IDE'nizin gelişimini takip edin.

Bu yazıda, bu noktaların her birini kendim nasıl ele aldığımı açıklamak ve bunu kendi başınıza yapacak bilgiyle sizi donatmak niyetindeyim. Yaptığım şey mutlaka işinize yaramayacak, en azından tamamen değil. İnsanlar farklı ortamlarda ve projelerde çalışırlar (benim için çoğunlukla Windows'ta React.js ve TypeScript ile çalışmaktır), ancak genel yaklaşım herkes için geçerlidir.

Jest ile test etme

Her seferinde bir test yazıyorum, bu da her seferinde bir test çalıştırmanın bir yoluna ihtiyacım olduğu anlamına geliyor. Ancak, yerel normal ifade çözümü oldukça karmaşıktır. Bu yüzden Jest Runner kullanıyorum. Bu kullanışlı uzantı, bireysel süitleri veya testleri yürütmenize veya hata ayıklamanıza olanak tanır.

Aşağıdaki video, tek yapmanız gereken test adına sağ tıklayıp çalıştırmak için içerik menüsünü kullanmak olduğunu gösteriyor.

Pact ile Test Etme

Bir sözleşme testi yazmanın en çok zaman alan kısmı tartışmalı bir şekilde eşleşmedir. Bunu, tekrarlayan eylemleri otomatikleştirmek için faydalı snippet'ler oluşturarak çözdüm. Bunlar benim yaptıklarımdan bazıları, onları kullanmaktan çekinmeyin (yani, bunları VSCode'un /snippets/typescript.json içine kopyalayıp yapıştırın).

Aşağıdaki video, bu parçacıkların nasıl kullanılacağını gösterir:

1. Aynı türden tüm oluşumları seçin, yani tüm dizeyi, zamanı ve diğer değerleri seçin.
2. Önceden tanımlanmış tuş bağlamayı kullanın veya Parçacık Ekle'yi çağırın ve ilgili parçacığı seçin ya da kullanmak istediğiniz parçacığın önekini yazmaya başlayın.

Git

Çoğu geliştirici Git ve GitHub'ı günlük olarak kullanır, ben de öyle. Ancak, terminal veya github.com'u kullanmaktan kaçınmaya çalışıyorum.

GitHub Çekme İstekleri ve Sorunları, PR'leri VSCode rahatlığında açmama, düzenlememe ve incelememe izin veriyor. IDE'mi, kodu gözden geçirmek için GitHub'ın web veya masaüstü uygulamalarından daha iyi bir yer olarak görüyorum. Bazı geliştiriciler aynı fikirde olmayabilir, ancak bunu IDE'mde yapmanın tutarlılığını ve rahatlığını takdir ediyorum.

Git çok şey yapabilir, ancak komutlarından çok azını ezberledim. Ama neden ilk etapta bir şey ezberlesin? Rutininizin çok fazla ayrıntılı yönünü ezberlemek aşırı üretken değildir.

GitLens, parmaklarınızın ucunda çok sayıda şaşırtıcı özellik sunar. Bu sayede Git'i kullanmak için nadiren terminale ulaşmam gerekiyor.

Terminal Özelleştirme

Kullandığınız işletim sistemi ne olursa olsun, varsayılan terminalden daha iyisini yapabilirsiniz. Windows Terminal + cmder kullanıyorum. Unix kullanıcısıysanız iTerm (macOS) veya Oh My Zsh (Linux ve macOS) konusuna bakın. Bunları VSCode ile entegre ettim ve bana komut yazmaktan zaman kazandıran birçok takma ad (kısayol) ekledim.

Örneğin:

• ys = yarn start - sadece iki karakterle bir uygulama başlatmama yardımcı oluyor
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - sağlanan dizini siler ve bittiğinde bir başarı mesajı gösterir
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - master dışındaki tüm yerel dalları siler

Arada bir burada birkaç karakter kaydetmek aptalca görünebilir, ancak bu zaman kazandıran özellikler uzun vadede eklenir. Takma adlar yapmanın ikincil bir avantajını buluyorum - onları yazmaya daha az zaman harcamak odaklanmama ve düşünce trenimi kaybetmememe yardımcı oluyor çünkü komutu nasıl çağıracağımı hatırlamaya çalışmıyorum.

Kod Oluşturma

Yeni bir bileşen, sayfa vb. oluşturmak sık yaptığım bir şeydir ve çoğu okuyucunun bileceği gibi oldukça basittir. Ancak yeni bir klasör oluşturmak ve içindeki dosyaları başlatmak sıkıcı olabilir. Böylece, bu işlemi otomatikleştirdim.

Aşağıdaki video, kullanımda olan Supercharge React'i göstermektedir. New Component kullanarak yeni bileşenin adını ve konumunu belirleyebilirim. Uzantı daha sonra bir klasör oluşturan ve bu yeni bileşeni başlatan bir komut dosyası çalıştırır.

İyileştirmek

VSCode'un güçlü IntelliSense'i vardır ve çoğu zaman onu kullanmayı düşünmeniz gerekmez. Ancak, önerilere göz atarken, mevcut seçeneklerle ilgili belgeleri görmek için Ctrl+Boşluk tuşlarına basabilirsiniz.

IntelliSense ayrıca iş akışınıza ve kişisel tercihlerinize uyacak şekilde özelleştirilebilir.

Klavye kısayolları

Eminim Ctrl+S ve Ctrl+F gibi kısayollar kullanıyorsunuzdur. Hepsi iyi belgelenmiştir ve VSCode'un çok çeşitli kısayollarına çok aşina değilseniz, bunu değiştirmenizi ve ustalaşmak için ekstra yol kat etmenizi öneririm. Belirli bir ciltleme çok hantal mı? Çağırdığınız bir komutun yazılması genellikle çok mu uzun sürüyor? Kısayollar oluşturmak için VSCode'un klavye düzenleyicisini açın.

Belirli bir tuş kombinasyonuna bir komutun atanıp atanmadığını merak ediyorsanız, arama çubuğunda tuş vuruşlarını kaydedebileceğiniz klavye düğmesini tıklayın. Daha sonra hangi/if komutlarının bunlarla ilişkilendirildiğini göreceksiniz.

Fare Kısayolları

Geliştiricilere genellikle üretken olmak için farelerinden nefret etmeyi ve klavyelerini sevmeyi öğrenmeleri gerektiği söylenir. Küçük, yoğun dosyalar üzerinde çalışıyorsanız bu geçerli olabilir. Ancak, otomatik kod biçimlendirme ve yüzlerce kod satırı içeren dosyalar çağında, bunun kuraldan çok bir istisna olduğunu söyleyebilirim.

Faremi yalnızca aktif olarak kullanmakla kalmıyorum, Logitech Options'ı kullanarak onu iş akışıma uyacak şekilde özelleştirdim. VSCode'da belirli komutları gerçekleştirmek için faremdeki özel tuşları programladım.

Farenize, yalnızca imleci hareket ettirip tıklamaktan biraz daha fazlasını yapmayı "öğretebilirsiniz":

1. Sağ üst menüden VSCode'u seçin.
2. Özelleştirmek istediğiniz düğmeye tıklayın.
3. Soldaki eylemler listesinden Tuş ataması'nı seçin.
4. VSCode'da önceden tanımlanmış bir kısayol girin.

Yedekleme ve Senkronizasyon Ayarları

Yedekleyemezseniz ve tekrar ihtiyacınız olduğunda yeniden kullanamazsanız, hiçbir şeyi özelleştirmenin pek bir anlamı yoktur.

Yerel çözüm şu anda yalnızca içerdekiler tarafından kullanılabilir. Ancak Settings Sync, kod ayarlarınızı Gist olarak kaydetmenize yardımcı olur ve iş akışınızı birden çok makine arasında senkronize etmenize olanak tanır. Yapılandırmak için bir GitHub belirtecine ihtiyacınız var, ancak daha sonra ayarlarınızı yüklemek ve indirmek için tek bir komut çalıştırmanız yeterli.

Önerilen VSCode Uzantıları

Zaten birkaç uzantıdan bahsettim ve onları nasıl kullandığımı açıkladım. İşte bazı dikkate değer sözler:

• Surround: Seçilen bazı kodları bir ok işlevine veya belki bir try-catch bloğuna sarmanız mı gerekiyor? Bu uzantı sizin için yapacak!
• Node_modules'ı arayın: Performans artışı için node_modules VSCode'un gezgininden çıkarmamış olsanız bile, bu klasör o kadar büyük ki gezinmek imkansız. Bu uzantı, sonsuza kadar gezinmek yerine, aradığınızı aramanıza olanak tanır.
• Glean ve React Refactor, JSX dosyalarınız için bazı yararlı yeniden düzenleme araçları sağlar.
• Otomatik Kapatma Etiketi, HTML/JSX/TSX dosyaları için kapanış etiketini otomatik olarak ekler.
• Dosya Araçları: Dosyaları ve dizinleri oluşturmanın, çoğaltmanın, taşımanın, yeniden adlandırmanın ve silmenin uygun bir yolu. Ayrıca özelleştirilebilir.
• JavaScript Booster, bazı yaygın yeniden düzenleme eylemlerini otomatikleştirir.

Özet

Normal bir kullanıcı olmayın. Bunun yerine güçlü bir kullanıcı olun. Daima diğerlerinden bir adım daha ileri gidin ve sizi nereye götürdüğünü görün. Her zaman verimsizlikleri not edin ve bunları azaltmaya çalışın.

Buna benim çözümüm çoğu geliştiriciye aşina olmalıdır: bir Kanban board . Ne zaman beni yavaşlatan bir şey fark etsem, onu Yapılacaklar olarak yazarım. Ne zaman boş vaktim olsa, buna bir çözüm bulmaya çalışırım.

Bu gönderiyi bunaltıcı bulduysanız ve nereden başlayacağınızı bilmiyorsanız , belgeleri okuyun, size en iyi yatırım getirisini verecektir ! Resmi belgeleri okumanın sıkıcı geldiğini biliyorum, ama söz veriyorum uzun vadede meyvesini verecek. Size yalnızca nasıl daha üretken olunacağını öğretmekle kalmayacak, aynı zamanda belgelerin nasıl yazılması gerektiğini de öğreneceksiniz.

Kolaylaştırmak için, belgelerin okunması gereken bölümlerinin bu listesini derledim:

• İpuçları ve Püf Noktaları: Bazıları açıktır ve muhtemelen zaten biliyorsunuzdur, ancak bilmediğiniz bir şey bulacağınızı garanti edebilirim.
• Düzenleme Hack'leri: Bu düzenleme tüyoları inanılmaz derecede güçlüdür ve bunları öğrenmek size günlük olarak fayda sağlayacaktır.
• Kodu Küçült/Genişlet: Başka bir geliştiriciyle eşleşirken onları etkilemek için bu kısayolu deneyin!
• Tuş Bağlamaları: Tuş bağlamaların nasıl çalıştığını ve nasıl özelleştirileceğini öğrenin; bu, IDE'nizde uzmanlaşmanın temel taşlarından biridir.
• Desteklenen yüzlerce programlama dili: VSCode'un seçtiğiniz dil için hangi belirli özelliklere sahip olduğunu öğrenin.