Jak si jako vývojář zpříjemnit vývojové prostředí?

22nd Listopad 2018

Napsal/a Tým Pixelfield

Několikátým rokem se orientuji v informačních technologiích a za tu dobu jsem narazil na poměrně mnoho zlepšováků a vychytávek. Rád bych vám tedy předal jeden z tipů, jak si lehce zpříjemnit denní stereotyp ve vašem pracovním – vývojovém prostředí.

V mém případě mi vždy záleželo na nastavení vývojového prostředí, které na mě působí příjemně a práce mě v něm baví. Nejen, že je pak práce příjemnější, ale i efektivnější. Úprava a stylizace pracovního prostředí je podle mého názoru velice důležitý aspekt, který se odvíjí na kvalitě a plynulosti práce. Toho se dá docílit správnou volbou textového editoru, případně vývojového prostředí, tzv. IDE (Integrated development environment). Pokud nejste vývojář ani programátor, stále to neznamená, že se nehodí mít kvalitní textový editor. V dnešní době se najde stále více pozic, kde pracujete s textovými soubory, např. xml či csv. V takovém případě se hodí mít “mocný” textový editor, se kterým můžete vidět zvýrazněnou syntaxi na základě typu souboru a data tak upravovat velice efektivně. Existuje celá řada takových nástrojů. Jak ale vybrat ten správný?

Mojí volbou je Visual Studio Code. Je to skvělá kombinace textového editoru a IDE zároveň. Lze do něj doinstalovat doplňky ve formě pluginů, kterých je opravdu nespočet. Jeví se příjemným tmavým look & feel dojmem, který si můžete samozřejmě stylizovat pomocí témat či různých balíků ikon a dovést tak vzhled prostředí k dokonalosti dle vaší libosti. VS Code je open source, tedy zdarma a dostupný pro všechny stávající operační systémy – Windows, Linux a MacOS z oficiálních stránek – https://code.visualstudio.com.

VS Code obsahuje tzv. Extension Manager, přes který lze instalovat doplňky. Celé prostředí je intuitivní a instalace samotných pluginů probíhá v rámci pár kliků.

Pluginy:

Také na stránce https://code.visualstudio.com lze stahovat doplňky, kde máte podrobný popis daného pluginu, popř. hodnocení. Následující pluginy bych vám rád doporučil. Výběr se odvíjí od mého zaměření, takže ne každému tyto pluginy přijdou vhod.

	HTML 5 Boilerplate – Jednoduchý plugin, který vám pomocí příkazu “html5” vygeneruje základ HTML souboru s hlavičkou a nejčastějšími meta tagy. Ušetří tak opakovanou práci, při začátku nového projektu.
	Git History – plugin, který jednoduše zobrazí historii verzování projektu s vaším git repository. Lze porovnávat starší soubory s aktuálním workspace.
	Material Icon Theme – Sada velmi pěkných ikonek, které nahradí klasické strohé ikony souborů v aktuálním workspace a na základě souborových přípon připojí korespondující stylovanou ikonu.
	Material Theme – Pro změnu sada témat, které změní vizuální stránku celého textového editoru k lepšímu. Obsahuje asi 8 zákl. barevných kombinací.
	SSH FS – SSH FS slouží nejen ke vzdálenému připojení na cílovou stanici pomocí SSH protokolu, ale umožňuje také otevření cílového adresáře do workspace (pracovní složky) vzdáleně, tudíž není nutné stahovat celý adresář s projektem.
	FTP-Simple – Velmi podobné SSH FS, ale s tím rozdílem, že komunikujete se vzdálenou cílovou stanicí přes protokol FTP.
	Autoprefixer – Tento plugin slouží k automatickému přidání css prefixů k css properties a zařídí tak kompatibilitu s jinými webovými prohlížeči. Usnadní práci.

Font:

Dalším příjemným vylepšením je použití tzv. ligatury textu. Co znamená ligatura? Vysvětlení můžete najít např. zde – https://cs.wikipedia.org/wiki/Ligatura_(typografie) Je také třeba zvolit vhodný font, který tuto typografickou funkcionalitu podporuje. V mém případě používám Fira Code – https://github.com/tonsky/FiraCode Font nainstalujte na váš operační systém a ve VS Code pomocí zkratky ctrl+shift+p nebo cmd+p otevřete command panel a zadejte slovo “settings”. Objeví se výběr ze dvou možností, zvolte tu s (JSON). Otevře se konfigurační soubor VS Code, ve kterém můžete personalisovat vlastní konfiguraci toho textového editoru. Pokud chcete aktivovat ligaturu, vložte následující dva řádky kódu do nastavení.

“editor.fontFamily”: “‘Fira Code'”,

“editor.fontLigatures”: true,