Păstrarea codului dvs. curat cu mai frumoasă

Formatarea codului pare un subiect banal, dar este ceva care poate afecta calitatea și corectitudinea codului dvs., modul în care este controlat versiunea și modul în care colaborați cu ceilalți. Cu toate acestea, dacă nu doriți să vă lăsați blocați în detaliile unde se îndreaptă până la ultimul aparat, încercați să externalizați problema către instrumentul open-source, Prettier.

Formatarea contează

Echipele de dezvoltare software au pierdut nenumărate ore de-a lungul istoriei, argumentând despre lungimea maximă a liniei sau pe ce linie ar trebui să meargă un acolad. Orice ar spune preferința personală, majoritatea oamenilor sunt de acord cu cel puțin un lucru: formatarea codului ar trebui să fie consecventă în cadrul unui proiect.

Prettier este un instrument conceput pentru a realiza acest lucru. Dă-i un anumit cod și acesta va preda același cod, formatat într-un mod consecvent. Prettier are integrarea editorului de text, un instrument de linie de comandă și o demonstrație online.

Vorbind limba potrivită

În primul rând, veți dori să știți dacă Prettier este compatibil cu limba sau limbile cu care lucrați de obicei. Prettier se concentrează în prezent pe un set principal de limbi dedicate în principal dezvoltării web front-end, inclusiv:

• JavaScript
• HTML
• CSS
• Sass
• Markdown
• YAML

Există, de asemenea, suport deschis pentru limbi suplimentare prin intermediul pluginurilor.

Încercați mai frumos folosind terenul de joacă online

Înainte chiar de a încerca să instalați Prettier, vă recomandăm să verificați terenul de joacă. Folosind o interfață web, puteți insera un exemplu de cod și puteți observa cum Prettier îl va transforma. Acesta este un mod excelent de a obține o impresie despre ceea ce face instrumentul de fapt, dar poate acționa și ca metodă principală pentru utilizarea Prettier, dacă cerințele dvs. sunt pe partea mai ușoară.

În mod implicit, locul de joacă ar trebui să arate ca două panouri de bază de editor de text, unul în stânga pentru introducerea dvs., unul în dreapta arătând ieșirea lui Prettier. Veți vedea inițial câteva exemple de cod, dar puteți elimina toate acestea și le puteți lipi pe ale dvs.

De exemplu, încercați să introduceți următorul JavaScript:

(funcție ()
{
window.alert („ok”)
}())

Mai frumos ar trebui să-l transforme în:

(funcție () {
window.alert („ok”);
})();

Observați, în mod implicit, modificările efectuate de Prettier includ:

• Conversia șirurilor cu ghilimele simple în cele cu ghilimele duble
• Adăugarea de punct și virgulă
• Conversia indentărilor în două spații

În partea stângă jos este un buton care vă permite să vizualizați opțiunile. Cu exemplul anterior, încercați să ajustați lățimea filei, comutând - citat unic steag sub Uzual, sau comutarea --no-semi steag sub JavaScript.

Configurarea opțiunilor

Prettier este auto-descris ca fiind „avizat”, o alegere de proiectare deliberată, ceea ce înseamnă că controlul specificului este sacrificat pentru simplitate și consistență. Este conceput pentru ca dvs. să vă configurați, apoi să uitați, mai degrabă decât să rămâneți preocupat de fiecare ultim detaliu de formatare a codului. (Pentru o alternativă cu un control mult mai fin asupra ultimelor detalii de formatare, încercați eslint.)

Cu toate acestea, autorii recunosc, de asemenea, că unele decizii au un impact funcțional dincolo de aspectul codului. Unele opțiuni - inclusiv unele pentru scopuri vechi - rămân, deci ar trebui cel puțin să înțelegeți ce fac, chiar dacă utilizați Prettier în starea implicită.

Cel mai bun mod de gestionare Opțiuni mai frumoase este să le salvați într-un fișier de configurare. Există multe modalități de a organiza acest lucru, dar începeți prin crearea unui fișier numit .prettierrc.json în directorul local de proiecte. Poate conține oricare dintre opțiunile acceptate într-un obiect JSON standard, de ex.

{
„tabWidth”: 8
}

Prettier va citi același fișier de configurare, indiferent dacă îl rulați prin linia de comandă sau un editor de text acceptat.

Folosind fire sau npm, instalarea ar trebui să fie simplă. Pentru fire:

$ yarn global adaugă mai frumos

Și pentru npm:

$ npm install --global mai frumos

După ce ați instalat Prettier la nivel global, ar trebui să puteți scrie:

$ mai frumos

În mod implicit, veți primi un ecran cu text de ajutor care vă va confirma că instrumentul este instalat și funcționează corect.

Curățarea unui fișier

Pentru a reformata un fișier, utilizați o comandă similară cu:

$ mai frumos --write filename.js

Aceasta va suprascrie fișierul original, care este adesea cea mai convenabilă abordare. Alternativ, s-ar putea să doriți doar să acționați mai frumos la fiecare fișier dintr-un proiect:

$ mai frumos --scrie.

