React Geliştirme Akışınızı Hızlandıracak 10 VSCode Uygulaması – JSManifest

React Geliştirme Akışınızı Hızlandıracak 10 VSCode Uygulaması – JSManifest

Bir Visual Studio Code kullanıcısıysanız ve tepki olarak projeler geliştirmeyi seviyorsanız, muhtemelen aşağıdaki gibi çok sayıda can sıkıcı tekrarlayan kodla karşılaşıyorsunuzdur: React.useState, React.useContext, React.useReducer(reducer, initialState)ve benzeri.

Bu bireysel anahtarlar klavyede tüm farklı yönlere dağılmış ve zavallı küçük parmaklarımızın tüm tepki projelerimizde bu karakterleri tekrar tekrar yazması rahatsız edici olabilir.

yazarsan React.useState klavyenizde parmak uçlarınız şu yönlere gidecek:

Bu basit soruna fazla dramatik davranıyor olabilirim, ancak bu yazıdaki amacım tuş vuruşlarıyla ilgili değil. Tuş vuruşlarıyla ilgili ve diğer birçok şey bugün tepki ile uygulamalar geliştirdiğimizde. Sağlığımız ve zamanımız değerli olduğu için gereksiz stresi azaltmak için elimizdeki tüm fırsatlardan elimizden geldiğince yararlanmamız gerektiğini öğrendim.

Bununla birlikte, sizin gibi geliştiricilerin tepki vermesine yardımcı olmak için bu yazıyı yazmak için zaman ayırmak istedim ve tepki geliştirme akışınızı hızlandırmak için kullanabileceğiniz yararlı yollar hakkında sizi bilgilendirerek mümkün olduğunca fazla zaman ve enerji tasarrufu yapmanın yollarını buldum!

1. Uzantı: Kullanıcı Snippet’leri

Varlık tarihinde tepki geliştiriciler olarak birçok harika şeyin gerçekleştiğini gördüm ve Kullanıcı Snippet’leri Onlardan biri.

Bu kullanışlı VSCode uzantısı, projeleriniz boyunca sonsuz sayıda yeniden kullanabileceğiniz kendi özel snippet’lerinizi tanımlamanıza olanak tanır. sadece birkaç harfe basarak.

Platformunu tepki ile inşa eden bir şirkette çalışıyorum ve sürpriz bir şekilde, bu özelliğin var olduğunu bile bilmeden tepki tepkisinde gelişen bazı insanlar vardı.

Peki ne yapar?

Bu özellik, yalnızca birkaç harf yazarak (özel bir önekle bildirdiğiniz) kodunuzun hemen üzerinde oluşturabileceğiniz herhangi bir özel snippet oluşturmanıza olanak tanır.

Örneğin, aşağıdakileri kullanacak yeni bir bileşen oluşturduğumuzda, React.useReducer API, muhtemelen bir başlangıç ​​durumu, bir redüktör işlevi ve buna benzer bir şey bildirmemiz gerekecek [state, dispatch] = React.useReducer(reducer, initialState) en düşükte Bunun olmasını sağlamak:

const initialState = {
  
}

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state
  }
}

function MyComponent() {
  const [state, dispatch] = React.useReducer(reducer, initialState)

  return <div />
}

Bunu aşağıdaki gibi kullanıcı snippet’lerinize ekleyerek değerli zamandan ve enerjiden tasarruf edebilirsiniz:

{
  "my React.useReducer snippet": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "function reducer(state = initialState, action) {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}",
      "",
      "function MyComponent() {",
      "  const [state, dispatch] = React.useReducer(reducer, initialState)",
      "  ",
      "  return <div />",
      "}"
    ]
  }
}

Yapman gereken tek sey basın rsr ve bu kod sizin için otomatik olarak yazılacaktır:

tepki userreducer kullanıcı snippet'leri otomatik oluşturulan snippet

Burada bazı Tepki projelerimde kullanmayı sevdiğim ortak snippet’ler:

Geçici kenarlıklar vererek doğru görünüp görünmediklerini görmek için CSS öğelerini hızla test edin:

{
  "border test": {
    "prefix": "b1",
    "body": "border: 1px solid red;"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: 1px solid green;"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: 1px solid magenta;"
  },
  "border test4": {
    "prefix": "b4",
    "body": "border: 1px solid blue;"
  },
  "border test5": {
    "prefix": "b5",
    "body": "border: 1px solid #fe7200;"
  }
}

