CategoryUžitečné nástroje

.prettierrc.json

Tento JSON stačí umístit do root adresáře projektu uložit do souboru .prettierrc.json

Mohlo by se hodit

Options
Konfigurační soubor
Ignoring code
ESLint integration
Watching changes

Otevírání souborů z terminálu na MacOS

Už je to nějaký ten rok, co jsem nahradil, ke své spokojenosti, plně funkční notebook s OS Linux v distribuci Fedora, za svého prvního Meka.

Aby hned bylo jasné, že to nebylo jen tak! Měl jsem stroj, který v té době měl ojedinělých 32GB RAM, Intel i7 a FullHD LCD! Prostě bomba!

Byl jsem extrémně efektivní na konzoli. Vyvíjet, nasazovat a spravovat vše co mi běželo na linuxech byla jedna radost.

Nicméně problémy přicházely v momentech, kdy jsem měl pracovat třeba s MS dokumenty, koukat na filmy, nebo tak něco. Neříkám, že se to nedalo řešit, ale práce s tím byla…

A to byl vlastně důvod pro svůj přechod na Mac. Chtěl jsem zůstat maximálně efektivní a získat nějaké přívětivější prostředí. Přechod na Widle byl samozřejmě nemožný. Bez toho, že bych chtěl nějak rozdmýchávat nějaké svaté války to tak prostě je, Dodnes si myslím, že když vyvíjíte, nasazujete, hrajete si, zkoušíte a chcete to dělat často a pohodlně, pak prostě Windowsy ne!

Půl roku jsem chodil jak mlsný pes kolem a analyzoval vše, co jsem potřeboval vědět, abych si jednoho dne mohl svého Meka koupit. První Pročko, které jsem si pořídil nebylo tak výkonné, jak stroj který jsem s ním nahrazoval, ale jiné jeho přednosti, sladěnost celého prostředí a benefity, které nabídl celý ekosystém Applu vše nahradily.

Apple si mě získal a dnes bych si nedokázal představit, že bych měl pracovat na něčem jiném.

Nicméně dodnes se snažím zůstat maximálně efektivní a většinu času dál trávím v terminálu, který jen tak mimochodem, mám na Meku ještě radši, a to díky i iTermu.

A tady se dostávám k utilitě, na kterou jsem narazil tento týden a která mi umožňuje ještě více a efektivněji pracovat na příkazové řádce.

duti

duti je utilita, která vám umožní spravovat asociace souborů dle svých přípon s konkrétními aplikacemi nainstalovanými do vašeho MacOS. Jinými slovy: můžete přímo v terminálu zjišťovat a nastavovat kterou aplikací se daný soubor má otevřít. To je velice pohodlné právě v případě, že jste v terminálu a používáte příkaz open pro fyzické otevření, editaci souboru. Díky příkazu open nemusíte zjišťovat s jakou aplikací je soubor spojen. Prostě se vám otevře v té spravná aplikaci. No a proto duti.

Instalace utility

Zjištění souborové asociace

Získáte info o tom, jaká aplikace je asociovaná k souborům s příponou js.

Nastavení souborové asociace

Nastaví Insider jako výchozí aplikaci pro všechny JS soubory.

Získání ID aplikace

Abyste dokázali nastavit požadovanou aplikaci, potřebujete znát její ID. K tomu slouží utilita osascript, pomocí které požadované ID získáte:

Aplikace Visual Studio Code – Insiders.app má ID com.microsoft.VSCodeInsiders

Hotovo

Takto můžete upravovat asociaci pro jakýkoliv soubor v rámci vašeho stroje a terminál se stane vašim skutečným přítelem, pokud se tak už nestalo. 😀

Z shell

Vedle samotného vývoje se zabývám devops činnostmi, ke kterým patří různé práce na strojích v drtivé většině s OS Linux. Hodně času trávím v sehllu. Na většině serverech je výchozím shellem bash a mě až do nedávné doby nenapadlo nevyzkoušet žádný jiný shell. A že jich je….

Až do minulého týdne. Po velmi dlouhé době jsem se vrátil k zshellu. Podařilo se mi dotáhnout instalaci až do konce a jsem nadšený… Nejenže zshel vystřídal na mém mekovi stantdartní a defaultní bash, ale nainstaloval jsem si jej i na ostatní servery, na kterých provádím nějaký deploy.

Jednu z nejsilnějších stránek zshellu vidím super konfigurovatelnost promptu a jeho možnosti vizualizace. Prompt v zshellu vypadá opravdu skvěle. A nakonfigurovat jej je skutečně hračka.

zshell

