Kā iestatīt skaistāku programmu Visual Studio kodā

Tīra un salasāma koda rakstīšana ir būtiska neatkarīgi no tā, vai strādājat vienatnē vai kopā ar izstrādātāju komandu. Lai gan koda lasāmību veicina daudzi faktori, viens no svarīgākajiem ir konsekvents koda formatējums.

Bet šeit ir problēma: manuāla koda formatēšana var būt absolūti sāpīga un ļoti pakļauta kļūdām. Tādi rīki kā Prettier padara HTML, CSS, JavaScript un citu valodu formatēšanu daudz vienkāršāku. Uzziniet, kā instalēt un izmantot paplašinājumu Prettier koda formatēšanai, kā arī dažus papildu konfigurācijas iestatījumus.

Prettier instalēšana

Pirms turpināt, pārliecinieties, vai datorā ir instalēts Node.js. Jūs varat instalēt jaunāko versiju no oficiālā Node.js lejupielādes lapa. Tas nāk ar mezgla pakotņu pārvaldnieks (npm) iebūvēts, ko izmantosit, lai pārvaldītu savas Node.js pakotnes.

Kad esat apstiprinājis, ka Node.js ir instalēts lokāli, sāciet, izveidojot tukšu direktoriju savam projektam. Jūs varat nosaukt direktoriju

skaistāks-demo.

Pēc tam, izmantojot komandrindu, ievadiet cd šajā direktorijā, pēc tam palaidiet šo komandu, lai inicializētu Node.js projektu:

npm init -y

Šī komanda ģenerē failu package.json, kas satur noklusējuma iestatījumus.

Lai instalētu paplašinājumu Prettier, palaidiet šo termināļa komandu:

npm i --save-dev skaistāk

The --save-dev karodziņš tiek instalēts skaistāk kā izstrādātāja atkarība, kas nozīmē, ka tas tiek izmantots tikai izstrādes laikā.

Tagad, kad tas ir instalēts, varat sākt izpētīt, kā Prettier darbojas, izmantojot to komandrindā.

Prettier izmantošana, izmantojot komandrindu

Sāciet, izveidojot a script.js failu un aizpildiet to ar šādu kodu:

funkcijusumma(a, b) { atgriezties a + b }
konst lietotājs = { nosaukums: "Kails", vecums: 27,
 isProgrammer: taisnība,
 longKey: "Vērtība",
 vairākDati: 3
}

Lai formatētu kodu šajā script.js failā, izmantojot komandrindu, palaidiet šādu komandu:

npx skaistāk -- rakstiet script.js

Komanda pārformatē JavaScript kodu failā script.js uz Prettier noklusējuma standartu. Šis būs rezultāts:

funkcijusumma(a, b) {
atgriezties a + b;
}
konst lietotājs = {
 nosaukums: "Kails",
 vecums: 27,
 isProgrammer: taisnība,
 longKey: "Vērtība",
 vairākDati: 3,
};

Varat arī formatēt HTML marķējumu no komandrindas. Izveidojiet an index.html failu tajā pašā direktorijā kā script.js. Pēc tam failā ielīmējiet šādu slikti formatētu HTML:

"" alt=""klasē="liela laikapstākļu ikona">

klasē="currentHeaderTemp"><span>21span></div>
</div>
 </header>

Lai formatētu HTML, palaidiet šo komandu:

npx skaistāks -- rakstiet index.html

Šī komanda pārformatē HTML uz Prettier noklusējuma standartu, kā rezultātā tiek iegūts šāds kods:

<galvene>
<div>
<imgsrc=""alt=""klasē="liela laikapstākļu ikona" />
<divklasē="currentHeaderTemp"><span>21span>div>
div>
galvene>

Varat arī izmantot --pārbaudi karodziņš, lai pārbaudītu, vai kods atbilst Prettier standartiem. Tālāk sniegtais piemērs pārbauda script.js:

npx skaistāks -- pārbaudiet script.js

Tas ir noderīgi, ja vēlaties izmantot pirmsapstiprināšanas āķi, lai nodrošinātu, ka cilvēki izmanto Prettier un formatē failus pirms to nosūtīšanas uz Git. Tas darbojas labi, ja veicinot atvērtā koda izveidi.

Prettier integrēšana Visual Studio kodā

Prettier izmantošana, izmantojot komandrindu, var būt sāpīga. Tā vietā, lai manuāli izpildītu komandu katru reizi, kad vēlaties formatēt kodu, varat iestatīt, lai tā formatētu automātiski, kad maināt failu. Par laimi, Visual Studio Code (VS Code) ir iebūvēts veids, kā to izdarīt jūsu vietā.

