Visual Studio Code’da Node.js uygulaması oluşturma
Bu ünitede şunların nasıl yapılacağını anlayacaksınız:
- Visual Studio Code ve Cosmos DB kullanarak bir JavaScript uygulaması oluşturun.
- Kod yazma konusunda yardımcı olması için intellisense'i kullanın.
- Visual Studio Code'un içinden Node.js kullanarak uygulamayı çalıştırın.
- Kodunuzda adım adım ilerleyip kodunuz çalışırken değişkenleri incelemek için tümleşik hata ayıklayıcıyı kullanın.
Node.js için JavaScript uygulaması oluşturma
Bir terminal penceresi kullanarak Visual Studio Code içinden Node.js için yeni bir JavaScript uygulaması oluşturabilirsiniz. npm init -y komutu, uygulama klasöründe package.json adlı yeni bir dosya oluşturur. Bu dosya, Node.js çalışma zamanı için uygulamanızı açıklamak için kullandığınız meta verileri içerir.
Ardından uygulama kodunuz için yeni bir dosya oluşturmanız gerekir. Dosyayı kaydederken, dosyaya bir .js uzantısı (JavaScript için) verdiğinizden emin olun. Artık JavaScript kodunuzu yazmaya başlamaya hazırsınız demektir.
Kodunuzu yazmanıza yardımcı olması için IntelliSense kullanın
Siz kodunuzu yazarken IntelliSense, tür denetimi ve kod tamamlama işlemleri gerçekleştirebilir. Örneğin, siz işlevler oluştururken, türleri tanımlarken veya bir modülü JavaScript dosyasına içeri aktarırken, eklediğiniz veya içeri aktardığınız öğeler IntelliSense tarafından kullanılabilir hale gelir.
Siz yazdıkça IntelliSense, geçerli içeriğe uygun önerileri göstermek için tür denetimi ve tür çıkarımı birleşimini kullanır. Tür çıkarımı, siz kodunuzu yazdıkça IntelliSense’in geçerli kod tamamlama önerileri sunmasını sağlar:
Tür denetimi, IntelliSense’in bir işlev çağrısının alabileceği parametreleri göstermesini sağlar ve her bir işlev için sağlayacağınız ifadelerin tür denetimini gerçekleştirir:
Visual Studio Code’da kullanılabilir olan diğer IntelliSense özellikleri şunlardır:
- Ulaşılamayan kodu ve kullanılmayan değişkenleri algılama. Hiçbir zaman çalıştırılamayan deyimler ve hiçbir zaman kullanılmayan değişkenler, düzenleyicide soluk şekilde gösterilir.
- Tanımlara ve başvurulara göz atma. Göz atma özelliği, başka bir dosyada olsa bile bir nesne veya işlevin tanımını hızlı şekilde görüntülemenizi sağlar. Bir değişkene veya işleve sağ tıklayın ve Tanıma Göz At veya Başvurulara Göz Atın seçeneğini belirleyin. Tanım veya başvurular açılır pencerede görüntülenir.
- Bir değişkene, işleve veya tür tanımına gidin. Bu özellik doğrudan kodunuzdaki bir değişkenin, işlevin veya türün tanımına gitmenize olanak sağlar. Bir öğenin tanımını değiştirmeniz veya bir işlevi değiştirmeniz gerekiyorsa bu faydalıdır. Değişkeninize veya türünüze başvuran ya da işlevinizi çağıran koda sağ tıklayın. Tanıma Git veya Tür Tanımına Git seçeneğini belirleyin.
- Kodunuzun olası yeniden düzenlemesini önerme. Bir öğe altındaki üç nokta (...), IntelliSense’in bir veya daha fazla önerisinin olduğu alanları belirtir. Önerileri görüntülemek için üç noktayı seçin. Öneriyi uygulamak için Hızlı Düzeltme’yi seçin.
Node.js uygulamasını çalıştırma ve hatalarını ayıklama
Visual Studio Code’dan Node.js uygulaması çalıştırmanın en kolay yolu, bir terminal penceresinden node komutunu kullanmaktır. Örneğin, kodu index.js adlı bir dosyada çalıştırmak için komutunu çalıştırınnode index.js.
Bir terminal penceresinden yerel Node.js hata ayıklayıcısını (örneğin, node inspect index) kullanabilirsiniz; ancak Visual Studio Code, Node.js uygulamalarını adım adım izlemek ve bu uygulamaların hatalarını ayıklamak için gelişmiş bir ortam sunar.
launch.json dosyasında hata ayıklayıcıyı yapılandırma
Visual Studio Code hata ayıklayıcısını kullanmadan önce yapılandırmanız gerekir. Hata ayıklayıcısı yapılandırma ayarlarını düzenlemek için Çalıştır menüsünde Yapılandırma ekle'yi seçin. Hata ayıklayıcı seç seçeneğinde Node.js'yi seçin. Dosyada ./.vscode/launch.json yeni yapılandırmanız görüntülenir.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/index.js",
}
]
}
Bu Contoso uygulaması için, çalıştırılacak birkaç kod dosyasıyla birkaç ek özellik ekleyeceğiz. Program özellik dosya adını olarak ${file}değiştirin. Bu, şu anda etkin olan JavaScript dosyasında hata ayıklamanıza olanak tanır. Parametreleri uygulamaya geçirmeniz gerektiğinde args özelliğini ekleyin. Bu değerler Node.js çalışma zamanında bulunan process.argv özelliğinden kullanılabilir.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
// ${file} is replaced with active file's name
"program": "${workspaceFolder}/${file}",
// these values are available as process.argv
"args": ["abc", "1"],
}
]
}
Kesme noktaları ayarlama
Hata ayıklamaya başlamadan önce uygulama kodunuzda bir kesme noktası ayarlamanız gerekir. Bunu yapmak için, yürütmeyi duraklatmak istediğiniz deyimin sol kenar boşluğuna tıklayın. Kırmızı bir nokta görüntülenir.
Hata ayıklamayı başlatma
Hata ayıklamayı başlatmak için Çalıştır menüsünde Hata Ayıklamayı Başlat'ı seçin veya F5 hata ayıklayıcısını başlatın. Dış terminal kullanıyorsanız yeni bir terminal penceresi görüntülenir. Hata ayıklayıcısı çıkışı, Visual Studio Code'un Çıkış penceresinde görüntülenir.
Hata ayıklayıcı uygulamanızda bir kesme noktasına ulaştığında yürütme duraklatılır ve kesme noktası deyimi vurgulanır. Çalıştır ve hata ayıklama gezginindeki Windows, yerel ve genel değişkenlerin ve çağrı yığınının değerlerini incelemenize ve ayarlamanıza olanak tanır. Ayrıca, yürütme devam ederken değerlendirilen ve görüntülenen watch ifadeleri de ekleyebilirsiniz.
| Kalem | Açıklama |
|---|---|
| 1 - Değişkenler | Yerel ve genel kapsamdaki tüm değişkenler. |
| 2- İzle | Yürütme sırasında izlemek için tüm değişkenleri ekleyin. |
| 3- Çağrı yığını | Uygulamanın geçerli noktadaki yürütme yığını. |
| 4- Kesme Noktaları | Uygulamada ayarlanan tüm kesme noktaları. |
| 5- Hata ayıklama araç çubuğu | Bu araç çubuğu, kodunuzda tek adım ilerlemenize olanak sağlayan komutlar içerir. Bir deyim, işlev çağrısı içeriyorsa bu işleve adım atabilir veya bu işlevden dışarı adım atabilirsiniz. Dışarı adım komutu, işlev tamamlanıncaya kadar yürütmeye devam eder. Ayrıca, hata ayıklayıcı başka bir kesme noktasına ulaşıncaya veya uygulama bitinceye kadar uygulamayı çalıştırmaya devam edebilirsiniz. |
| 6 - Hata ayıklama konsolu | Konsol deyimi değerlerine bakın. |
Sonraki birkaç alıştırmada JavaScript kodu eklerken, neyin yanlış olduğunu belirlemek için kodda hata ayıklamanız gerekebilir. Gerektiğinde bu üniteye geri dönün.