Visual Studio Kodunda GitHub Kod Alanları ile Kod Olarak IDE

Geliştiriciler için en zor şeylerden biri, halihazırda devam etmekte olan bir projeye başlamaktır.

Genellikle, yeni bir projenin gereksinimlerinin bizi SDK'ların sürümlerini ve çevrede hata ayıklamak için yerel olarak kurduğumuz araçları değiştirmeye zorladığı görülür ve bu da her şey beklendiği gibi çalışana kadar günlerimizi kaybetmemize neden olur.

Beta veya önizleme aşamasında olan sürümleri düşünürsek, işler daha da karmaşıklaşıyor. Bunun olmasını önlemek için, uygulamanızın ihtiyaç duyduğu geliştirme ortamını bir kapsayıcı içinde oluşturmanıza olanak tanıyan, aynı zamanda her yerde ve herhangi bir cihazdan geliştirmeyi mümkün kılan GitHub Kod Alanlarını tanıtmak istiyorum.

Hadi başlayalım!

GitHub Kod Alanları nedir?

Github kod alanları, bir tarayıcıdan erişilebilen ve özel kod geliştirmek için gerekli tüm özelliklere sahip bir bulut ortamıdır.

GitHub duyurusunu görmüş olabilirsiniz, her repoda olduğunuzda ve “anahtar” a bastığınızda. Söz konusu depoyla birlikte bir web editörü açılacaktır.

Ancak, sadece bir web editörü olduğu ve bir arka uç makinesi olmadığı için terminali çalıştıramayacaksınız. Bazen bu fazlasıyla yeterli olabilir, ancak bir ortamı çalıştırmanız veya bir proje derlemeniz gerektiğini ancak elinizde ihtiyaçları karşılayan bir sisteminizin (iPad, Surface Go vb.) olmadığını düşünün.

GitHub Codespaces, IDE'yi bulutta yerel bir sistem kullanıyormuşsunuz gibi ve bu da belirttiğiniz yapılandırmayla çalışıyormuş gibi çalıştırmanıza izin vererek bu sorunu çözer.

Not: Bu özellik yalnızca Ekip ve Kurumsal hesaplarda kullanılabilir.

Basit kod

Bu örnek için çok basit bir Node.js uygulaması kullanacağım:

 const express = require('express'); const app = express(); const port = 8080; app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); })

Yukarıdaki kod aşağıdaki yapıya sahiptir:

Node.js, git ve bir proje için faydalı olan VS Code uzantılarını bu dilde yüklediğiniz sürece, bu projeyi yerel olarak sorunsuz bir şekilde başlatabilirsiniz. Uygulamayı otomatik olarak yenileyecek Nodemon gibi araçları da kullanmak isteyebilirsiniz.

Sorun, yalnızca bu yapılandırmayla çalışmakla kalmayıp, .NET Core, Python, Docker veya Kubernetes ile geliştirme gibi diğer birçok yapılandırmayı kullandığınızda ortaya çıkar ve bu, her zaman ihtiyaç duymadığınız daha fazla araç ve uzantı yüklemenize neden olur ve bunlar geliştirme ortamınızın performansına zarar verebilir.

Sorun kendi performansınızla sınırlı değil. Ekibe başka biri katılırsa ve uygulamayı başlatmak için gerekli araçlar ve çerçevelerle sistemini "hazır" hale getirmesi gerekiyorsa, o zaman birkaç saat kaybederler ve bu da genel ekip performansına zarar verir (bunu yaparsanız daha kötü olur). farklı işletim sistemleri kullanarak çalışma).

Uzak Konteynerlerle Çalışma

Visual Studio Code, uygulamanızın ihtiyaç duyduğu geliştirme ortamını bir kapsayıcı içinde oluşturmanıza olanak tanıyan Remote Containers veya Dev Containers adlı bir uzantı sunar. Bu sayede ekibinizde bir proje üzerinde çalışan tüm geliştiriciler otomatik olarak aynı geliştirme ortamına sahip olacaktır.

Bu, projenize başlama deneyimini olabildiğince çevik hale getirecek ve ayrıca ortamı tanımlayan sizseniz, aynı makine üzerinde farklı konfigürasyonlarla proje başına birden fazla çalışma ortamını ayırabilirsiniz. Havalı değil mi?

Nasıl başlarım?

Bu özelliği kullanmak için, konteynerler üzerinde çalışacağı için makinenizde Docker kurulu olmalıdır. Geliştirme ortamını oluşturmamıza yardımcı olacak Remote Containers uzantısını yüklemek de gereklidir.

Yapmanız gereken ilk şey, kök dizinde .devcontainer adlı bir klasör oluşturmaktır. Bu, uzantının, içerdiği göstergelere sahip bir kapsayıcı monte etmek için bir yapılandırmaya sahip olup olmadığını bilmek için tanımlamaya çalışacağı şeydir.

İçinde, ortam yapılandırmasına sahip olacak olan devcontainer.json adlı en az bir dosyanız olmalıdır.

Bu örnek için aşağıdakileri kullandım:

 { "name": "dev-demo", "dockerFile": "Dockerfile", "forwardPorts": [ 8080 ], "settings": { "workbench.colorTheme": "Visual Studio Light" }, "containerEnv": { "NODE_ENV": "development", }, "extensions": [ "coenraads.bracket-pair-colorizer-2", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "formulahendry.auto-close-tag", "mikestead.dotenv", "christian-kohler.path-intellisense", "davidanson.vscode-markdownlint", "pkief.material-icon-theme", "humao.rest-client" ], "postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh", "postAttachCommand": "nodemon server.js" }