ben genellikle components gibi genel ilkel bileşenlere sahip klasör Button örneğin, her projede:

{
  "import Button from 'components/common/Button'": {
    "prefix": "btt",
    "body": "import Button from 'components/common/Button'"
  }
}

Her testten önce bir şeyler kurun/temizleyin:

{
  "beforeEach(() => {})": {
    "prefix": "bfe",
    "body": ["beforeEach(() => {", "  $1", "})"]
  }
}

Bazı hızlı hat devre dışı bırakıcılar:

{
  "// @ts-ignore": {
    "prefix": "tsg",
    "body": "// @ts-ignore"
  },
  "eslint disable line": {
    "prefix": "eds",
    "body": "// eslint-disable-line"
  }
}

İthalat tepkisi:

{
  "import react": {
    "prefix": "reaa",
    "body": "import React from 'react'"
  }
}

Bu, kullandığım snippet’lerin tam listesi değil ama umarım Kullanıcı Snippet’lerinden yararlanarak ne kadar zaman ve enerji tasarrufu yapabileceğinizi anlamanızı sağlar.

Bonus: ile bir sonraki seviyeye taşıyın Proje Snippet’leridışında aynı işlevselliği sağlayan bir VSCode çalışma alanı seviyesi.

2. Uzantı: Daha güzel

Daha güzel kullanmıyorsanız, lütfen, her şeyi bırakmanız için yalvarıyorum ve kullan.

3. Uzantı + Paket: TypeScript + ESLint

Yaklaşık dört yıl önce, Promises resmi olarak piyasaya girdiğinde ECMAScript 2015 Spesifikasyonutepki ekosistemi patlayan bugün web uygulamalarını geliştirme şeklimizi değiştiren devrim niteliğindeki teknoloji.

TypeScript o zamanlar tepki ekosistemine girerken onların arasındaydı ve bu güne kadar toplulukta yavaş yavaş geniş çapta benimsendi – ve iyi sebeplerden dolayı!

TypeScript, çok fazla zaman ve enerji tasarrufu yapmanızı sağlayan çok güçlü bir araçtır. önceki potansiyel hataların bile olma şansı var.

özelliklerine ek olarak normalde sağlartepki bileşenlerinizi belgelemenize, gelecekteki hataların oluşmasını önlemenize yardımcı olur ve dilde garip şeyler öğrenmek için bir e-kitap için tek bir kuruş harcamanıza gerek kalmadan JavaScript dilinin kendisi hakkında size çok şey öğretir.

ESLint ile TypeScript’i tepki projelerinize benimsemek, tepkinin nasıl çalıştığını unuttuğumuz durumlarda size yardımcı olacaktır:

tepki kancaları TypeScript tiftiği

4. Kısayol: Satır Yukarı/Aşağı Çoğalt

Ctrl + D çok zaman kazandıracak.

5. Kısayol: Geçerli Dosyadaki Tüm Olayları Bul

Bir dosyada seçtiğiniz bir anahtar kelimenin vurgulanması ve tuşuna basılması Ctrl + Shift + L anahtar kelimenin tüm oluşumlarını seçecektir.

Bu, bir bileşeni yeniden adlandırmak istediğinizde kullanışlıdır çünkü görünüşe göre her zaman en azından bir bileşenin çocukları olduğunda üç olay:

import React from 'react'

function App() {
  return <h2>Useful content</h2>
}

function Root() {
  return (
    <App>
      <p>Will I even be rendered?</p>
    </App>
  )
}

yeniden adlandırmak istersek App başka bir şeye, bileşen bildirimini ve aynı zamanda içindeki iki oluşumu seçmeliyiz. Root blok oluştur.

6. Kısayol: Projenizde Bir Dosya Bulun

Belirli bir dosyayı ararken her zaman Dosya Gezgini’ni kullanmak zorunda kalmak kolayca sinir bozucu olabilir. Bir dosyayı analiz etmek istediğinizde bu çok büyük bir sorun haline gelir. node_modules dizin çünkü VSCode bunu size yapıyor:

dosya gezgini node_modules büyütme

Kırmızı çizgi, kaydırmak için ne kadar içeriğiniz kaldığını gösterir ve mavi, daha fazla içeriği küçülten kaydırma çubuğunun boyutunu gösterir. Bu, genişletildiğinde performansı etkiler.

