Prettier auttaa sinua noudattamaan hyviä koodin muotoilustandardeja, joten miksi et yhdistäisi sitä VS Coden kanssa paremman ohjelmointikokemuksen saavuttamiseksi?

Puhtaan ja luettavan koodin kirjoittaminen on välttämätöntä, työskenteletpä sitten yksin tai kehittäjäryhmän kanssa. Vaikka monet tekijät vaikuttavat koodin luettavuuteen, yksi tärkeimmistä on johdonmukainen koodin muotoilu.

Mutta tässä on ongelma: manuaalinen koodin muotoilu voi olla ehdotonta tuskaa ja erittäin altis virheille. Prettierin kaltaiset työkalut tekevät HTML: n, CSS: n, JavaScriptin ja muiden kielten muotoilusta paljon helpompaa. Tutustu Prettier-laajennuksen asentamiseen ja käyttämiseen koodin muotoiluun sekä joitain lisäasetuksia.

Kauniimman asentaminen

Ennen kuin jatkat, varmista, että tietokoneellesi on asennettu Node.js. Voit asentaa uusimman version osoitteesta virallinen Node.js-lataussivu. Se tulee mukana solmun pakettien hallinta (npm) sisäänrakennettu, jota käytät Node.js-pakettien hallintaan.

Kun olet varmistanut, että Node.js on asennettu paikallisesti, aloita luomalla tyhjä hakemisto projektillesi. Voit nimetä hakemiston

instagram viewer
kauniimpi demo.

Kirjoita seuraavaksi cd kyseiseen hakemistoon komentorivin avulla ja käynnistä sitten Node.js-projekti suorittamalla seuraava komento:

npm init -y

Tämä komento luo oletusasetukset sisältävän package.json-tiedoston.

Asenna Prettier-laajennus suorittamalla tämä päätekomento:

npm i --save-dev kauniimpi

The --save-dev lippu asennetaan kauniimmin kehittäjäriippuvuutena, mikä tarkoittaa, että sitä käytetään vain kehityksen aikana.

Nyt kun se on asennettu, voit alkaa tutkia Prettierin toimintaa käyttämällä sitä komentorivillä.

Prettierin käyttäminen komentorivin kautta

Aloita luomalla a script.js tiedosto ja täytä se seuraavalla koodilla:

toimintosumma(a, b) { palata a + b }
konst käyttäjä = { nimi: "Kyle", ikä: 27,
 isOhjelmoija: totta,
 longKey: "Arvo",
 lisääTietoja: 3
}

Muotoile tämän script.js-tiedoston koodi komentorivin kautta suorittamalla seuraava komento:

npx kauniimpi --write script.js

Komento muotoilee script.js: n JavaScript-koodin uudelleen Prettierin oletusstandardiksi. Tästä tulee tulos:

toimintosumma(a, b) {
palata a + b;
}
konst käyttäjä = {
 nimi: "Kyle",
 ikä: 27,
 isOhjelmoija: totta,
 longKey: "Arvo",
 lisääTietoja: 3,
};

Voit myös muotoilla HTML-merkinnät komentoriviltä. Luo an index.html tiedosto samassa hakemistossa kuin script.js. Liitä sitten seuraava huonosti muotoiltu HTML-koodi tiedostoon:




"" alt=""luokkaa="sää-kuvake iso">

luokkaa="currentHeaderTemp"><jänneväli>21jänneväli></div>
</div>
 </header>

Muotoile HTML suorittamalla tämä komento:

npx kauniimpi --kirjoita index.html

Tämä komento alustaa HTML: n uudelleen Prettierin oletusstandardiksi, mikä johtaa seuraavaan koodiin:

<otsikko>
<div>
<imgsrc=""alt=""luokkaa="sää-kuvake iso" />
<divluokkaa="currentHeaderTemp"><jänneväli>21jänneväli>div>
div>
otsikko>

Voit myös käyttää --tarkistaa lippu tarkistaaksesi, onko koodi Prettierin standardien mukainen. Seuraava esimerkki tarkistaa script.js:

npx kauniimpi -- tarkista script.js

Tämä on hyödyllistä, jos haluat pre-commit-koukun varmistaaksesi, että ihmiset käyttävät Prettieria ja muotoilevat tiedostot ennen niiden siirtämistä Gitiin. Tämä toimii hyvin, kun myötävaikuttaa avoimeen lähdekoodiin.

Kauniimman integrointi Visual Studio -koodiin

Prettierin käyttäminen komentorivin kautta voi olla tuskaa. Sen sijaan, että suorittaisit komennon manuaalisesti joka kerta, kun haluat muotoilla koodia, voit määrittää sen alustamaan automaattisesti, kun muutat tiedostoa. Onneksi Visual Studio Codessa (VS Code) on sisäänrakennettu tapa tehdä tämä puolestasi.

Siirry kohtaan Laajennukset -välilehti VS Codessa ja etsi Kauniimpi. Klikkaa Kauniimpi - koodin muotoilija, asenna se ja ota se käyttöön.