Gördüğünüz gibi, farklı bölümleri olan bir JSON'dur:

• name : dev kapsayıcısının sahip olacağı addır. İdeal olarak, bu açıklayıcı bir ad olmalıdır.
• dockerFile : Ortamı oluşturmak için kullanacağımız Dockerfile'ın adını belirtmek için kullanılır. Benim durumumda, aynı .devcontainer klasöründe aşağıdakine benzer bir tane var:

 FROM node:12.16.1-alpine WORKDIR /code RUN apk update && apk upgrade \ && apk add git bash curl \ && npm install -g nodemon COPY . .

Bu örnekte, sadece bu geliştirme ortamında sahip olduğum konfigürasyonun, Node.js'nin 14 sürümünü kullandığım yerel olarak sahip olduğum konfigürasyondan farklı olduğunu göstermek için düğüm: 12.16.1-alpine image kullanıyorum. Öte yandan geliştirme sırasında kullanacağım Nodemon modülüne ek olarak git, bash, cURL gibi bazı yardımcı programları kuruyorum.

• fordwardPorts : bunlar, uygulamamın yerel makineden erişebilmem için kullandığı ve hata ayıklamanın kolay olduğu bağlantı noktalarıdır.
• settings : bu örnek için ve birden fazla ortamınız olduğunda süper kullanışlıdır, Visual Studio Code temasını IDE'nin o örneğinde yerel ortamda olmadığımı gösterecek şekilde değiştirdim. Genelde karanlık versiyonu kullanırım ve burada açık versiyonu belirledim.
• containerEnv : Geliştirme sırasında genellikle çok faydalı olan bir ortam değişkeni de ekledim.
• postCreateCommand : Bu özelliği ekledim, böylece geliştirici konteynerinin yaşam döngüsü boyunca komutları veya komut dosyalarını yürütmenin mümkün olduğunu görebilirsiniz. Bu durumda, oluşturma bittiğinde bu komut dosyası başlatılacaktır. Bunun içeriği:

   #!/bin/bash # this runs in background after UI is available #Remove node_modules folder echo "Remove node_modules folder first" rm -rf node_modules #Install npm dependencies echo "Install dependencies" npm install

• postAttachCommand: Sonunda, bu özelliğe nodemon server.js komutunu ekledim, böylece konteynere her bağlandığınızda, varsayılan olarak uygulamayı kaldıracaktır.

devcontainer.json dosyasına eklenecek daha birçok seçenek var, bu yapabileceklerinize dair çok küçük bir örnek.

Artık bu klasördeki her şeyi ve tanımlanan konfigürasyonun nasıl çalıştığını bildiğinize göre, bunu nasıl başlatabiliriz?

En kolay yol, buradaki bu düğmeden geçer:

Kapsayıcıda Yeniden Aç seçeneğini belirleyin, işlem kapsayıcıyı ve özel IDE'nizi oluşturmaya başlayacaktır. Sonuç aşağıdaki gibi görünmelidir:

Sonuç olarak, bu durumda sonuç, belirli bir Node.js sürümü, daha rahat geliştirmek için seçilen çeşitli uzantılar ve uygulamam zaten 8080 numaralı bağlantı noktası tarafından çalışır ve açıkta kalan Işık temalı bir Visual Studio Code penceresi olacaktır.

Ve en iyi yanı şudur: Bu konfigürasyon, herhangi bir üyenin kullanabilmesi için proje deposunda versiyonlanmıştır. Tek kelimeyle muhteşem!

Şimdi tüm bunları gördükten ve tüm adımları anladığımıza göre, .devcontainer klasörünü silin, sol alttaki simgeyi tekrar seçin, Yeniden Konteynerde Aç'ı seçin ve bu sefer birkaç ön seçim arasında seçim yapmanıza izin verdiğini göreceksiniz. -yapılandırılmış konfigürasyonlar.

Yapılandırmanızı sıfırdan başlatmanıza gerek yok ve ayrıca inek dokunuşunuzu vererek bitirmek için nereye dokunmanız gerektiğini zaten biliyorsunuz.

Github Spaces'e geri dön

Şimdi Visual Studio Remote Containers'da kullandığımız projeyi bu sefer GitHub ile kullanacağız. Bu, Kod bölümünde yapıldığında, Kod Alanları adlı yeni bir seçeneğiniz olacaktır:

Burada, bu özel depoyla çalışmanız gereken makine türünü seçebilirsiniz:

Seçildikten sonra, oluşturma süreci başlayacaktır. Ortamı yapılandırmak için Remote Containers için oluşturduğumuz .devcontainer klasörünün yapılandırmasını kullanacaktır.

İşlem bittiğinde, yerel sistemimizde yaptığımız gibi, uygulama çalışırken web formatında bir Visual Studio Kodunun görüneceğini göreceksiniz.

Son sözler

Yukarıdaki örnekte görebileceğiniz gibi, Uzak Kapsayıcıları kullanan Github Kod Alanları, yapılandırma ve geliştirme ortamımızı çoğaltma sorunumuz için mükemmel bir çözümdür ve ayrıca ekibimizin performansını iyileştirmenin harika bir yoludur.