logo

Zlepšete svou produktivitu při práci s React provedením těchto změn v kódu Visual Studio

V tomto článku uvidíme některá nastavení, která můžete provést v kódu Visual Studio, abyste zlepšili svou produktivitu při práci s React

Takže začneme

Povolit emmet pro React

Pokud jste vývojář HTML/CSS, možná už znáte plugin emmet.
Poskytuje automatické dokončování pro kód HTML a CSS tím, že snižuje potřebu dalšího psaní.
Ve výchozím nastavení je již zahrnuta pro všechny soubory HTML a CSS v kódu VS, ale musíme provést další konfiguraci, abychom ji povolili pro React.

Postup aktivace:

  • Ve Visual Studio Code stiskněte Control + Shift + P nebo Command + Shift + P (Mac) otevřete paletu příkazů a zadejte nastavení a poté vyberte "Preferences: Open User Settings" možnost

  • Na levé straně rozbalte nabídku rozšíření a klikněte na emmet

  • Poté klikněte na "Edit in settings.json" odkaz pod "Include Languages" sekce

  • Po otevření přidejte "javascript": "javascriptreact" pod "emmet.includeLanguages" a uložte soubor. 

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

  • Jste hotovi.

Nyní otevřete libovolný soubor součásti v React a zadejte .container a stiskněte klávesu Tab a automaticky se dokončí 

<div className="container"></div>

nebo zadejte ul.list a stisknutím tabulátoru jej převeďte na 

<ul className="list"></ul>

Tato malá konfigurace vám ušetří spoustu času, protože nebudete muset psát className pokaždé přidat nový class v React.

Tipy navíc:

  1. Pokud jste vytvořili nový .html místo psaní doctype , head , meta a body tagy sami, stačí napsat vykřičník (! ) a stiskněte tabulátor a emmet přidá výchozí HTML kód

  2. Pokud chcete vygenerovat nějaký náhodný text lorem ipsum, zadejte p*4>lorem a stiskněte tabulátor a emmet přidá 4 odstavce s nějakým náhodným textem lorem ipsum

  3. Chcete-li přidat více tříd, například list a item do stejného prvku zadejte .list.item a stiskněte tabulátor, který bude převeden na 

<div className="list item"></div>

Pokud jste v souboru CSS, můžete pro přidání jakékoli vlastnosti použít zkrácenou syntaxi. Např. Chcete-li přidat letter-spacing z 10px stačí napsat ls10 a stiskněte tabulátor a bude převeden na letter-spacing: 10px

Chcete-li se dozvědět více o zkratkách emmet, klikněte ZDE

Automaticky formátovat kód při uložení souboru

Nainstalujte Prettier rozšíření pro VS Code, což je Opinionated Code Formatter, který formátuje kód napsaný v Javascriptu, Angular, Vue, React, Typescript a mnoha dalších jazycích.

Instalace:

  1. Klikněte na ikonu rozšíření v kódu VS
  2. Vyhledejte "prettier"
  3. Uvidíte rozšíření z Prettier
  4. Klikněte na tlačítko instalace
  5. Po instalaci rozšíření stiskněte tlačítko Znovu načíst nebo restartujte kód VS

Použití:

  • Chcete-li soubor při ukládání automaticky naformátovat, stiskněte v kódu Visual Studio Control + Shift + P nebo Command + Shift + P (Mac) otevřete paletu příkazů a zadejte setting a poté vyberte "Preferences: Open User Settings" možnost
  • Vyhledejte "format on save" nastavení a zaškrtněte políčko.

A je to! gratuluji! Nastavili jste hezčí formátování podle výchozího nastavení.

Nyní otevřete libovolný kód React. Řekněme, že váš kód vypadá takto

Pokud soubor uložíte pomocí Ctrl + S nebo (Command + S for Mac) , hezčí naformátuje váš kód, jak je uvedeno níže

Toto je mnohem hezčí a podle pokynů pro styl React.

Pokud máte kód jako tento

Po uložení bude formátován takto

Nyní si tedy nemusíte dělat starosti s přidáváním nebo odebíráním mezery nebo přesouváním kódu na druhý řádek, pokud se nevejde na jeden řádek. Prettier dělá tuto práci za vás automaticky.

Díky tomu budete produktivnější, protože nebudete ztrácet čas formátováním kódu

Někdy se může stát, že nechcete, aby formátování provedlo hezčí a chcete si ponechat vlastní formátování pro konkrétní soubor, pak můžete postupovat podle následujícího kroku

  • Ve Visual Studio Code stiskněte Control + Shift + P nebo Command + Shift + P (Mac) otevřete paletu příkazů a zadejte save a poté vyberte "Save without Formatting" možnost

Pokročilé konfigurace

Pokud chcete větší kontrolu nad formátováním, program Prettier to také umožňuje.

Vytvořte soubor s názvem .prettierrc (tečka prettierrc) v kořenovém adresáři vašeho projektu a přidejte konfiguraci podle potřeby

Přidejte například následující JSON do .prettierrc soubor 

{
 "singleQuote": true,
 "trailingComma": "none"
}

SingleQuote:true použije jednoduché uvozovky místo dvojitých uvozovek pro řetězce ve vašem kódu

trailingComma:"none" odstraní všechny koncové čárky z deklarace objektu ve vašem souboru

Všechny možnosti konfigurace naleznete ZDE.

Automaticky přidat středník na konec řádku

Ve výchozím nastavení hezčí nepřidává středník za každý řádek jako volitelný.
Pokud tedy chcete středník, máte dvě možnosti

  • Do souboru .prettierrc přidejte následující kód
{
  "semi": true
}
  • Ve Visual Studio Code stiskněte Control + Shift + P nebo Command + Shift + P (Mac) otevřete paletu příkazů a zadejte setting a poté vyberte "Preferences: Open User Settings" a vyhledejte prettier semicolon a zaškrtněte políčko

Jak je vidět výše, poté, co povolíme možnost přidat středník, když soubor uložíme pomocí Ctrl + S nebo (Command + S for Mac) , bude ke každému výpisu automaticky přidán středník.

Nainstalujte rozšíření React snippets

Nainstalujte ES7 React/Redux/GraphQL/React-Native snippets rozšíření pro kód VS

Toto rozšíření nám umožňuje rychle přidávat úryvky do našeho kódu při práci s Reactem.

Stačí zadat počáteční znaky do souboru a stisknout Enter pro dokončení tohoto úryvku.

Níže jsou uvedeny některé z nejpoužívanějších předpon, které nám umožňují přidat úryvek:

  1. imr :import React z 'react'
  2. imrd:import ReactDOM z 'react-dom'
  3. imrc:import React, { Component } z 'react'
  4. rcc:přidat kód komponenty založený na třídě reakce
  5. rfc:přidat kód funkční komponenty reakce
  6. est:přidat stav ke komponentě
  7. sst:přidat volání this.setState
  8. cdm:přidá metodu životního cyklu componentDidMount
  9. cdu:přidá metodu životního cyklu componentDidUpdate

Některé další předpony:

  1. rafce:přidá funkční komponentu s příkazem export (toto je jedno z mých oblíbených)
  2. rce:pomocí příkazu export přidejte komponentu na bázi třídy reakce
  3. impt:přidat import typů rekvizit
  4. clg:přidat příkaz console.log

Existuje mnoho užitečných předpon, které najdete ZDE

Nezapomeňte se přihlásit k odběru mého týdenního zpravodaje s úžasnými tipy, triky a články přímo do vaší schránky zde.