Pidä koodi puhtaana kauniimmin

Koodin muotoilu vaikuttaa triviaalilta aihealueelta, mutta se voi vaikuttaa koodisi laatuun ja oikeellisuuteen, siihen, miten se hallitsee versiota ja miten teet yhteistyötä muiden kanssa. Jos et kuitenkaan halua jäädä yksityiskohtiin siitä, mihin jokainen viimeinen ahdin menee, yritä ulkoistaa ongelma avoimen lähdekoodin Prettier-työkalulle.

Muotoiluasiat

Ohjelmistokehitystiimit ovat tuhlanneet lukemattomia tunteja koko historian ajan väittäessään enimmäislinjan pituudesta tai siitä, minkä linjan ahdin pitäisi mennä. Mitä henkilökohtaiset mieltymykset sanovatkin, useimmat ihmiset ovat yhtä mieltä ainakin yhdestä asiasta: koodin muotoilun tulisi olla johdonmukainen koko projektissa.

Prettier on työkalu, joka on suunniteltu tämän saavuttamiseksi. Anna sille koodi ja se palauttaa saman koodin, joka on muotoiltu yhtenäisellä tavalla. Prettierillä on tekstieditorin integrointi, komentorivityökalu ja online-esittely.

Oikean kielen puhuminen

Ensinnäkin sinun kannattaa tietää, onko Prettier yhteensopiva sen kielen kanssa, jonka kanssa työskentelet. Prettier keskittyy tällä hetkellä ydinjoukkoihin kieliä, jotka on omistettu lähinnä käyttöliittymän verkkokehitykselle, mukaan lukien:

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

Lisäkielillä on myös avoin tuki laajennusten kautta.

Kokeile kauniimmin online-leikkikentän avulla

Ennen kuin yrität edes asentaa Prettier-sovellusta, kannattaa tarkistaa leikkipaikka. Web-käyttöliittymän avulla voit liittää esimerkkikoodin ja tarkkailla, kuinka Prettier muuttaa sen. Tämä on hieno tapa saada käsitys siitä, mitä työkalu todella tekee, mutta se voi toimia myös ensisijaisena menetelmänäsi käyttää Prettieriä, jos vaatimukset ovat kevyemmällä puolella.

Oletusarvon mukaan leikkikentän pitäisi näyttää kahdelta perustekstieditoripaneelilta, yksi vasemmalla puolella syötettäsi varten, toinen oikealla ja näyttää Prettierin tuotoksen. Alun perin näet esimerkkikoodin, mutta voit poistaa kaiken tämän ja liittää sen omaan.

Yritä esimerkiksi kirjoittaa seuraava JavaScript:

(funktio ()
{
window.alert ('ok')
}())

Kauniimman pitäisi muuttaa se:

(funktio () {
ikkuna.hälytys ("ok");
})();

Huomaa, että Prettierin tekemät muutokset sisältävät oletusarvoisesti:

• Yhden lainausmerkkijonon muuntaminen kaksoislainoiksi
• Lisätään puolipisteitä
• Muuntaa sisennykset kahteen väliin

Vasemmassa alakulmassa on painike, jonka avulla voit tarkastella vaihtoehtoja. Yritä edellisessä esimerkissä säätää välilehden leveyttä vaihtamalla --yhden lainauksen lippu alla Yleinentai vaihtamalla - ei puoliksi lippu alla JavaScript.

Asetusten määrittäminen

Prettier on itse kuvattu "mielipiteelliseksi", tarkoituksellinen suunnitteluvalinta, joka tarkoittaa, että yksityiskohtien hallinta uhrataan yksinkertaisuuden ja johdonmukaisuuden vuoksi. Se on tarkoitettu sinun määrittämiseen, sitten unohtamiseen, eikä sen sijaan, että olet huolissasi koodisi viimeisistä muotoilutiedoista. (Jos haluat vaihtoehdon, jossa jokaisen viimeisen muotoilun yksityiskohdan hallinta on paljon hienompaa, kokeile eslint.)

Kirjoittajat tunnustavat kuitenkin myös, että joillakin päätöksillä on toiminnallinen vaikutus sen lisäksi, miten koodi näyttää. Jotkut vaihtoehdot - mukaan lukien jotkut vanhoihin tarkoituksiin - jäävät, joten sinun tulisi ainakin ymmärtää, mitä ne tekevät, vaikka käyttäisit Prettier-ohjelmaa oletusasetuksessaan.

Paras tapa hallita Kauniimpia vaihtoehtoja on tallentaa ne määritystiedostoon. On monia tapoja järjestää tämä, mutta aloita luomalla tiedosto nimeltä .prettierrc.json paikallisessa projektihakemistossa. Se voi sisältää minkä tahansa tuetuista vaihtoehdoista tavallisessa JSON-objektissa, esim.

{
"tabWidth": 8
}

Prettier lukee saman määritystiedoston riippumatta siitä, käytätkö sitä komentorivin tai tuetun tekstieditorin kautta.

Lankaa tai npm käyttämällä asennuksen tulee olla yksinkertaista. Lanka:

$ lanka globaali lisää kauniimpi

Ja npm:

$ npm asennus - maailmanlaajuisesti kauniimpi

Kun olet asentanut Prettierin maailmanlaajuisesti, sinun on voitava kirjoittaa:

$ kauniimpi

Oletusarvon mukaan näyttöön tulee ohjeteksti, joka varmistaa, että työkalu on asennettu ja toimii oikein.

Tiedoston puhdistaminen

Alusta tiedosto uudelleen käyttämällä seuraavaa komentoa:

$ kauniimpi - kirjoita tiedostonimi.js

