A kód tisztán tartása, szebb

A kód formázása triviális témának tűnik, de ez olyasmi, amely befolyásolhatja a kód minőségét és helyességét, a verziókontrollt és a másokkal való együttműködés módját. Ha azonban nem akarja megismerni az utolsó zárójel részleteit, próbálja meg kihelyezni a problémát egy nyílt forráskódú eszközre, a Prettier-re.

A kérdések formázása

A szoftverfejlesztő csapatok számtalan órát vesztegeltek a történelem során a maximális vonalhosszról, vagy arról, hogy melyik vonalon kell menniük. Bármit is mondjon a személyes preferencia, a legtöbb ember egyetért legalább egy dologban: a kód formázásának következetesnek kell lennie egy projekt során.

A Prettier egy eszköz, amelyet ennek elérésére terveztek. Adj neki egy kis kódot, és ugyanazt a kódot adja vissza, következetes formátumban. A Prettier rendelkezik szövegszerkesztő integrációval, parancssori eszközzel és online demóval.

A megfelelő nyelv beszéde

Először is tudni szeretné, hogy a Prettier kompatibilis-e azzal a nyelvvel vagy nyelvekkel, amelyekkel Ön általában dolgozik. A Prettier jelenleg a nyelvek alapvető csoportjára összpontosít, főként a front-end webfejlesztésnek szentelve, többek között:

• JavaScript
• HTML
• CSS
• Sass
• Árleszállítás
• YAML

A pluginok révén további nyelvek nyíltan támogatottak is.

Próbáljon ki szebbet az online játszótér használatával

Mielőtt még megpróbálná telepíteni a Prettier szoftvert, érdemes megnéznie a játszótér. A webes felület segítségével beilleszthet néhány példakódot, és megfigyelheti, hogyan alakítja át a Prettier. Ez nagyszerű módja annak, hogy benyomást szerezzen arról, hogy az eszköz valójában mit csinál, de ez is az elsődleges módszer a Prettier használatára, ha az Ön igényei könnyebbek.

Alapértelmezés szerint a játszótérnek úgy kell kinéznie, mint két alapvető szövegszerkesztő panel, az egyik a bal oldalon a bevitelhez, a másik a jobb oldalon mutatja a Prettier kimenetét. Kezdetben látni fog egy mintakódot, de egyszerűen eltávolíthatja mindezt, és beillesztheti a sajátjába.

Próbálkozzon például a következő JavaScript beírásával:

(függvény ()
{
window.alert ('ok')
}())

A szebbnek ezt kell:

(function () {
ablak.riasztás ("ok");
})();

Alapvetően vegye figyelembe, hogy a Prettier által végrehajtott változtatások a következők:

• Egyidéző ​​karakterláncok konvertálása kettős idézetté
• Kettőspont hozzáadása
• A behúzások konvertálása két szóközre

A bal alsó sarokban található egy gomb, amely lehetővé teszi az opciók megtekintését. Az előző példával próbálkozzon a fül szélességének beállításával, a --egy idézet alatt zászló Gyakori, vagy a --nem félig alatt zászló JavaScript.

Beállítások konfigurálása

A szebbet „véleményesnek” nevezik, szándékos tervezési választás, amely azt jelenti, hogy az egyszerűség és a következetesség érdekében feláldozzák a sajátosságok ellenőrzését. Úgy tervezték, hogy beállítsa, majd elfelejtse, ahelyett, hogy továbbra is foglalkoztatná a kód minden utolsó formázási részlete. (Ha olyan alternatívát szeretne, amelynek minden egyes formázási részlet felett sokkal finomabb az irányítása, próbálja meg eslint.)

A szerzők azonban elismerik azt is, hogy egyes döntések funkcionális hatással vannak a kód kinézetén túl. Néhány lehetőség - köztük néhány régi célból is - megmarad, ezért legalább meg kell értenie, hogy mit csinálnak, még akkor is, ha a Prettier-t alapértelmezett állapotban használja.

A kezelés legjobb módja Szebb lehetőségek konfigurációs fájlba menteni őket. Ezt sokféleképpen lehet megszervezni, de kezdje egy nevű fájl létrehozásával .prettierrc.json a helyi projektkönyvtárban. Bármelyik támogatott opciót tartalmazhatja egy standard JSON objektumban, pl.

{
"tabWidth": 8
}

Ugyanazt a konfigurációs fájlt olvassa el a Prettier, függetlenül attól, hogy a parancssoron vagy a támogatott szövegszerkesztőn keresztül futtatja.

Fonal vagy npm használatával a telepítésnek egyszerűnek kell lennie. Fonalhoz:

$ fonal global add szebb

És npm-re:

$ npm telepítés - globális szebb

Miután globálisan telepítette a Prettier szoftvert, képesnek kell lennie a következő gépelésre:

$ szebb

Alapértelmezés szerint kap egy képernyőt súgószöveggel, amely megerősíti, hogy az eszköz telepítve és megfelelően működik.

Fájl tisztítása

A fájl formázásához használja a következő parancsot:

$ szebb --írja a fájlnevet.js

Ez felülírja az eredeti fájlt, ami gyakran a legkényelmesebb megközelítés. Alternatív megoldásként csak azt szeretné, ha szebbek lennének a projekt minden fájljával szemben:

