Geliştirmeyi Kolaylaştıracak 12 VSCode Kısayolu ve Taktiği – JSManifest

Geliştirmeyi Kolaylaştıracak 12 VSCode Kısayolu ve Taktiği – JSManifest

Bu nedenle, geliştirme akışınızı kolaylaştırmak için zaten bazı harika araçlara veya uzantılara sahip olabilirsiniz ve harika zaman geçiriyorsunuz. Bu harika ve hepsi ama yine de VS kodunun sunduğu bazı kısayollarda kaçırıyor olabileceğiniz küçük bir değişiklik var.

Bu yazıda bazılarını listeleyeceğim favori kısayollarım bu beni daha hızlı ve daha üretken bir şekilde kodluyor.

Umarım bu yazıyı okuyarak, gelecek projeleriniz için geliştirme akışınızda yeni bir şey benimsersiniz!

Geliştirmeyi Kolaylaştıracak 12 VSCode Kısayolu ve Taktiği:

1. VSCode ayarlarını doğrudan JSON’da açın

Ayarları açma kısayolunu bilmiyorsanız, bunun kısayolu Ctrl + , (Mac: Command + ,). Bu tuş kombinasyonuna basmak, VS kod düzenleyicinizin kullandığı ayarları açacaktır. Ancak bu, ayarları doğrudan bir grafik kullanıcı arayüzü olarak açacaktır. VSCode, JSON modunu kullanarak bu ayarları düzenlemenize de olanak tanır.

Ayarlar arayüzünü açıp manuel olarak tıklayabilirsiniz. Ayarları Açın (JSON) düğmesini tıklayın veya bu ayarları doğrudan JSON görünümünde açmak için isteğe bağlı olarak özel bir klavye kısayolu da bağlayabilirsiniz.

tuşuna basarak klavye kısayolları pencerenize gidin. Ctrl + S + K (Mac: Command + S + K) ve arayın Preferences: Open Settings (JSON) ve bunu kısayolunuz yapmak için özel bir klavye kombinasyonu uygulayın.

İşte aşağıda bir örnek:

2. Başlık Vakasına Dönüştür

Bu özellik, küçük harfle başlayan bir kelimeyi büyük harfle başlayan bir kelimeye dönüştürmeniz gerektiğinde çok kullanışlıdır.

Kasayı bazı değişkenlerden değiştirmem gereken bu sorunla sık sık karşılaşıyorum. Karşılaştığım bazı yaygın senaryolar, bir oluşturucu işlevini gerçek bir tepki bileşenine dönüştürürkendir (Bu, kesinlikle büyük harfle başlayan adları geleneksel olarak kullanır).

Başka bir senaryo, hikayeler oluştururken hikaye kitabı. Bazen bir tepki bileşeni oluşturan bir işlev için bir hikaye yaratırdım. Ama sonra hikayenin sadece bir tepki unsuru olacağına karar verdim. Hikayelerin artık kutudan çıkan tepki kancalarını desteklediğini hatırlayarak, bir React.useState ve hikayeyi tarayıcıda görüntülerken gayet iyi çalışıyor. Ancak, tepki kancalarının yalnızca bir işlev bileşeni içinde kullanılabileceğini söylemek için bir ESLint/TypeScript linting hatası ortaya çıkıyor (bir işlemek yerine işlev). Hikayeyi tutan değişkenin adını seçmem ve hatayı ortadan kaldırmak için büyük harfle başlayacak şekilde manuel olarak değiştirmem gerekir.

Aslında adlı bir komutu kullanabilirsiniz. Başlık Vakasına Dönüştür kısayollar pencerenizin içinde, ona özel bir klavye kısayolu bağlayarak.

Klavye kısayolları basarak pencere Ctrl + S + K (Mac: Command + S + K) ve için bir klavye kombinasyonunu bağlayın Transform to Title Case.

İşte daha sonra yapabilecekleriniz:

başlık durumu vs kod kısayolu

alır Gerçekten seçtiğiniz durumlarda güzel çoklu bir seçimin oluşumları ve hepsini aynı anda dönüştürür.

3. Bir kod bloğunu katlayın/açın

Pencereler: Ctrl + Üst Karakter + [ or Ctrl + Shift + ]

Mac: Komut + Üst Karakter + [ or Command + Shift + ]

Bir kod bloğunu katlamak, bir kod bloğunu anında tek bir satıra indirmenize yardımcı olur ve bu da mevcut dosya boyunca kodlar arasında hızla atlamanıza yardımcı olur.