Tämä korvaa alkuperäisen tiedoston, mikä on usein mukavin tapa. Vaihtoehtoisesti saatat haluta vain kauniimman toimimaan jokaisessa projektin tiedostossa:

$ kauniimpi - kirjoita.

Prettier toimii kaikissa nykyisen hakemiston tiedostoissa ja muotoilee kaikki tunnistamansa tiedostot.

Voit tulostaa tuloksen myös vakiotulosteeseen sen sijaan, että muuttaisit alkuperäistä tiedostoa, jolloin voit tallentaa lähdön toiseen tiedostoon tai ohjata sen muualle:

$ kauniimpi testi.js> test2.js

Tarkistetaan tiedosto

Jos haluat saada kauniimman raportin koodisi puhtaudesta tekemättä mitään muutoksia, käytä --tarkistaa lippu, jolla on joko yksi tai useampi tiedostonimi:

$ kauniimpi - tarkista.

Saat jokaiselle tiedostolle rivin, joka ei vastaa odotettua muotoa, Prettierin kokoonpanon mukaan:

Tarkistetaan muotoilua ...
[varoita]. kauniimpi
[varoita] .prettierrc.json
[varoita] Yllä olevista tiedostoista löytyy koodityyppisiä ongelmia. Unohditko käyttää Prettieriä?

Komentorivivalinnat

Prettierin vakioasetukset ovat käytettävissä komentorivivaihtoehtoina, jos tarvitset niitä. Tässä on esimerkki siitä, miten --yhden lainauksen lippu vaikuttaa tulokseen:

$ kauniimpi tmp.js
funktioesimerkki () {
console.log ("hei, maailma");
}
$ kauniimpi --single-quote tmp.js
funktioesimerkki () {
console.log ('hei, maailma');
}

Saada apua

Komentorivityökalu tarjoaa informatiivista apua mistä tahansa vaihtoehdosta --auta lippu:

$ kauniimpi - auta jäljessä olevaa pilkkua
--vaunupilkku 
Tulosta loppupilkut aina kun mahdollista monirivisenä.
Voimassa olevat vaihtoehdot:
es5 Jälkipilkut, jos ne ovat voimassa ES5: ssä (objektit, taulukot jne.)
ei yhtään jäljessä pilkkuja.
kaikki perässä olevat pilkut aina kun mahdollista (mukaan lukien funktion argumentit).
Oletus: es5

Tekstieditorin käyttäminen

Kun olet asentanut Prettierin, voit käyttää sitä useissa tilanteissa sen mukaan, mitä työkalupakettia jo käytät. Mahdollisuudet ovat, että käytät tekstieditoria. Prettierillä on siteet useimpiin suosittuihin, joten saat kolme niistä asennettua seuraavasti:

Sublime teksti

JsKauneempi on Sublime Text -laajennus, joka tekee Prettieristä saatavana editorissa. Vaikka JsPrettier voidaan asentaa useilla eri tavoilla, suosittelemme Package Control -menetelmän käyttöä. Sinun on jo oltava asentanut Prettier, avaa sitten Sublime Text -komentopaletti ja valitse "Package Control: Install Package":

Etsi sitten ”jsprettier” ja asenna se napsauttamalla:

Kun JsPrettier on asennettu, voit alustaa sen napsauttamalla mitä tahansa avointa tiedostoa hiiren kakkospainikkeella. Voit myös asettaa arvon auto_format_on_save että totta JsPrettierin asetuksissa, mikä johtaa siihen, että JsPrettier puhdistaa kaikki yhteensopivat tiedostot automaattisesti, kun tallennat ne Sublime Text -kansioon.

Atomi

Atom-asennus on hyvin samanlainen kuin Sublime Text: asenna vain editorin sisäänrakennetulla paketinhallinnalla kauniimpi atomi:

Asennuksen jälkeen käyttö on tuttua: pikakuvakkeen tai valikkokohdan avulla voit muotoilla tiedoston tarvittaessa, kun taas Atom-asetuksen avulla voit suorittaa Prettier-ohjelman automaattisesti aina, kun tiedosto tallennetaan.

Vim

Vim on erittäin tehokas komentorivipohjainen editori, joka ei sovellu aloittelijoille. Mukavampi saaminen työskentelemään vimin kanssa on sopivasti monimutkaista, mutta se on silti vain muutama vaihe:

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

Git on luultavasti helpoin tapa ladata tarvittavat tiedostot, mutta kaikki keinot saada vim-kauniimpi tuohon aloitushakemistoon pitäisi tehdä työ.

Asennuksen jälkeen Prettier toimii automaattisesti, kun tiedosto tallennetaan vi. Se voidaan käyttää myös manuaalisesti milloin tahansa Kauniimpi komento:

Minkä pitäisi johtaa puhdistettuun tiedostoon:

Integroi kauniimpi projektiisi

Koodin muotoilijan, kuten Prettier, käyttäminen voi auttaa ylläpitämään helpommin luettavaa koodikantaa. Se voi myös auttaa väistämään keskusteluja siitä, mitä tyyliä käytetään koodauksessa - ulkoista vain päätökset Prettierille!

Lopuksi, git-koukku voidaan asettaa varmistamaan, että koodi puhdistetaan aina, kun se on sitoutunut projektisi arkistoon. Yksittäiset kehittäjät voivat vapaasti muotoilla koodinsa haluamallaan tavalla, mutta keskuskopio on aina puhdas ja johdonmukainen.

nano vs. Vim: Parhaat päätelaitteen tekstieditorit verrattuna

Etsitkö päätelaitteen tekstieditoria Linuxille? Tärkein valinta on Vimin ja nanon välillä! Näin he vertailevat.

Kirjailijasta