Prettier va rula pe toate fișierele din directorul curent, formatând toate cele pe care le recunoaște.

De asemenea, puteți imprima rezultatul la ieșirea standard, mai degrabă decât să modificați fișierul original, care vă permite să salvați ieșirea într-un alt fișier sau să îl redirecționați în altă parte:

$ mai frumos test.js> test2.js

Verificarea unui fișier

Pentru a obține un raport Prettier despre curățenia codului dvs. fără a efectua modificări, utilizați --Verifica semnalizați fie cu un singur nume de fișier, fie cu mai multe:

$ mai frumos - verificați.

Veți obține o linie de ieșire pentru fiecare fișier care nu se potrivește cu formatul așteptat, conform configurației Prettier:

Se verifică formatarea ...
[avertizează] .prettierrc
[avertizează] .prettierrc.json
[avertisment] Probleme legate de stilul codului găsite în fișierele de mai sus. Ați uitat să rulați Prettier?

Opțiuni linie de comandă

Opțiunile standard ale Prettier sunt disponibile ca opțiuni de linie de comandă, dacă aveți nevoie de ele. Iată un exemplu despre modul în care - citat unic steagul afectează ieșirea:

$ mai frumos tmp.js
exemplu de funcție () {
console.log ("salut, lume");
}
$ mai frumos - citat simplu tmp.js
exemplu de funcție () {
console.log ('salut, lume');
}

Obținerea ajutorului

Instrumentul pentru linia de comandă oferă ajutor informativ cu privire la orice opțiune prin intermediul --Ajutor steag:

$ prettier --help trail-virgulă
--trailing-virgulă 
Imprimați virgule finale, ori de câte ori este posibil, atunci când sunt pe mai multe linii.
Opțiuni valide:
es5 virgulă finală unde este valabilă în ES5 (obiecte, tablouri etc.)
niciun Fără virgule finale.
toate virgulele finale, ori de câte ori este posibil (inclusiv argumentele funcției).
Implicit: es5

Utilizarea unui editor de text

După ce ați instalat Prettier, îl puteți utiliza într-o varietate de scenarii, în funcție de setul de instrumente pe care îl utilizați deja. Este posibil să utilizați un editor de text. Prettier are legături pentru majoritatea celor populare, așa că iată cum să configurați trei dintre ele:

Text sublim

JsPrettier este un plugin Sublime Text care face Prettier disponibil în editor. Deși există mai multe moduri diferite de instalare a JsPrettier, vă recomandăm să utilizați metoda Controlului pachetului. Va trebui să fi instalat deja Prettier, apoi să deschizi paleta de comenzi a Sublime Text și să selectezi „Control pachet: Instalare pachet”:

Apoi căutați „jsprettier” și faceți clic pentru instalare:

Odată ce JsPrettier este instalat, puteți face clic dreapta în orice fișier deschis pentru al formata. De asemenea, puteți seta valoarea auto_format_on_save la Adevărat în setările JsPrettier, ceea ce va duce la curățarea automată a fișierelor compatibile JsPrettier atunci când le salvați în text Sublim.

Atom

Instalarea pentru Atom este foarte asemănătoare cu Sublime Text: pur și simplu folosiți managerul de pachete încorporat al editorului pentru a instala mai frumos-atom:

Odată instalat, utilizarea este familiară: o comandă rapidă sau un element de meniu vă permite să formatați un fișier la cerere, în timp ce o setare Atom vă permite să rulați automat Prettier ori de câte ori este salvat un fișier.

Vim

Vim este un editor foarte puternic, bazat pe linia de comandă, care nu este potrivit pentru începători. A face mai frumos să lucreze cu vim este complicat în mod corespunzător, dar sunt doar câțiva pași:

mkdir -p ~ / .vim / pack / plugins / start
git clona https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-prettier

Git este probabil cel mai simplu mod de a descărca fișierele necesare, dar orice mijloc de a deveni vim-mai frumos în acel director de start ar trebui să facă treaba.

Odată instalat, Prettier va rula automat atunci când un fișier este salvat în vi. De asemenea, poate fi rulat manual în orice moment prin intermediul Mai frumoasă comanda:

Ceea ce ar trebui să conducă la un fișier curățat:

Integrează mai frumos în proiectul tău

Utilizarea unui formatator de cod, cum ar fi Prettier, vă poate ajuta să mențineți o bază de cod mai ușor de citit. De asemenea, vă poate ajuta să ocoliți dezbaterile cu privire la stilul particular de utilizat atunci când codificați - externalizați acele decizii către Prettier!

În cele din urmă, poate fi configurat un cârlig git pentru a se asigura că codul este întotdeauna curățat atunci când este dedicat depozitului de proiecte. Dezvoltatorii individuali pot fi liberi să-și formateze codul oricât doresc, dar copia centrală va fi întotdeauna curată și consecventă.

nano vs. Vim: cei mai buni editori de text pentru terminal, comparativ

Căutați un editor de text terminal pentru Linux? Alegerea principală este între Vim și nano! Iată cum se compară.

Despre autor