IDE ninja 🥷

Pokud jste vývojář, určitě chcete být rychlý a efektivní při psaní kódu. Ať už pracujete na malém nebo velkém projektu, v jakémkoli jazyce nebo prostředí, využíváte každou možnost, jak zlepšit svou produktivitu.

V tomto článku vám ukážeme pár tipů, jak můžete zrychlit kódování s pomocí klávesových zkratek, user snippetů a rozšíření do editorů. Zaměříme se primárně na editory VS Code a PHPStorm.

⚔️⚔️⚔️

Klávesové zkratky umožňují rychle provádět běžné úkoly, jako je hledání, nahrazování, formátování nebo generování kódu. Všichni známe hojně používané zkratky CTRL + C a CTRL + V. Existuje však plno dalších zkratek, které vás dokážou pořádně naboostovat, co se rychlosti produkování kódu týče.

Každý editor má své vlastní zkratky, které se mohou lišit podle platformy nebo nastavení. Můžete si také vytvořit i své vlastní zkratky dle vašich konkrétních potřeb.

Níže naleznete pár nejčastějších zkratek, které jsou pro nás must-know.

Klávesové zkratky ve VS Code

Ke studiu doporučujeme přehled všech klávesových zkratek pro Windows Externí odkaz i MacOS Externí odkaz . Jestli ale chcete šetřit čas, níže je seznam vybraných a námi používaných zkratek:

CMD + D // z označeného výrazu vyhledá další výskyt v souboru
CMD + F2 // z označeného výrazu vyhledá všechny další výrazy v souboru
CMD + Shift + F // vyhledání v celém projektu
CMD + Shift + H // nahrazování v celém projektu
CMD + K + L // zabalování/rozbalování bloků
CMD + Shift + P // zmenšení textu na lowercase
CMD + Shift + P // zmenšení textu na uppercase
CMD + P // vyhledávání souborů
CMD + B // otevřít/zavřít boční panel
CMD + K + W // zavře všechny taby

Klávesové zkratky v PHPStormu

Přehled všech klávesových zkratek naleznete zde: Windows Externí odkaz , MacOS Externí odkaz . Vybrali jsme jen ty, které nejvíce využíváme:

F1 // při stisku na konkrétním souboru vám ukáže jeho velikost, datum změny apod.
F2 // přejmenování souboru
CMD + , // otevře nastavení editoru PHPstorm
CMD + Shift + O // vyhledání souboru v celém projektu
2x Shift // vyhledání čehokoliv v celém projektu včetně funkcí z menu apod.
Control + G // vyhledá všechny shody s označeným obsahem v souboru
Control + Shift + G // odebírá shody s označeným výrazem v souboru
CMD + Shift + V // multiple clipboard, funguje i mezi více okny PHPstormu
CMD + Shift + U // přepis textu na lower/upper case
Control + Space // ukáže všechny verze knihovny (lze pak jednoduše povyšovat verze)

Vlastní zkratky ve VS Code

Často se nám stává, že v grafických podkladech jsou texty capslockem, což je pro nás nežádoucí. Jejich zvětšení by mělo být přes styly. Pro jejich zmenšení lze buď použít zkratka CMD + Shift + P → Transform to lowercase (viz klávesové zkratky výše), nebo si můžete sami vytvořit přímo dedikované klávesové zkratky na transformaci textu na lowercase či uppercase.

Do nastavení klávesových zkratek ve VS Code se dostanete přes nabídku CMD + SHIFT + P → Open keyboard shortcuts (JSON). Zde si můžete definovat vlastní zkratky a akce.

Převod textu na lowercase:

{ "key": "ctrl+alt+cmd+down", "command": "editor.action.transformToLowercase" }

Převod textu na uppercase:

{ "key": "ctrl+alt+cmd+up", "command": "editor.action.transformToUppercase" }

⚔️⚔️⚔️

User snippety Externí odkaz (aneb uživatelské fragmenty kódu pro ty, kteří neholdují anglické lokalizaci), jsou šablony, které usnadňují psaní opakujících se částí kódu. Jednoduše napíšete nějakou předdefinovanou část textu nebo kombinaci znaků a po odentrování se text nahradí předvoleným kódem. Ve VS Code se user snippety zobrazují v IntelliSense Externí odkaz IntelliSense nabídce spolu s dalšími návrhy.

Jak vytvořit user snippety ve VS Code

Do správy user snippetů se dostanete před nabídku CMD + SHIFT + P → Configure user snippets. Zde můžete vytvořit nový JSON soubor. Snippety zpravidla dělíme do souborů podle toho, pro který jazyk jsou.

Více o tvorbě user snippetů naleznete v dokumentaci Externí odkaz . Vypíchneme však použití tabstopů ($1, $2, …), díky kterým se po vložení můžete tabulátorem pohybovat po vydefinovaných místech.

