Bu bölümde Visual Studio Code’da özellikle React Native için Extension’ları (uzantı) tanıtacağım. View->Extensions seçip açılan pencereden mevcut extension’ları görebilir ve yeni extension’lar yükleyebiliriz.
Öncelikle lint, linter veya linting olarak karşılaşabileceğiz bir kelime ile başlayalım. Yine tam karşılık bulamadığım için İngilizcesini kullanacağım.
lint: programlama hatalarını(error), buglarını, sözdizimsel hataları ve şüpheli yapıları otomatik olarak işaretlemek için kodun otomatik olarak analiz eden araçları ifade eder.
Kod yazarken hatalı bölümlerin gösterilmesi gelişmiş IDE’lerde olan temel bir özelliktir. VS Code ortamında ise hangi ortama göre kod yazıyorsanız o ortamın uzantıları kurarak VS Code yeni entension’lar katabilirsiniz.
ESLint: JavaScript ve JSX linting işlemi yapan yardımcı bir programdır.
Prettier: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML için bir kod formatlayıcısıdır. Bir anlamda kodu daha anlaşılır şekle getiren bir araçtır. “CTRL + Shift + P” ile Format Document diyebilir veya Mouse Sağ Tuş -> Format Document or Format Selection diyebilirsiniz.
React Native Tools: Bu extension React Native projeleri için bir geliştirme ortamı sağlar. Bu extension sayesinde kodunuzu debug edebilir ve hızlı bir şekilde react-native komutlarını çalıştırabilirsiniz. Ayrıca, intellisense özelliği sayesinde geliştiricinin işini kolaylaştırır. Intellisense, otomatik olarak kod tamamlama için geliştiriciye öneriler üretir.
ES7 React/Redux/GraphQL/React-Native snippets: Kod yazarken bazı kod bloklarını sık sık tekrarlanırız. Snippet özelliği sayesinde kod bloklarını kolayca üretebiliriz. Snippet, kod parçacıklarına kısayol bağlanması ve bu kısayolun çağrılmasıyla kodun üretilmesi prensibine sayanır. Bu extension, React/Redux/GraphQL/React-Native için sık kullanılan snippet’ler içermektedir. Kısayol bir kısaltmaya karşılık gelir. Örneğin, “imp→ import moduleName from ‘module’ ” kodunu üretir. Diğer kısaltmalara yardım dokümanından bakabilirsiniz. Kısaltmayı yazdıktan sonra (örneğin imp) sonra CTRL+Space yaparak snippet seçimi yapabilirsiniz.
Auto Close Tag: XML/HTML etiketlerini otomatik olarak kapar.
Auto Rename Tag: Otomatik olarak etiketin bitişini değiştirir. Örneğin <p> … </p> şeklinde bir etiketimiz var ise <p1>…. yaptığımızda kapanış etiketi otomatik bulunur ve değiştirilir.
Auto Complete Tag: Auto Close Tag ve Auto Rename Tag her ikisini içeren extension’dır.
Color Highlight: Bu extension css/web renklerini yazdığınızda dokümanda renk metini üzerinde rengin görünmesini sağlar.
Copy Relative Path: Dosyanın üzerine gelip “Copy Relative Path” tıkladığınızda ilgili klasör yolunu üretir. (Cidden bazen yolu hatırlamak zor oluyor, bu açıdan kullanışlı)
Debugger for Chrome: Çalışan Javascript kodlarını debug etmenize yardımcı olur. Google Chrome ile VS Code haberleştiği için kodlarınız Chrome üzerinde çalışmalıdır.
Document This: JS için yorumları otomatik olarak oluşturan kod, örneğin bir fonksiyon için CRTL+ALT+D yaptığınızda otomatik olarak yorum yazılması gereken kısımlar oluşur. Bundan sonra yorumları yazmak size kalıyor.
Flow Language Support: Flow, Javascript programındaki tip hatalarını bulmak için tasarlanmış statik tipli bir kontrolcüdür.
GraphQL for VSCode: GraphQL şemalarını oluşturma ve yazma işlemini kolaylaştırır.
Node Debug: Node.js kodlarınızı debug etmenizi sağlar.
npm Intellisense: Node.js modüllerini otomatik olarak seçilmesine destek verir.
Path Intellisense: Bir dosya veya dizin yolunu otomatik olarak tamamlama yardımcı olur.
Project Manager: Projeleriniz arasında hızlı bir şekilde dolaşmanızı sağlar.
Rainbow Brackets: Kodlarınızın parantezlerini farklı renklerde gösterir. Bu sayede kapama parantezleri rahat şekilde bulunabilir.
SVG Viewer: SVG sıklıkla kullanımı gittikçe artan ve gelecekte PNG’nin yerini alacak W3C tarafından tanıtılmış vektörel bir çizim formatıdır. SVG dosyalarınızı görüntülemeyi sağlar.
TODO Highlight: Yorum etiketleri içine TODO ve FIXME gibi kısaltmalar yazdığınızda bu kısımları renkli gösteren uzantıdır. Bu sayede yapılacak işlemleri ve düzeltmeleri kolay şekilde hatırlarsınız.
Material Icon Theme: Dosyalarınızı ve klasörleri farklı ikonlar ile gösterir.
Quokka.js: Javascript ve TypeScript için hızlı bir geliştirme arayüzü sunar. Editörünüzde kodlarınız direkt çalışır ve sonuçlar editör ekranı içinde görüntülenir.
VS Code açık kaynak kodlu bir proje olduğu için Extension havuzu her geçen gün büyüyor. Eğer sevdiğiniz bir extension var ise kısaca açıklamasını yapın buraya ekleyebilirim.