Visual Studio Code, populært kjent som VS Code, er en av de mest brukte koderedigererne. VS Code har innebygd støtte for Node.js, JavaScript og TypeScript. Du kan imidlertid bruke forskjellige utvidelser for å gjøre den tilgjengelig for de fleste andre språk og kjøretider.
Microsoft er selskapet som utviklet denne gratis og åpen kildekode-editor.
VS-kode er populær på grunn av disse funksjonene;
- Intellisense: VS-kode gir autofullføring av kode og syntaksutheving.
- På tvers av plattformer: Du kan bruke denne koderedigereren på Linux-, Windows- og macOS-operativsystemer.
- Tilgjengelighet av ulike utvidelser: Tilgjengeligheten til ulike utvidelser kan også transformere VS Code til et integrert utviklingsmiljø (IDE).
- Flerspråklig støtte: Du kan bruke dette verktøyet med nesten alle programmeringsspråk gjennom VS Code-utvidelser.
- Integrert terminal: Den innebygde terminalen i VS Code lar utviklere utføre Git-kommandoer rett fra kodeeditoren. Du kan dermed foreta, presse og trekke endringer fra denne editoren.
Innholdsfortegnelse
Autoformatering i VS-kode
Forutsetninger
- VS-kode: Denne kodeeditoren er gratis å laste ned. Hvis du ikke har den installert på maskinen din, last den ned fra den offisielle siden, avhengig av operativsystemet ditt.
- Velg språket du vil bruke: Du må bestemme hvilket språk du vil bruke, siden det er forskjellige formateringer for forskjellige språk.
- En formatering: VS Code bruker utvidelser for kodeformatering. Vi vil bruke Prettier i denne artikkelen. Du står imidlertid fritt til å bruke hvilken som helst formatering som passer språket du bruker.
Autoformatering er en funksjon som automatisk formaterer blokker/kodelinjer eller en fil på koderedigeringsprogrammet basert på spesifikke regler og retningslinjer. Denne funksjonen er basert på en konfigurasjonsfil som spesifiserer formateringsregler for innrykk, linjeskift og mellomrom.
Når autoformateringsfunksjonen er aktivert, vil alle disse reglene bli brukt på alle filene i kodebasen din mens du skriver den.
Du kan imidlertid også deaktivere autoformatering for en bestemt kodeblokk hvis du vil at den skal skille seg ut fra resten. For å oppnå dette kan du pakke kodebiten inn i en kommentarblokk som spesifiserer reglene som skal brukes.
Fordeler med automatisk formatering av koder i VS-kode
- Sparer tid: Å skrive kode og formatering kan være tidkrevende. Automatisk formatering sparer deg for tid, og du kan dermed fokusere mer på skriveprosessen og syntaks.
- Konsistens: Selv om kildekoden ikke vises på klientsiden, bør det være en viss konsistens. Automatisk formatering er nyttig, spesielt for store prosjekter med flere bidragsytere.
- Følger beste fremgangsmåter: Autoformateringsfunksjonen er nyttig for å håndheve konsistente innrykk, mellomrom og navnekonvensjoner.
- For enkel kodelesing: Godt formatert kode er lett å følge under kodegjennomganger. Nye utviklere som blir med i organisasjonen din vil lett forstå godt formatert kode.
Hvordan aktivere Auto Format i VS-kode og tilpasse den
Følg disse trinnene for å aktivere automatisk formatering:
Når Prettier er installert på VS-koden din, kan du aktivere funksjonen for automatisk formatering.
Vi bruker en enkel HTML-fil av en påloggingsside for å demonstrere hvordan du aktiverer automatisk formatering.
Vi vil bruke denne koden:
<!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>
Selv om koden ovenfor er funksjonell, er den vanskelig å lese og følge med da den ikke er rykket inn som forventet. Vi vil bruke Prettier til å autoformatere koden.
Følg disse instruksjonene.
3. Skriv Formatter i søkefeltet og velg Penere på Editor:Default Formatter-fanen.
4. Finn Editor: Formater på Lagre og merk av i boksen.
5. Lagre HTML-filen, velg inndataene på HTML-dokumentet, høyreklikk og velg Formater dokument.
6. Sjekk om dokumentet er formatert. Denne utvidelsen vil automatisk formatere all den andre koden du skriver på VS-koden.
6. Juster Prettier Configuration-innstillinger: Prettier er satt opp til å utføre mange ting som standard. Du kan imidlertid fortsatt tilpasse den for å passe dine behov. Gå til Innstillinger på VS-koden din, søk etter Prettier, og juster innstillingene slik du vil.
7. Lag en penere konfigurasjonsfil: Innstillingene du har konfigurert på maskinen din kan avvike fra andre hvis du jobber som et team. En penere konfigurasjonsfil vil sikre at du har en konsistent kodestil for prosjektet ditt. Opprett en .prettierrc-fil med .json-utvidelsen for å konfigurere prosjektinnstillingene dine. Vi kan legge til denne koden i JSON-filen for demonstrasjonsformål;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Kodeblokken ovenfor spesifiserer fire ting, etterfølgende kommaer, tabulatorbredden, bruken av semikolon og om det skal brukes enkle eller doble anførselstegn. I dette tilfellet;
- Et etterfølgende komma vil bare bli lagt til når koden er transpilert til es5.
- Tabbredde, antall mellomrom for hver fane, er satt til 4.
- Semi indikerer om du skal legge til semikolon eller ikke i koden på slutten av utsagn. Vi har satt den som usann, noe som betyr at semikolon ikke blir lagt til.
- Du kan enten bruke enkle eller doble anførselstegn i koden. Vi har spesifisert at vi skal bruke enkelttilbud for dette prosjektet.
Du kan sjekke ut vakrere dokumenter for å forstå hvordan du oppretter konsistente konfigurasjonsinnstillinger.
Beste praksis for autoformat i VS-kode
Bruk riktig formatert
Selv om vi har brukt Prettier i denne artikkelen for demonstrasjonsformål, betyr det ikke at det gjelder alle språk. Det finnes hundrevis av formateringsutvidelser for VS Code, og det er opp til deg å bestemme hva som passer dine behov. For eksempel, formattere som Prettier og Beautify passer til HTML og CSS. På den annen side kan du bruke Black- eller Python-utvidelser til å formatere Python-koden.
Bruk en konsekvent kodestil
Som du har sett, kan du tilpasse innstillingene til formateren. Hvis du jobber som et team, sørg for at du har de samme konfigurasjonene for å lage en konsistent kodestil. Den beste tilnærmingen er å lage en .prettierrc.extension-fil for å inkludere alle konfigurasjonene for prosjektet ditt.
Bruk linters
Du kan bruke linters for å se etter stilbrudd, syntaksfeil og programmeringsfeil i koden din. Å kombinere linters med automatisk formatering vil spare deg for mye tid og krefter på å gjøre koden lesbar og feilsøke.
Bruk hurtigtaster
VS Code har hundrevis av snarveier for å spare tid i formatering. Du kan til og med tilpasse disse kommandoene til noe minneverdig.
Sjekk koden din før du forplikter deg
Selv om linting og autoformatering kan fikse noen problemer på koden din; du må fortsatt se gjennom koden din før du skriver inn commit-kommandoen.
Snarveier for kodeformatering
VS Code er en multiplattform-kodeeditor som du kan bruke på Windows, Mac og Linux-baserte systemer som Ubuntu. Du kan bruke følgende snarveier til enten å formatere hele dokumentet eller spesifikke uthevede områder av koden din;
Windows
- Shift + Alt + F-kombinasjonen formaterer hele dokumentet.
- Kombinasjonen Ctrl + K, Ctrl + F formaterer en del av koden du har valgt. For eksempel en div.
Mac os
- Shift + Option + F-kombinasjonen formaterer hele dokumentet.
- Kombinasjonen Ctrl + K, Ctrl + F formaterer en del av koden du har valgt. For eksempel en div.
Ubuntu
- Kombinasjonen Ctrl + Shift + I formaterer hele dokumentet.
- Kombinasjonen Ctrl + K, Ctrl + F formaterer en del av koden du har valgt. For eksempel en div.
Vær imidlertid oppmerksom på at noen av disse snarveiene kan mislykkes hvis du har tilpasset VS-koden med forskjellige snarveier.
Du kan sjekke VS Code-snarveiene ved å bruke disse trinnene;
- Åpne VS-kode og klikk på Fil-elementet øverst til venstre.
- Rull til Innstillinger
- Klikk på Tastatursnarveier for å se alle snarveiene du kan bruke.
Konklusjon
Automatisk formatering kan spare deg for mye tid når du aktiverer den. Valget av en utvidelse vil variere avhengig av språket du bruker. Du kan installere flere kodeformatere avhengig av programmeringsspråkene du bruker for prosjektene dine.
Sjekk alltid dokumentasjonen for formateringsverktøyet du velger for koden din. Dette vil sikre at du forstår språkene den støtter og hvordan du kan gjøre det beste ut av det.
Sjekk ut artikkelen vår om de beste VS Code-utvidelsene utviklere bør bruke.