Příkladem může být snippet pro vložení odkazu, kde chcete mít kurzor v src atributu a po vepsání se přes tabulátor přesunout dovnitř značky.

Podobně fungují placeholdery s následujícím zápisem: ${1:foo}. Rozdíl je ten, že po vložení máte předvyplněný a označený vzorový text, který začnete přepisovat.

Užitečné je i omezení snippetu pouze pro určité jazyky (parametr scope) nebo používání proměnných Externí odkaz uvnitř snippetu.

Příklady našich user snippetů

• Vložení target blank a rel atributů do odkazů

  "Blank": {
  	"prefix": "blank",
  	"scope": "html, nunjucks, twig, typescriptreact",
  	"body": [
  		"target=\"_blank\" rel=\"noopener noreferrer\"$1"
  	],
  	"description": "Target blank"
  }

• Rychlý BEM zanořený zápis v SCSS

  "bem element": {
  	"prefix": [
  		"_"
  	],
  	"body": [
  		"&__$1"
  	],
  	"description": "bem element shortcut"
  }

• Vygenerování media query (podobně máme nadefinováno pro všechny kombinace up i down)

  "mdup": {
  	"prefix": [
  		"mdup"
  	],
  	"body": [
  		"@media (config.\\$md-up) {",
  		"    $0",
  		"}"
  	],
  	"description": "mdUp"
  }

• Základ SCSS souboru - vloží includy a předoznačí název komponenty (podobné máme i například pro Latte soubory)

  "Include base CSS component with @use": {
  	"prefix": "base",
  	"body": [
  		"@use 'config';\n@use 'base/variables';\n@use 'base/functions';\n@use 'base/extends';\n\n.b-${1:component} {\n\t//\n}"
  	]
  }

⚔️⚔️⚔️

S rozšířeními se určitě už každý vás setkal, ať už pro VS Code Externí odkaz , PHPStorm Externí odkaz nebo jakýkoliv jiný editor. Přeskočíme Prettier, ESLint, Stylelint a podobné must-have rozšíření a dáme vám pár tipů na ty (možná) méně známé.

VS Code

• Gremlins Externí odkaz zobrazuje neviditelné znaky, jako pevné mezery, zalomení, apod.
• Auto Close Tag Externí odkaz umožňuje uzavření tagů pomocí zkratky CMD + OPTION + .
• Auto Rename Tag Externí odkaz urychlí automatické přejmenování párových tagů.
• Highlight Matcing Tag Externí odkaz slouží pro zvýraznění uzavíracího nebo otevíracího tagu při jeho focusu.
• indent-rainbow Externí odkaz využijete pro lepší zvýraznění odsazení pomocí barev.
• SCSS Everywhere Externí odkaz poslouží pro našeptávání použitých tříd na projektu.
• Local History Externí odkaz aneb lokální historie, kdyby selhal i Git.
• PathIntellisense Externí odkaz vám ulehčí psaní cest k souborům díky jeho našeptávání.
• Multiple cursor case preserve Externí odkaz se postará o dodržení velikosti písmen při hromadném přepisování (pomocí CMD + D).
• GitLens Externí odkaz aneb Git historie přímo ve VS Code
  
  

  

• A nakonec náš úlovek Cody AI Externí odkaz z konference FrontKon Externí odkaz . Jedná se o free AI asistenta pro kontrolu kódu, automatické generování podle významu, opravu, vysvětlení funkčnosti a mnoho dalšího

PHPStorm

PHPstorm je na rozdíl od VS Code placeným IDE. Obsahuje téměř vše, na co si kodér může vzpomenou, již v “základním balení”. Automatické uzavírání nebo přejmenování tagů, zvýraznění aktuálního tagu, zobrazení cesty zanoření ve struktuře kódu nebo zvýraznění syntaxe pro prakticky jakýkoliv programovací jazyk.

Velkou výhodou je, že nemusíte používat žádné externí aplikace, jako je FTP klient Externí odkaz , správce Gitu Externí odkaz atd. Všechny často používané nástroje jsou přímo integrovány do PHPStormu.

Velmi pěkně jde například porovnávat verze souborů na serveru s localhostem přes FTP klienta a posílat na server jen určité řádky, bez nutnosti přepisovat celý soubor.

Cody AI

V dnešní době AI je potřeba naboostovat i našlapaný PHPStorm a posunou ho ještě kousek dále. Stejně jako pro VS Code existuje AI extension Cody Externí odkaz , který našeptává, vymýšlí a doplňuje kusy funkcí rychleji, než vy napíšete složenou závorku :)

⚔️⚔️⚔️

Používáte nějaké zajímavé user snippety nebo rozšíření, které se nedostaly na náš hot list? Podělte se s námi 🔥!