Deneyimlerime göre, bir dosyada birden fazla kod uygulamanız olduğunda ve odağınızı anında tek bir işleve veya bileşene yönlendirmeniz gerektiğinde avantajlar parlamaya başlar. Bir senaryoda, dosyanın daha az karmaşık hale gelmesi için kodun farklı kısımlarını ayrı dosyalara ayıklayarak parçaları modülerleştirmeyi düşünebilirsiniz, ancak bunun gerekli olup olmadığından henüz emin değilsiniz. İstediğiniz kod bloklarına odaklanmak için ileri geri kaydırarak uzun kod dosyasına dayanabilir veya daha kolay hale getirmek için bunları hızlıca katlayabilirsiniz:

vs kodunda kod bloklarını katlayın ve açın

Not: Elinizi tutarak birden çok kod bloğunu katlayabilir/açabilirsiniz. Shift kod bloklarınızı seçerken düğmesine basın.

Not #2: Kullanarak katlanmış çizgileriniz için özel bir vurgu rengi sağlayın. Katlanmış bölge vurgulama özellik.

Ayarlarınıza girerek (JSON modunu kullanarak) özel bir vurgu rengi sağlayabilirsiniz. workbench.colorCustomizations ve bu anahtarı girin: editor.foldBackground Aşağıda gösterildiği gibi:

katlanmış vurgu rengi

Katlanmış bir kod satırı şu şekilde görünür:

katlanmış vurgu önizleme

Not #3: Birden fazla iç bloğa sahip bir kod bloğu seçiyorsanız, burada birden fazla seviye derinliğe yuvalanmışsanız, bloğu katlamak sadece o iç bloğu katlayacaktır. Kıvrımları zincirleyebilirsiniz, böylece bir sonraki ana blok katlanır ve her bir ebeveyni köpürmeye devam eder.

4 numaralı not: Benzer bir efekti ancak kelimelerle elde etmenin başka bir yolu, tüm satırları saracağı kelime kaydırma aracını kullanmaktır (katlama efekti gibi). komut Alt + Z pencereler için ve Option + Z Mac için.

4. Gezgini Göster

Pencereler: Ctrl + Shift + E
Mac: Command + Shift + E

Bazen aklınıza bir fikir geldiğinde ve bir ağaç yapısında mevcut dizininize bakmak istediğinizde, dosya gezginine tam olarak bunu gösterdiğini gösterebileceğinizi unutmayın. sadece basın Ctrl + Shift + E (Mac kullanıcıları için Command + Shift + E) ve panel zaten açılmadıysa ekranınızın sol tarafında açılacaktır.

5. Bir Dosya Bulun ve Açın

Bu, tartışmasız VS kodunun tüm zamanların en iyi on özelliğinden biridir, çünkü sadece zamandan ve stresten tasarruf sağlar. Sadece farenizi kullanarak bir dosya aramanın nasıl bir his olduğunu hayal edin? Büyük bir projeyle çalışıyorsanız, bu sinir bozucu olabilir.

aramak için ve aradığınız bir dosyayı açın, kısayol Ctrl + T (Mac kullanıcıları için Command + T)

6. TypeScript Yapılandırmanızı Doğrudan Açın

VSCode’un bilgisayarınızı kolayca açmasını sağlamanın iki yolu vardır. tsconfig.json. Bir yol, düğmesine basarak dosya bulucuyu açmaktır. Ctrl + T (Mac: Command + T) ve arama sonuçlarını daraltmak için harfleri yazmanız gerekir veya doğrudan açmak için bir tuş kombinasyonuna kolayca basabilirsiniz:

typescript config tsconfig.json vscode kısayolunu açın

VSCode, bilgisayarınızı algılayacak ve açacaktır. tsconfig.json şu anda çalışan dizinden. Ancak, bir uyarı, şu anda glob desenine dahil olan bir şeyi görüntülemeniz gerektiğidir. tsconfig.json. Yani temelde eğer varsa "include": ["src"] senin içinde tsconfig.json o zaman içinde bir dosyayı görüntülemeniz gerekir src Bu kısayolun çalışması için dizin.

Bu komuta özel bir klavye kısayolu bağlamak için, tuşuna basarak klavye kısayolları pencerenizi açın. Ctrl + S + K (Mac: Command + S + K), aramak TypeScript: Go to Project Configuration ve tuş kombinasyonunuzu ona bağlayın.

7. Yakın zamanda kapatılan bir sekmeyi yeniden açın

Birçok kez bir grup sekmeyi kapattığım durumlarla karşılaştım, ardından bir dakika sonra aynı dosyaya tekrar bakmak zorunda kaldım. Bu durumlarda o dosyaya geri dönmenin bir yolu, tuşlara basarak zamanda geriye yolculuk yapmaktır. Ctrl + Shift + T (Mac için: Command + Shift + T).