Dodieties uz Paplašinājumi cilnē VS Code un meklējiet Smukāk. Klikšķiniet uz Skaistāks — koda formatētājs, instalējiet to un pēc tam iespējojiet to.

Atveriet savus VS koda iestatījumus, dodoties uz Fails > Preferences > Iestatījumi. Meklēšanas lodziņā meklējiet Smukāk. Jūs atradīsit daudz iespēju, kas palīdzēs konfigurēt paplašinājumu Prettier.

Parasti jūs varat iztikt ar noklusējuma iestatījumiem. Vienīgais, ko varētu apsvērt mainīt, ir semikoli (ja vēlaties, varat tos noņemt). Pretējā gadījumā viss ir iestatīts uz noklusējuma, taču varat to mainīt, kā vien vēlaties.

Noteikti iespējojiet formatēt saglabāt opciju, lai kods katrā failā tiktu automātiski formatēts, kad saglabājat šo failu. Lai to iespējotu, vienkārši meklējiet formatēt saglabāt un atzīmējiet izvēles rūtiņu.

Ja neizmantojat VSCode vai paplašinājums kāda iemesla dēļ nedarbojas, varat lejupielādēt onchange bibliotēku. Tas palaiž komandu, lai formatētu kodu jebkurā laikā, kad maināt failu.

Kā ignorēt failus, formatējot ar Prettier

Ja tu skrietu skaistāk -- rakstīt komandu visā jūsu mapē, tā tiks cauri katram jūsu mezgla modulim. Bet jums nevajadzētu tērēt laiku citu personu koda formatēšanai!

Lai apietu šo problēmu, izveidojiet a .prettierignore failu un iekļaujiet terminu node_modules failā. Ja jūs vadītu -- rakstīt komandu visā mapē, tā pārformatētu visus failus, izņemot tos, kas atrodas mapē node_modules mapi.

Varat arī ignorēt failus ar noteiktu paplašinājumu. Piemēram, ja vēlaties ignorēt visus HTML failus, vienkārši pievienojiet *.html uz .prettierignore.

Kā konfigurēt skaistāku

Varat konfigurēt, kā vēlaties, lai Prettier darbotos ar dažādām opcijām. Viens veids ir pievienot a smukāk atslēga pie tavas pack.json failu. Vērtība būs objekts ar visām konfigurācijas opcijām:

{
 ...
"skripti": {
"pārbaude": "echo \"Kļūda: nav norādīts tests\" && izeja 1"
 },
 skaistāks: {
// opcijas dodieties šeit
 }
}

Otra iespēja (ko mēs iesakām) ir izveidot a .prettierrc failu. Šis fails ļaus jums veikt visu veidu pielāgojumus.

Pieņemsim, ka jums nepatīk semikoli. Varat tos noņemt, failā ievietojot šādu objektu:

{
"daļēji": taisnība,
"ignorē": [
 {
"faili": ".ts",
"iespējas": {
"daļēji": viltus
 }
 }
 ]
}

The ignorē rekvizīts ļauj definēt pielāgotus ignorējumus noteiktiem failiem vai failu paplašinājumiem. Šajā gadījumā mēs sakām, ka visi faili beidzas ar .ts (tas ir, mašīnraksta failos) nedrīkst būt semikolu.

Prettier izmantošana ar ESLint

ESLint ir pūderēšanas rīks kļūdu noteikšanai JavaScript kodā, kā arī tā formatēšanai. Ja izmantojat Prettier, jūs, iespējams, nevēlaties izmantot ESLint arī formatēšanai. Lai tos izmantotu kopā, jums būs jāinstalē un jāiestata eslint-config-prettier. Šis rīks izslēdz visas ESLint konfigurācijas lietām, ko Prettier jau apstrādā.

Pirmkārt, jums tas jāinstalē:

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

Pēc tam pievienojiet to paplašinājumu sarakstam .eslintrc fails (pārliecinieties, ka tā ir pēdējā lieta sarakstā):

{
"pagarina": [
"some-other-config-you-use",
"smukāk"
 ],
"noteikumi": {
"atkāpe": "kļūda"
 }
}

Tagad ESLint atspējos visus noteikumus, par kuriem Prettier jau rūpējas, lai novērstu konfliktus.

Iztīriet savu kodu bāzi, izmantojot Prettier un ESLint

Prettier ir ideāls rīks koda tīrīšanai un konsekventa formatējuma ieviešanai projektā. Iestatot to darbam ar VS kodu, tas vienmēr ir sasniedzams.

ESLint ir obligāts JavaScript rīks, kas iet roku rokā ar Prettier. Tas nodrošina daudz funkciju un pielāgošanas iespēju, kas pārsniedz pamata formatējumu. Uzziniet, kā izmantot ESLint ar JavaScript, ja vēlaties būt produktīvāks izstrādātājs.