Přejít k obsahu Přejít k hlavnímu menu

SUPERKODERS

IDE ninja 🥷

Zrychlete vaše vývojářské dovednosti pomocí klávesových zkratek, user snippetů a rozšíření do editorů

Eliška Plitzová 5. února 2024 8 min. čtení

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

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 + CCTRL + 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 + PTransform 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 + POpen 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 snippets

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 + PConfigure 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.

Ukázka user snippetu pro vložení zápisu pro include
Ukázka user snippetu pro vložení zápisu pro include komponenty

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 blankrel 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}"
    	]
    }
  • Ukázka user snippetu pro vložení základu SCSS souboru
    Ukázka user snippetu pro vložení základu SCSS souboru

⚔️⚔️⚔️

Rozšíření

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

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.

Porovnání verzí souborů v PHP Stormu
Porovnání verzí souborů v PHP Stormu

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 :)

⚔️⚔️⚔️

Závěrem

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 🔥!

Chceš se bavit s námi?

Hledáme do týmu další zapálené vývojáře.
Mrkněte na kariéru a napište Michalovi.

Michal Matuška | CTO +420 737 770 642

Michal Matuška