Visual Studio Code, tautā pazīstams kā VS Code, ir viens no visbiežāk izmantotajiem kodu redaktoriem. VS Code ir iebūvēts Node.js, JavaScript un TypeScript atbalsts. Tomēr varat izmantot dažādus paplašinājumus, lai padarītu to pieejamu lielākajai daļai citu valodu un izpildlaika.
Microsoft ir uzņēmums, kas izstrādāja šo bezmaksas atvērtā pirmkoda redaktoru.
VS kods ir populārs šo funkciju dēļ;
- Intellisense: VS Code nodrošina koda automātisko pabeigšanu un sintakses izcelšanu.
- Vairāku platformu: varat izmantot šo koda redaktoru operētājsistēmās Linux, Windows un macOS.
- Dažādu paplašinājumu pieejamība: dažādu paplašinājumu pieejamība var arī pārveidot VS Code par integrētu izstrādes vidi (IDE).
- Vairāku valodu atbalsts: šo rīku var izmantot gandrīz visās programmēšanas valodās, izmantojot VS Code paplašinājumus.
- Integrēts terminālis: VS Code iebūvētais terminālis ļauj izstrādātājiem izpildīt Git komandas tieši no koda redaktora. Tādējādi jūs varat veikt, virzīt un vilkt izmaiņas no šī redaktora.
Automātiskā formatēšana VS kodā
Priekšnoteikumi
- VS kods: šo koda redaktoru var lejupielādēt bez maksas. Ja jūsu datorā tas nav instalēts, lejupielādējiet to no oficiālās vietnes atkarībā no operētājsistēmas.
- Izvēlieties lietojamo valodu: jums ir jāizlemj, kuru valodu izmantot, jo dažādām valodām ir dažādi formatētāji.
- Formatētājs: VS Code koda formatēšanai izmanto paplašinājumus. Šajā rakstā mēs izmantosim Prettier. Tomēr jūs varat brīvi izmantot jebkuru formatētāju, kas atbilst jūsu izmantotajai valodai.
Automātiskā formatēšana ir līdzeklis, kas automātiski formatē koda blokus/rindiņas vai failu koda redaktorā, pamatojoties uz īpašiem noteikumiem un vadlīnijām. Šis līdzeklis ir balstīts uz konfigurācijas failu, kurā norādīti formatēšanas noteikumi par atkāpi, rindiņu pārtraukumiem un atstarpēm.
Kad automātiskā formatēšanas funkcija ir iespējota, visi šie noteikumi tiks piemēroti visiem failiem jūsu kodu bāzē, kad to rakstīsit.
Tomēr varat arī atspējot automātisko formatēšanu konkrētam koda blokam, ja vēlaties, lai tas izceltos no pārējiem. Lai to panāktu, varat ietīt koda fragmentu komentāru blokā, kas norāda piemērojamos noteikumus.
Automātiskās formatēšanas kodu priekšrocības VS kodā
- Ietaupa laiku: koda rakstīšana un formatēšana var būt laikietilpīga. Automātiskā formatēšana ietaupa jūsu laiku, un tādējādi varat vairāk koncentrēties uz rakstīšanas procesu un sintakse.
- Konsekvence: lai gan avota kods neparādās klienta pusē, ir jābūt zināmai konsekvencei. Automātiskā formatēšana ir noderīga, īpaši lieliem projektiem ar vairākiem līdzstrādniekiem.
- Ievēro labāko praksi: automātiskās formatēšanas funkcija ir noderīga, lai nodrošinātu konsekventu atkāpi, atstarpi un nosaukumu piešķiršanas noteikumus.
- Vienkāršai koda lasīšanai: koda pārskatīšanas laikā ir viegli sekot labi formatētam kodam. Jauni izstrādātāji, kas pievienosies jūsu organizācijai, viegli sapratīs labi formatētu kodu.
Kā iespējot automātisko formātu VS kodā un pielāgot to
Veiciet šīs darbības, lai iespējotu automātisko formatēšanu:
Kad Prettier ir instalēts jūsu VS kodā, varat iespējot automātiskās formatēšanas funkciju.
Mēs izmantojam vienkāršu pieteikšanās lapas HTML failu, lai parādītu, kā iespējot automātisko formatēšanu.
Mēs izmantosim šo kodu:
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
Lai gan iepriekš minētais kods ir funkcionāls, to ir grūti nolasīt un sekot līdzi, jo tas nav ievilkts, kā paredzēts. Mēs izmantosim Prettier, lai automātiski formatētu kodu.
Izpildiet šīs darbības.
3. Meklēšanas joslā ierakstiet Formatētājs un cilnē Redaktors:Noklusējuma formatētājs atlasiet Skaistāks.
4. Atrodiet redaktoru: Formatēt uz Saglabāt un atzīmējiet izvēles rūtiņu.
5. Saglabājiet HTML failu, atlasiet ievades HTML dokumentā, ar peles labo pogu noklikšķiniet un atlasiet Formatēt dokumentu.
6. Pārbaudiet, vai dokuments ir formatēts. Šis paplašinājums automātiski formatēs visu pārējo kodu, ko ierakstāt savā VS kodā.
6. Pielāgojiet Prettier Configuration iestatījumus: Prettier ir iestatīts, lai pēc noklusējuma veiktu daudzas darbības. Tomēr jūs joprojām varat to pielāgot savām vajadzībām. Savā VS kodā atveriet sadaļu Iestatījumi, meklējiet Prettier un pielāgojiet iestatījumus atbilstoši savām vēlmēm.
7. Izveidojiet skaistāku konfigurācijas failu: jūsu ierīcē konfigurētie iestatījumi var atšķirties no citiem, ja strādājat komandā. Skaistāks konfigurācijas fails nodrošinās konsekventu koda stilu jūsu projektam. Lai konfigurētu projekta iestatījumus, izveidojiet .prettierrc failu ar paplašinājumu .json. Mēs varam pievienot šo kodu JSON failam demonstrācijas nolūkos;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Iepriekš minētajā koda blokā ir norādītas četras lietas: beigu komatus, cilnes platumu, semikolu lietošanu un to, vai lietot vienas vai dubultpēdas. Šajā gadījumā;
- Beigu komats tiks pievienots tikai tad, kad kods tiks pārsūtīts uz es5.
- Cilnes platums, atstarpju skaits katrai cilnei, ir iestatīts uz 4.
- Semi norāda, vai priekšrakstu beigās kodam jāpievieno semikoli. Mēs to iestatījām kā nepatiesu, kas nozīmē, ka semikoli netiks pievienoti.
- Kodā varat izmantot vienpēdiņas vai dubultpēdiņas. Mēs esam norādījuši, ka šim projektam jāizmanto vienas pēdiņas.
Varat apskatīt Prettier dokumentus, lai saprastu, kā izveidot konsekventus konfigurācijas iestatījumus.
Automātiskā formāta paraugprakse VS kodā
Izmantojiet pareizo formatējumu
Lai gan šajā rakstā esam izmantojuši Prettier demonstrācijas nolūkos, tas nenozīmē, ka tas attiecas uz visām valodām. VS Code ir simtiem formatēšanas paplašinājumu, un jums ir jānosaka, kas atbilst jūsu vajadzībām. Piemēram, tādi formatētāji kā Prettier un Beautify ir piemēroti HTML un CSS. No otras puses, varat izmantot Black vai Python paplašinājumus, lai formatētu savu Python kodu.
Izmantojiet konsekventu koda stilu
Kā redzējāt, varat pielāgot formatētāja iestatījumus. Ja strādājat komandā, pārliecinieties, ka jums ir tādas pašas konfigurācijas, lai izveidotu konsekventu koda stilu. Vislabākā pieeja ir izveidot .prettierrc.paplašinājuma failu, kurā iekļautas visas jūsu projekta konfigurācijas.
Izmantojiet līkumus
Varat izmantot līkumus, lai pārbaudītu, vai kodā nav stila pārkāpumu, sintakses un programmēšanas kļūdu. Linteru apvienošana ar automātisko formatēšanu ietaupīs daudz laika un pūļu, lai padarītu kodu lasāmu un atkļūdotu.
Izmantojiet īsinājumtaustiņus
VS Code ir simtiem īsceļu, lai ietaupītu formatēšanas laiku. Jūs pat varat pielāgot šīs komandas kaut kam neaizmirstamam.
Pirms apņemšanās pārbaudiet savu kodu
Lai gan klāšana un automātiskā formatēšana var novērst dažas koda problēmas; jums joprojām ir jāpārskata savs kods, pirms ievadāt commit komandu.
Koda formatēšanas saīsnes
VS Code ir daudzplatformu koda redaktors, ko varat izmantot operētājsistēmās Windows, Mac un Linux, piemēram, Ubuntu. Varat izmantot tālāk norādītos īsinājumtaustiņus, lai formatētu visu dokumentu vai noteiktus izceltos koda apgabalus;
Windows
- Shift + Alt + F kombinācija formatē visu dokumentu.
- Ctrl + K, Ctrl + F kombinācija formatē jūsu atlasītā koda sadaļu. Piemēram, div.
macOS
- Kombinācija Shift + Option + F formatē visu dokumentu.
- Ctrl + K, Ctrl + F kombinācija formatē jūsu atlasītā koda sadaļu. Piemēram, div.
Ubuntu
- Kombinācija Ctrl + Shift + I formatē visu dokumentu.
- Ctrl + K, Ctrl + F kombinācija formatē jūsu atlasītā koda sadaļu. Piemēram, div.
Tomēr ņemiet vērā, ka daži no šiem īsinājumtaustiņiem var neizdoties, ja esat pielāgojis savu VS kodu ar dažādiem īsinājumtaustiņiem.
Varat pārbaudīt savus VS koda saīsnes, veicot šīs darbības;
- Atveriet VS Code un augšējā kreisajā stūrī noklikšķiniet uz vienuma Fails.
- Ritiniet līdz Preferences
- Noklikšķiniet uz Tastatūras īsinājumtaustiņi, lai skatītu visus izmantojamos īsinājumtaustiņus.
Secinājums
Automātiskā formatēšana var ietaupīt daudz laika, kad to iespējojat. Paplašinājuma izvēle atšķirsies atkarībā no izmantotās valodas. Varat instalēt vairākus koda formatētājus atkarībā no programmēšanas valodām, kuras izmantojat savos projektos.
Vienmēr pārbaudiet kodam izvēlētā formatētāja dokumentāciju. Tas nodrošinās, ka saprotat valodas, kuras tas atbalsta, un to, kā to vislabāk izmantot.
Apskatiet mūsu rakstu par labākajiem VS koda paplašinājumiem, kas izstrādātājiem jāizmanto.