$ szebb --írja.

A Prettier az aktuális könyvtár alatt található összes fájlon fut, formázva mindazokat, amelyeket felismer.

Az eredményt normál kimenetre is kinyomtathatja, ahelyett, hogy módosítaná az eredeti fájlt, amely lehetővé teszi a kimenet más fájlba mentését, vagy máshova irányítását:

$ szebb test.js> test2.js

Fájl ellenőrzése

Ha szebb beszámolót szeretne készíteni a kód tisztaságáról anélkül, hogy valóban változtatna, használja a --jelölje be zászló egyetlen fájlnévvel vagy sok:

$ szebb - check.

Minden olyan fájlhoz kap egy kimeneti sort, amely nem felel meg a várt formátumnak, a Prettier konfigurációjának megfelelően:

Formázás ellenőrzése ...
[figyelmeztet] .szebb
[figyelmeztet] .prettierrc.json
[warn] A fenti fájl (ok) ban kódstílus-problémák találhatók. Elfelejtette futtatni a Szebbet?

Parancssori opciók

A Prettier standard beállításai parancssori opciókként állnak rendelkezésre, ha szükséges. Íme egy példa arra, hogy a --egy idézet a flag befolyásolja a kimenetet:

$ szebb tmp.js
függvény példa () {
console.log ("szia, világ");
}
$ szebb --single-quote tmp.js
függvény példa () {
console.log ('szia, világ');
}

Segítség kérése

A Parancssor eszköz informatív segítséget nyújt bármely opcióhoz a --Segítség zászló:

$ szebb --help záró vessző
- vonó-vessző 
Nyomja meg a vesszőket, ahol csak lehetséges, többsoros nyomtatáskor.
Érvényes opciók:
es5 Az ES5-ben érvényes vesszők (objektumok, tömbök stb.)
nincs Nincs vessző.
minden záró vessző, ahol csak lehetséges (beleértve a függvény argumentumokat is).
Alapértelmezett: es5

Szövegszerkesztő használata

A Prettier telepítése után különféle esetekben használhatja, attól függően, hogy milyen eszközkészletet használ már. Valószínű, hogy szövegszerkesztőt használ. A Prettier rendelkezik a legnépszerűbb kötésekkel, így a következőket állíthatja be:

Fenséges szöveg

JsPrettier egy Sublime Text plugin, amely elérhetővé teszi a Prettier-t a szerkesztőben. Bár a JsPrettier telepítésének többféle módja van, javasoljuk a Package Control módszer használatát. Telepítenie kell a Prettier szoftvert, majd nyissa meg a Sublime Text parancspalettáját, és válassza a „Package Control: Package Install” lehetőséget:

Ezután keressen rá a „jsprettier” kifejezésre, és kattintson a telepítéséhez:

A JsPrettier telepítése után jobb egérgombbal kattinthat bármelyik megnyitott fájlra a formázáshoz. Beállíthatja a (z) értékét is auto_format_on_save nak nek igaz a JsPrettier beállításaiban, ami azt eredményezi, hogy a JsPrettier automatikusan megtisztítja az összes kompatibilis fájlt, amikor Sublime Text-be menti őket.

Atom

Az Atom telepítése nagyon hasonlít a Sublime Text-re: egyszerűen telepítse a szerkesztő beépített csomagkezelőjével szebb atom:

A telepítés után a használat ismerős: egy parancsikon vagy menüpont lehetővé teszi a fájl formázását igény szerint, míg az Atom beállítás lehetővé teszi a Prettier automatikus futtatását minden fájl mentésekor.

Vim

A Vim egy nagyon hatékony, parancssori alapú szerkesztő, amely nem alkalmas kezdőknek. A VIM-mel való szebb munkavégzés megfelelő módon bonyolult, de még mindig csak néhány lépés:

mkdir -p ~ / .vim / pack / plugins / start
git klón https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-szebb

A Git valószínűleg a legegyszerűbb módszer a szükséges fájlok letöltésére, de minden eszköz, amellyel vim-szebb lesz a kezdő könyvtárban el kell végeznie a munkát.

A telepítés után a Prettier automatikusan elindul, amikor egy fájlt a vi. Azt is bármikor manuálisan futtathatja a Szebb parancs:

Ennek tisztított fájlt kell eredményeznie:

Integrálja a szebbet a projektjébe

Egy olyan kódformázó használata, mint a Prettier, elősegítheti a könnyebben olvasható kódbázis fenntartását. Ez segíthet a viták elkerülésében is arról, hogy melyik stílust kell használni a kódolásnál - csak a szoftvereket bízza a Prettierre!

Végül egy git-kampót fel lehet állítani annak biztosítására, hogy a kód mindig kitisztuljon, amikor elkötelezi magát a projekt adattárában. Az egyes fejlesztők szabadon formázhatják kódjukat, ahogy akarják, de a központi másolat mindig tiszta és következetes lesz.

nano vs. Vim: A legjobb terminál szövegszerkesztők, összehasonlítva

Terminális szövegszerkesztőt keres Linuxhoz? A fő választás a Vim és a nano között van! Így hasonlítják össze.

A szerzőről