Bazen tüm kapalı sekmeleri spam göndererek geri almak daha hızlıdır. Ctrl + Shift + T. Ancak, hızlı reflekslere sahip hızlı bir daktilo iseniz, sadece şunu yaparak zamanlamayı aşabilirsiniz. Ctrl + T kısayol (4. noktaya bakın).

8. Başka Bir Editör Grubuna Atlayın

Önceki veya sonraki düzenleyici grubuna geçmek, farenizi kullanmak istemediğinizde diğer tarafa geçmenin hızlı bir yoludur. Temelde vurdun Ctrl + <number> nerede <number> klavyenizdeki herhangi bir sayı 0 ile 9. (Mac: Command + <number>).

vs kodunda düzenleyici grup kısayolunu atla

9. Aynı düzenleyici grubundaki bir sekmeye gidin

Bir editör grubunda çalışırken, tutabilirsiniz. Ctrl ve bas Tab o grupta o anda açık olan sekmeler arasında gezinmek için. (Mac: Command + Tab).

Daha çok klavye tipi bir kullanıcıysanız, farenizi kullanmaktan kaçınmanın başka bir yolu:

vs kodunda aynı düzenleyici grubunda sekme kısayolu değiştir

10. Sekmeleri Ayrı Gruplarla Değiştirin

Geliştirme yaparken yanlış sekme grubunda bir sekmeye sahip olma alışkanlığım var. Ayrıca, elimi klavyeden kaldırmamı gerektirdiğinden, işlerimi yoluna koymak için faremi mümkün olduğunca kullanmaktan kaçınmayı seviyorum. Elim ağır — onu her zaman klavyemde tutmak isterim.

Neyse ki VS kodunun, bir sekmeyi tuşuna basarak ayrı bir sekme grubuna aktarmanın bir yolu vardır. Ctrl + Alt + Right Arrow (Mac: Command + Option + Right Arrow) bir sekmeyi sağdaki gruba taşımak için veya Ctrl + Alt + Left Arrow (Mac: Command + Option + Left Arrow) bir sekmeyi soldaki bir gruba taşımak için:

vs kodunda editör gruplarını ayırmak için sekmeleri değiştirme

11. Tanıma Git

Muhtemelen kendinizi projenizin başka bir yerinde bulunan bazı işlevleri içe aktardığınız veya bunlara atıfta bulunduğunuz çok yaygın bir durumda buluyorsunuz ve uygulama ayrıntılarına göz atmanız gerekiyor. Farenizi kullanabilir, dosya bulucuyu kullanabilirsiniz (Ctrl + T [Mac: Command + T]) veya işlev adını seçebilir/vurgulayabilir ve F12.

Bu, sizi anında o işlevin (TypeScript ve diğer birçok türdeki türlerle çalışır) tanımlandığı yere götürecektir:

tanım vscode kısayoluna atla

12. Özel Proje Parçacıkları

Kullanıcı parçacıklarına aşina değilseniz, bu özellik projelerinizde yeniden kullanmak üzere kendi kod parçacıklarınızı oluşturmanıza olanak tanır.

Ama onları “yeniden kullanmak” tam olarak ne anlama geliyor?

Pekala, kendinizi sık sık aşağıdaki gibi herhangi bir tipte ortak yazı yazarken bulursanız:

import { useReducer } from 'react'

const initialState = {
  
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return {
    ...state,
  }
}

export default useSomeHook

Aslında bunu doğrudan kullanıcı snippet’lerinize koyabilirsiniz, bu nedenle her şeyi yazmak (veya kopyalayıp yapıştırmak) yerine, yapılandırdığınız snippet’i oluşturmak için yalnızca özel bir önek yazmanız yeterlidir.

Eğer gidersen File > Preferences > User Snippetsseçeneğine tıklayarak isteğe bağlı olarak yeni bir global snippet oluşturabilirsiniz. New Global Snippets File.

Örneğin, bir TypeScript React projesi için kendi snippet dosyanızı oluşturmak için New Global Snippets Fileyazın typescriptreact.json ve sizi yeni oluşturulan bir .json TypeScript kullanılarak oluşturulan React uygulamaları için kullanabileceğiniz dosya.

Örneğin, yukarıdaki kod örneğinden bir kullanıcı parçacığı oluşturmak için bunu şu şekilde yaparsınız:

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

Bunu yerine getirerek, .tsx ile biten yeni bir TypeScript dosyası oluşturabilir, bfe önekini yazabilirsiniz ve snippet’i oluşturmak için bir öneri görünecektir.

