Lär dig hur du använder kodredigeraren för JavaScript
I den här korta introduktionen till kodredigeraren i Visual Studio ska vi titta på några av de sätt som Visual Studio gör det enklare att skriva, navigera och förstå kod.
Tips
Om du inte redan har installerat Visual Studio går du till Visual Studio-nedladdningar sidan för att installera den kostnadsfritt. Mer information om hur du hämtar språktjänsten för TypeScript finns i TypeScript-stöd.
Den här artikeln förutsätter att du redan är bekant med JavaScript-utveckling. Om du inte är det föreslår vi att du först tittar på en handledning, till exempel Skapa en Node.js- och Express-app.
Lägga till en ny projektfil
Du kan använda IDE för att lägga till nya filer i projektet.
När projektet är öppet i Visual Studio högerklickar du på en mapp eller projektnod i Solution Explorer (höger fönster) och väljer Lägg till>Nytt objekt.
Om du inte ser alla objektmallar väljer du Visa alla mallaroch väljer sedan objektmallen.
I dialogrutan Ny fil under kategorin Allmänt väljer du den filtyp som du vill lägga till, till exempel JavaScript-filoch väljer sedan Öppna.
Den nya filen läggs till i projektet och öppnas i redigeraren.
Använda IntelliSense för att slutföra ord
IntelliSense är en ovärderlig resurs när du kodar. Den kan visa information om tillgängliga medlemmar av en typ eller information om parametrar för olika överlagringar av en metod. När du skriver Router()i följande kod visas de argumenttyper som du kan skicka. Detta kallas signaturhjälp.
Du kan också använda IntelliSense för att slutföra ett ord när du har skrivt tillräckligt med tecken för att skilja det åt. Om du placerar markören efter data strängen i följande kod och skriver getvisar IntelliSense funktioner som definierats tidigare i koden eller definierats i ett bibliotek från tredje part som du har lagt till i projektet.
IntelliSense kan också visa information om typer när du hovrar över programmeringselement.
För att tillhandahålla IntelliSense-information kan språktjänsten använda TypeScript d.ts-filer och JSDoc-kommentarer. För de vanligaste JavaScript-biblioteken hämtas d.ts filer automatiskt. Mer information om hur IntelliSense-information hämtas finns i JavaScript IntelliSense.
Kontrollera syntax
Språktjänsten använder ESLint för att tillhandahålla syntaxkontroll och lintning. Om du behöver ange alternativ för syntaxkontroll i redigeraren väljer du Verktyg>Alternativ>JavaScript/TypeScript>Linting. Lintningsalternativen pekar dig på den globala ESLint-konfigurationsfilen.
I följande kod ser du grön syntaxmarkering (gröna krumelurer) på uttrycket. Hovra över syntaxmarkeringen.
Den sista raden i det här meddelandet anger att språktjänsten förväntade sig ett kommatecken (,). Den gröna krumeluren indikerar en varning. Röda krumelurer indikerar ett fel.
I den nedre rutan kan du klicka på fliken fellista för att se varningen och beskrivningen tillsammans med filnamn och radnummer.
Du kan åtgärda den här koden genom att lägga till kommatecknet (,) innan "data".
Mer information om lintning finns i Linting.
Kommentera ut kod
Verktygsfältet, som är raden med knappar under menyraden i Visual Studio, kan göra dig mer produktiv när du kodar. Du kan till exempel växla IntelliSense-slutförandeläge (IntelliSense är ett kodningsstöd som visar en lista över matchande metoder, bland annat), öka eller minska ett radindrag eller kommentera ut kod som du inte vill kompilera. I det här avsnittet kommenterar vi ut lite kod.
Välj en eller flera rader med kod i redigeraren och välj sedan knappen Kommentera ut de markerade raderna
i verktygsfältet. Om du föredrar att använda tangentbordet trycker du på Ctrl+K, Ctrl+C.
JavaScript-kommentarstecken // läggs till i början av varje vald rad för att kommentera ut koden.
Fäll ihop kodblock
Om du behöver rensa upp i vyn över vissa kodregioner, kan du fälla ihop dem. Välj den lilla grå rutan med minustecknet inuti den i marginalen för den första raden i en funktion. Om du är en tangentbordsanvändare placerar du markören var som helst i konstruktorkoden och trycker på Ctrl+M, Ctrl+M.
Kodblocket komprimeras bara till den första raden, följt av en ellips (...). Om du vill expandera kodblocket igen klickar du på samma grå ruta som nu har ett plustecken eller trycker på Ctrl+M, Ctrl+M igen. Den här funktionen kallas som beskriver och är särskilt användbar när du komprimerar långa funktioner eller hela klasser.
Visa definitioner
Visual Studio-redigeraren gör det enkelt att granska definitionen av en typ, funktion osv. Ett sätt är att navigera till filen som innehåller definitionen, till exempel genom att välja Gå till definition var som helst där programmeringselementet refereras. Ett ännu snabbare sätt att inte flytta fokus från filen du arbetar i är att använda Peek Definition. Nu ska vi titta på definitionen av metoden render i exemplet nedan.
Högerklicka på render och välj Peek Definition på innehållsmenyn. Eller tryck på Alt+F12.
Ett popup-fönster visas med definitionen av metoden render. Du kan rulla i popup-fönstret eller till och med titta på definitionen av en annan typ från den granskade koden.
Stäng det visade definitionsfönstret genom att klicka på den lilla knappen med ett "x" längst upp till höger i popup-fönstret.
Visa inläggsanvisningar
Från och med Visual Studio 2022 version 17.12 visar inläggsledtrådar ytterligare information om källkod som visas direkt i koden. Detta används vanligtvis för att visa härledda typer, parameternamn och annan implicit information från koden direkt i redigeringsprogrammet.
Så här konfigurerar du inbäddade tips:
Gå till Verktyg > Alternativ > Textredigeraren > Alla Språk > Inlay-tipsoch välj ett alternativ för att visa inlay-tips.
Gå till Verktyg > Alternativ > Textredigeraren > JavaScript/TypeScript > Avancerat > Allmänt och konfigurera de inlay-tips som du vill dölja eller visa.
Som standard är de flesta av dessa alternativ inaktiverade.
Använd kodsnuttar
Visual Studio innehåller användbara kodfragment som du kan använda för att snabbt och enkelt generera vanliga kodblock.
kodfragment är tillgängliga för olika programmeringsspråk, inklusive JavaScript. Nu ska vi lägga till en for-loop i kodfilen.
Placera markören där du vill infoga kodfragmentet, högerklicka och välj kodfragment>Infoga kodfragment.
En Infoga kodfragment rutan visas i redigeraren. Välj Allmänt och dubbelklicka sedan på för objekt i listan.
Detta lägger till for-loopfragmentet i koden:
for (var i = 0; i < length; i++) {
}
Du kan titta på de tillgängliga kodfragmenten för ditt språk genom att välja Redigera>IntelliSense>Infoga kodfragmentoch sedan välja språkmappen.