Na první pohled vidím, že nejsme na svém stroji, ale na nějakém serveru, vidím kde jsem, ale co je největší přínios, hned vidím kde jsem v gitu, na jaké jsem branchi a jak si na něm vedu. Mám aktuální zdrojáky? Nejsem v nějaké změně dopředu? Integrace promptu s zsehllem je super!

Vedle toho jsem si dokonfiguroval pravou stranu promptu: odebral jsem všechny možné skopičiny a nahradil jej jen jednoduchou notifikací informace s návratovou hodnotou provedeného příkazu.

Další drobnost, ketrá potěší. Už žádné echo $?, ale jasně zobrazený výsledek i s exit statusem…

A těch drobností je mnohem. Víc.

zshell: instalace

1. instalace samotného zshellu

Pokud jste na mackovi stačí jen přes brew:

A pak už jen výměna defaultního bash za zshell:

2. instalace oh-my-zshell

Oh My Zsh je skvělá nadstavba pro zshel!

3. instalace themes pro oh-my-zshell

4. kustomizace promptu

Finální úprava konfigurace v ~/.zshrc

5. změna fontu v terminálu

Aby se všechny znaky korektně zobrazovaly, je potřeba si v terminálu nastavit font, který tyto znaky umí. Jedná se o fonty, které obsahují ve svém názvu slovo Powerline. Odkaz na fonty najdeš níže.

font

iTerm2 -> Preferences -> Profiles -> Text -> Font

6. doinstalovani pluginu

je pak jeětě potřeba do sekce plugins pridat zsh-autosuggestions a zsh-syntax-highlighting

Hotovo!

Může se hodit:
Powerlevel9k
Powerline fonts
Oh My Zsh

HTTP server

Pokud píšete nějaký ten frontend, nebo jen jednoduchou HTML stránku, kterou musíte servírovat přes HTTP protokol a nestačí vám jen její otevření přes file://, pak se vám určitě bude líbit npm balíčk http-server, který dělá přesně to, co jeho název napovídá: servíruje obsah adresáře ve kterém byl spuštěn jako každý webový server (Apache, Nginx…).

Výhodou je, že neni potřeba nic konfigurovat, nastavovat. Stačí jen skrze NPM globálně nainstalovat a pak už jen spustit v adresáři, kde máte svůj frontendový projekt. Hotovo 🙂

Samozřejmostí je logováni do konzoly, a docela bohaté možnosti konfigurace samotného serveru:

Instalace

Spuštění serveru

A pěkné je, že…

Server umí i

  • HTTPS
  • listing adresáře
  • servírování gzipem
  • CORS

Python alternativa

Podobnou funkcionalitu samozřejmě nabízí i Python:

MS Visual Code klávesové zkratky

Zkrakta Vyznam
⇧⌘V Nahled MD souboru
⌘K V MD view the preview side-by-side

Microsoft Visual Studio Code

Alternativně jsem vedle Atomu začal používat Microsoft Visual Studio Code.

Několika prvních postřehů:

  1. Editor je pěkně rýchlý…
  2. Jeho konfigurační možnosti vypadají srovnatelně s Atomem…
  3. Existují stejné pluginy, které používám v Atomu, ale s různými klávesovými zkratkami. Dá se přenastavit a editor pro key-binding je povedený, přehledný…

Jediný problém, na který jsem narazil, nicméně jej hned odstranil bylo, že jsem nemohl v iTermu pohodlně spouštět Code přimo s obsahem daného aktuálního adresáře.
Řešením je přidání následující funkce do .bash_profile a pak už spustíte MSVS Code odkudkoliv jednoduše zadáním příkazu code

ESLint

Dnes jsem přešel z JSHintu na ESLint. Tím asi nejpádnějším důvodem je podpora Reactu, respektive jeho JSX a lepší monžnosti konfigurovatelnosti. Musím ale dodat, že jsem se bránil do poslední chvíle. Důvodem byla třeba rychlost lintování: JSHint mi zdrojáky lintoval rychleji… A tohle je informace, kterou se nikde nedočtete.

Než jsem switchnul, pročetl jsem kde co, abych zjistil, že:

  • JSHint je fork původního JSLintu
  • ESLint je dnes už asi více používaný než JSHint, který je tady nicméně déle
  • velké a významné IT používají ESLint…

ESLint, stejně jako JSHint, fungují dobře jak v Atomu, tak i Sublime, což jsou dnes už jediné editory, které dnes používám (když nepočítám Vim…).