Siirry VS-koodiasetuksiin siirtymällä kohtaan Tiedosto > Asetukset > Asetukset. Etsi hakukentästä Kauniimpi. Löydät paljon vaihtoehtoja, jotka auttavat sinua määrittämään Prettier-laajennuksen.

Yleensä voit pärjätä oletusasetuksilla. Ainoa asia, jota voit harkita muuttamista, on puolipisteet (voit poistaa ne, jos haluat). Muussa tapauksessa kaikki on asetettu oletusarvoon, mutta voit muuttaa sitä haluamallasi tavalla.

Muista ottaa käyttöön formatontave -vaihtoehto, jotta jokaisen tiedoston koodi muotoillaan automaattisesti, kun tallennat tiedoston. Ota se käyttöön etsimällä formatontave ja rastita ruutuun.

Jos et käytä VSCodea tai laajennus ei jostain syystä toimi, voit tehdä sen lataa onchange-kirjasto. Tämä suorittaa koodin muotoilevan komennon aina, kun muutat tiedostoa.

Kuinka ohittaa tiedostot, kun alustetaan kauniilla

Jos juoksit kauniimmin --kirjoittaa -komento koko kansiossasi, se käy läpi jokaisen solmumoduulisi. Mutta sinun ei pitäisi tuhlata aikaa muiden ihmisten koodin muotoiluun!

Voit kiertää tämän ongelman luomalla a .melko huomaamatta tiedosto ja sisällytä termi solmu_moduulit tiedostossa. Jos juoksit --kirjoittaa komennon koko kansiossa, se alustaa uudelleen kaikki tiedostot paitsi ne, jotka ovat kansiossa solmu_moduulit kansio.

Voit myös ohittaa tiedostot, joilla on tietty tunniste. Jos esimerkiksi haluat ohittaa kaikki HTML-tiedostot, lisää vain *.html to .melko huomaamatta.

Kuinka konfiguroida kauniimpi

Voit määrittää, kuinka haluat Prettierin toimivan eri vaihtoehdoilla. Yksi tapa on lisätä a kauniimpi avain sinun package.json tiedosto. Arvo on objekti, joka sisältää kaikki määritysvaihtoehdot:

{
 ...
"käsikirjoitukset": {
"testata": "echo \"Virhe: testiä ei määritetty\" && poistu 1"
 },
 kauniimpi: {
// vaihtoehdot menevät tänne
 }
}

Toinen vaihtoehto (jota suosittelemme) on luoda a .prettierrc tiedosto. Tämän tiedoston avulla voit tehdä kaikenlaisia ​​mukautuksia.

Oletetaan, että et pidä puolipisteistä. Voit poistaa ne sijoittamalla seuraavan objektin tiedostoon:

{
"puoliksi": totta,
"ohjaa": [
 {
"tiedostot": ".ts",
"vaihtoehdot": {
"puoliksi": väärä
 }
 }
 ]
}

The ohittaa ominaisuuden avulla voit määrittää mukautettuja ohituksia tietyille tiedostoille tai tiedostotunnisteille. Tässä tapauksessa sanomme, että kaikki tiedostot, joiden loppu on .ts (eli konekirjoitustiedostot) ei saa sisältää puolipisteitä.

Prettier käyttäminen ESLintillä

ESLint on linting-työkalu JavaScript-koodin virheiden havaitsemiseen ja sen muotoiluun. Jos käytät Prettieria, et todennäköisesti halua käyttää ESLintiä myös muotoiluun. Jos haluat käyttää niitä yhdessä, sinun on asennettava ja määritettävä eslint-config-prettier. Tämä työkalu sammuttaa kaikki ESLint-kokoonpanot asioista, joita Prettier jo käsittelee.

Ensin sinun on asennettava se:

npm i --save-dev eslint-config-prettier

Lisää se seuraavaksi laajennusluetteloon .eslintrc tiedosto (varmista, että se on viimeinen asia luettelossa):

{
"pidentää": [
"some-other-config-you-use",
"kaunimpi"
 ],
"säännöt": {
"sisennys": "virhe"
 }
}

Nyt ESLint poistaa käytöstä kaikki säännöt, joista Prettier jo huolehtii konfliktien estämiseksi.

Puhdista koodikantasi Prettierillä ja ESLintillä

Prettier on ihanteellinen työkalu koodin puhdistamiseen ja johdonmukaisen muotoilun toteuttamiseen projektin sisällä. Sen asettaminen toimimaan VS Coden kanssa tarkoittaa, että se on aina käden ulottuvilla.

ESLint on pakollinen JavaScript-työkalu, joka kulkee käsi kädessä Prettierin kanssa. Se tarjoaa runsaasti ominaisuuksia ja mukautusvaihtoehtoja, jotka ylittävät perusmuotoilun. Opi käyttämään ESLintiä JavaScriptin kanssa, jos haluat olla tuottavampi kehittäjä.