presleme b + f + e klavyenizde bu pasajı oluşturacaktır:

Tepki uygulamaları veya genel olarak JavaScript geliştirirken hayatımı gülünç derecede kolaylaştıran bazı özel snippet’ler:

{
  "eslint disable line": {
    "prefix": "eds",
    "body": "// eslint-disable-line"
  },
  "eslint disable next line": {
    "prefix": "ednl",
    "body": "// eslint-disable-next-line"
  },
  "// @ts-ignore": {
    "prefix": "tsg",
    "body": "// @ts-ignore"
  },
  "beforeEach(() => {})": {
    "prefix": "bfe",
    "body": ["beforeEach(() => {", "  $1", "})"]
  },
  "dispatch": {
    "prefix": "dispatch",
    "body": "dispatch({ type: '$1'$2 })"
  },
  "import react": {
    "prefix": "reaa",
    "body": "import React from 'react'"
  },
  "comment section": {
    "prefix": "cs",
    "body": [
      "/* -------------------------------------------------------",
      "  ---- $1",
      "-------------------------------------------------------- */"
    ]
  },
  "@param": {
    "prefix": "@param",
    "body": ["/**", " * @param { $1 } $2 - $3", " */"]
  },
  "ref": {
    "prefix": "ref",
    "body": "const $1 = React.useRef<any$2>()"
  },
  "const initialState = {};  reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "function reducer(state = initialState, action) {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  },
  "Form": {
    "prefix": "rform",
    "body": [
      "<Form",
      "  onSubmit={onSubmit}",
      "  subscription={{",
      "    submitError: true,",
      "  }}",
      "  render={({ handleSubmit, submitError }) => (",
      "    <form onSubmit={handleSubmit}>",
      "      $1",
      "    </form>",
      "  )}",
      "/>"
    ]
  },
  "immer": {
    "prefix": "immer",
    "body": ["import { useImmer } from 'use-immer'"]
  },
  "React.useState": {
    "prefix": "ustate",
    "body": ["const [$1, $2] = React.useState($3)"]
  },
  "React.useEffect": {
    "prefix": "eff",
    "body": ["React.useEffect(() => {", "  $1", "}, [$2])"]
  },
  "React.useContext": {
    "prefix": "ctx",
    "body": ["const $1 = React.useContext($2)"]
  },
  "context": {
    "prefix": "context",
    "body": [
      "import React from 'react'",
      "// import { $1 } from './$1'",
      "",
      "const context = React.createContext<undefined | any>(undefined)",
      "",
      "export default context"
    ]
  },
  "context provider": {
    "prefix": "provider",
    "body": [
      "import React from 'react'",
      "import $1 from './$1'",
      "",
      "function $2({ children }: { children: React.ReactNode }) {",
      "  const ctx = {",
      "    // $3",
      "  }",
      "  return (",
      "    <$1.Provider value={undefined}>",
      "      {children}",
      "    </$1.Provider>",
      "  )",
      "}",
      "",
      "export default $2"
    ]
  },
  "react-final-form": {
    "prefix": "rff",
    "body": ["import { Form, Field } from 'react-final-form'"]
  },
  "classnames": {
    "prefix": "cx",
    "body": "import cx from 'clsx'"
  },
  "typeof window !== 'undefined'": {
    "prefix": "isbrowser",
    "body": ["if (typeof window !== 'undefined') {", "  $1", "}"]
  },
  "process.env.NODE_ENV === 'development'": {
    "prefix": "isdev",
    "body": ["if (process.env.NODE_ENV === 'development') {", "  $1", "}"]
  },
  "import { useSelector, useDispatch } from 'react-redux'": {
    "prefix": "rsd",
    "body": "import { useSelector, useDispatch } from 'react-redux'"
  },
  "import isString from lodash/isString": {
    "prefix": "isstr",
    "body": "import isString from 'lodash/isString'"
  },
  "import isFunction from lodash/": {
    "prefix": "isfnc",
    "body": "import isFunction from 'lodash/isFunction'"
  },
  "import isUndefined from lodash/isUndefined": {
    "prefix": "isund",
    "body": "import isUndefined from 'lodash/isUndefined'"
  },
  "import isArray from lodash/isArray": {
    "prefix": "isarr",
    "body": "import isArray from 'lodash/isArray'"
  },
  "import isNaN from lodash/isNaN": {
    "prefix": "isnan",
    "body": "import isNaN from 'lodash/isNaN'"
  },
  "import isNumber": {
    "prefix": "isnum",
    "body": "import isNumber from 'lodash/isNumber'"
  }
}

Bir cevap yazın

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