Bulunan bir dosyayı kolayca bulabilir ve açabilirsiniz. herhangi bir yer projede farenizden tek bir milimetre hareket ettirmenize gerek kalmadan adını aratarak.

Basitçe basın Ctrl + Tdosya adını yazın ve bitirdiniz.

7. Uzantı: Özel TODO vurguları

Bu, eğlenceli kullanım için değerli görünebilecek bir eklenti ama zamanla ciddi ortamlarda benim için çok güçlü bir araç haline geldi.

Her şeyden önce, inanılmaz derecede önemli sana bir şey hatırlatılabildiği sürece yapılacakları bir yere yazmak. Evernote uygulamasında, kompozisyon kitabınızda, yırtık bir kağıt parçasında vb. olabilir. Eğer kullanırsan YAPILACAKLAR benim yaptığım gibi, yorumlarda yazdığınız kodun hemen üstüne todos koyuyorsun. ile inanılmaz derecede kullanışlıdır. YAPILACAKLAR ile bir satıra önek eklediğinizde ekranda renk kodlu hale geldikleri için birlikte kullanılan uzantıdır. TODO: aşağıdaki gibi:

varsayılan vurgu yapmak

Ama gücü YAPILACAKLAR kendi özel anahtar kelimelerinizi ve bunlar için renk efektleri oluşturmaya başladığınızda daha fazla parlamaya başlar:

yapılacak vurgular2 not

Bu değerli bir özellik haline geldi çünkü nereye dönersem döneyim her dosyada neler olup bittiğini anlamanın yanı sıra odağımı hızla yeniden kazanabiliyorum.

Benim favorim todovurgulamak anahtar kelime BUG: kırmızı olduğundan. Normalde kırmızıyı hatalarla veya tehlikeli bir şeyle ilişkilendiririz, bu nedenle kodumun kritik kısımlarında bu kolayca dikkatimi çeker:

öne çıkanlar3 hatası

8. Uzantı: (Visual Studio Marketplace’teki herhangi bir harika tema)

Harika bir VSCode renk temasıyla bağlantılı olarak tepki uygulamaları geliştirmek, beni eğlendirmek ve daha kaliteli kod elde etmek için kritik bir varlık oldu.

Beğendiğiniz bir temayı kullanmak inanılmaz derecede önemlidir çünkü tepki bileşenlerinizin renk kodlarının belirli bir rengi vardır. “bakmak” veya “hissetmek” Aşağıda görebileceğimiz gibi, tepki uygulamalarınızı geliştirmek için daha kolay zaman geçirmenize yardımcı olacak onlara:

Bileşen olmayanlar

tepki vermeyen bir şey bileşenleri

Bileşenler

bir şey bileşenleri reaksiyona sokar

Bu size çok yardımcı olacaktır.

Şahsen bunu artık kullanmıyorum çünkü kendi snippet’lerimi kullanıyorum. Ancak geçmişte, geliştirme iş akışım üzerinde çok büyük bir olumlu etki yaptı.

10. Özellik: Ekmek kırıntıları

Oğlum, zaman kesinlikle hızlı geçiyor! Daha dün gibi geliyor galeta unu VScode’da yayınlandı.

Bu, en azından beklediğim zamanlarda, tepki geliştirirken bana daha kolay bir zaman vermeye devam ediyor.

Reaksiyonun bileşen alt/ebeveyn hiyerarşisinin doğası göz önüne alındığında, bu, reaksiyonda geliştirirken (dizin yapınızı bir hiyerarşiye göre oluşturduğunuz sürece) iyi gider çünkü temelde gösteriler bir bileşen dosyasının ana dizinden türetildiğini (ki benim durumumun çoğunda her zaman varsayılan olarak bir index.tsx dosya):

galeta unu

Yukarıdaki kırıntılar bana şunu gösteriyor Add bir çocuğu Birthdays hangisinin çocuğu Birthdays içinde bir rota olan Admin bileşen.

Ekmek kırıntıları varsayılan olarak etkindir. Ancak mesele, kırıntıları özelliğini hafife almamaktır. Beklenmedik şekillerde sessizce yardımcı olur, bu yüzden daha fazla dikkatinizi ona verin!

Bonus: Bazı ekmek kırıntıları ipuçları ve püf noktaları ilgilenenler için.

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.