Co se mi asi na ESLintu o trochu víc líbí je jeho konfigurace. Konfigurační soubor můžete mít jak v JSON souboru, tak v JS, ale i v Yamlu. V rámci projektu můžete mít v root adresáři výchozí konfiguraci pro ESLint a v dalších jeho podadresářích můžete mít specifické, upravené konfiguráky dle konkrétní potřeby. Vedle toho můžete použít něčí best-practice vzorový konfigurák, ten použít jako základ a upravit jen to chcete jinak…

V ESLintu samozřejmě funkují inlajnované directivy pro linter vkládané přímo do souborů se zdrojáky, stejně jako v JSHintu.

Instalace

HTTPie

Píšu API server v NodeJS, kde hodně práce zabírá samotné testování funkčnosti, které spočívá v posílání requestů na API server a následně analýzu jejich response.

1. request, jako každý, pošlete z vašeho prohlížeče. Super. Funguje. Pak začnete do hlavičky dopisovat nějaké autorizace, nebo předáváte nějake proměnné a prohlížeč vám přestane ihned stačit. Respektive se musíte přepnout do nějakého Dev rozšíření a někde v oknech vykoukávat co se děje. Pro mě dost nepřehledné a navíc těžko automatizovatelné.

Pak najdete Postman, což je skvělý nástroj na posílání téměř čehokoliv na server s možností sledovat co vám server vrací. Opět se ale jedná o okenní aplikaci, kde se zase hodně kliká. Apka běží na všech OS, je možné jí mít jako rozšíření v Chromu a design je opravdu podařený, protože je hodně materialistický a zaměřený na to co má dělat.

Krokem dál v komunikaci s API serverem, co se efektivity práce samotného zasílání requestů týče, je CURL. Jedná se o nástroj spouštěný z příkazové řádky. Super. Žádná věci navíc, jen URL API server a nějaké parametry na příkazové řádce, které chcete na server poslat. Odměnou je vám respons v textovém tvaru v terminálu. Super. Přesně co chcete. S jedinou připomínkou: výstup je dost nepřehledný a musíte v něm očima hledat, což v případě, že si posíláte zpět nějakou komplexnější strukturu a ještě chcete vidět třeba hlavičky odpovědi je docela nepohodlné a unavuje.

HTTPie

A nakonec jsme našel HTTPie. Skvělý nástroj na příkazové řádce, který se možnostmi plně vyrovná curlu, ale jeho výstup je přímo excelentní. HTTPie běží jak pod Oknama, tak na Macovi, a teké na Linuxex (odzkoušeno na distru Centos a Fedora), podporuje HTTPS a má pěkný JSON parser, včetně barviček pro zvýraznění výstupu. Vše je přehlednější, takže se s tím lépe pracuje a tím pádem jste efektivnější.

Mongotron

Narazil jsem na Mongotron, skvělou aplikaci pro práci s MongoDB. Konkrétně pro práci s daty uloženými někde v Mongu. Sympatické na Mongotronu je to, že je napsaný v JavaScriptu a díky Electronu se tváří jako plnohodnotná desktopová apklikace. Mongotron je vzhledem velice podobný Atomu, takže pokud jste příznivcem Atomu, rychle si Mongotron oblíbíte.

mogotron

Mongotron je OpenSource a je na všech platformách zdarma.

Atom a terminál

Nedovedu si představit, že bych něco vyvíjel a nepoužíval u toho terminál. A je jedno v jaké fázi vývoje: kódování, deploy aplikace na server, práce s git repozitáčem, či cokoliv jiného… Terminál potřebuji stále. A proto vždy spouštím nejdřív xTerm2 a v něm pak Atom.
Mezi jednotlivými aplikacemi přepínám, což není nejpohodlnější a taky nejefektivnější a nejpřehlednější. Vždy musíte řešit jak nastavit okna abyste viděl to co chcete…

No a tady pomůže integrace terminálu přímo do Atomu. Různých pluginu pro Atom existuji více. Většinu z nich jsem opravdu vyzkoušel, abych si nakonec jako nejleší vybral terminal-plus. Krom toho, že opravdu umí vše co od terminálu očekáváte, má skvělou integraci do Atomu. Všechno spolu dobře a pěkně vypadá, radost terminál použít.

atom-terminal-plus

atom-terminal-plus

Plugin má skvělé konfigurační možnosti a dá se nastavit téměř cokoliv. Co mě potěšilo je kompatabilita vyhledu s barevným schématem atom-material-ui, který používám. Bomba je možnost spustit/otevřít více terminálových oken, ty si barevně odlišit a třeba i přejmenovat. Do terminálu se odkudkoliv v editoru pohodlně dostanete klávesovou zkratkou ctrl+`.

Terminál v Atomu je skutečně užitečný plugin, zvyšující efektivitu práce v něm.

© 2018 pepa.holla.cz

Theme by Anders NorénUp ↑