Meer informatie over het gebruik van de code-editor voor JavaScript

In deze korte inleiding tot de code-editor in Visual Studio bekijken we enkele manieren waarop Visual Studio het schrijven, navigeren en begrijpen van code eenvoudiger maakt.

In dit artikel wordt ervan uitgegaan dat u al bekend bent met javaScript-ontwikkeling. Als u dat niet doet, raden we u aan eerst een zelfstudie te bekijken, zoals Een Node.js- en Express-app maken.

Een nieuw projectbestand toevoegen

U kunt de IDE gebruiken om nieuwe bestanden aan uw project toe te voegen.

1. Als uw project is geopend in Visual Studio, klikt u met de rechtermuisknop op een map of het projectknooppunt in Solution Explorer (rechterdeelvenster) en kiest u Toevoegen>Nieuw item.

   Als u niet alle itemsjablonen ziet, kiest u Alle sjablonen weergevenen kiest u vervolgens de itemsjabloon.

2. Kies in het dialoogvenster Nieuw bestand onder de categorie Algemeen het bestandstype dat u wilt toevoegen, zoals JavaScript-bestanden kies vervolgens openen.

   Het nieuwe bestand wordt toegevoegd aan uw project en wordt geopend in de editor.

IntelliSense gebruiken om woorden te voltooien

IntelliSense is een waardevolle resource wanneer u codeert. U kunt hier informatie weergeven over beschikbare leden van een type of parameterdetails voor verschillende overbelastingen van een methode. Wanneer u in de volgende code Router()typt, ziet u de argumenttypen die u kunt doorgeven. Dit wordt hulp bij handtekeningen genoemd.

U kunt IntelliSense ook gebruiken om een woord te voltooien nadat u voldoende tekens hebt getypt om het woord ondubbelzinnig te maken. Als u de cursor na de data tekenreeks in de volgende code plaatst en gettypt, ziet u in IntelliSense functies die eerder zijn gedefinieerd in de code of gedefinieerd in een bibliotheek van derden die u aan uw project hebt toegevoegd.

IntelliSense kan ook informatie over typen weergeven wanneer u de muisaanwijzer over programmeerelementen beweegt.

Voor het verstrekken van IntelliSense-informatie kan de taalservice TypeScript d.ts bestanden en JSDoc-opmerkingen gebruiken. Voor de meest voorkomende JavaScript-bibliotheken worden d.ts bestanden automatisch verkregen. Zie JavaScript IntelliSense-voor meer informatie over hoe IntelliSense-gegevens worden verkregen.

Syntaxis controleren

De taalservice maakt gebruik van ESLint om syntaxiscontrole en linting te bieden. Als u opties wilt instellen voor syntaxiscontrole in de editor, selecteert u Extra>Opties>JavaScript/TypeScript>Linting. Met de linting-opties verwijst u naar het algemene ESLint-configuratiebestand.

In de volgende code ziet u groene syntaxmarkeringen (groene golflijnen) bij de expressie. Beweeg de muisaanwijzer over de syntaxisaccentuering.

De laatste regel van dit bericht geeft aan dat de taalservice een komma (,) verwachtte. De groene kronkel geeft een waarschuwing aan. Rode golvende lijnen geven een fout aan.

Klik in het onderste deelvenster op de foutlijst tabblad om de waarschuwing en beschrijving samen met de bestandsnaam en het regelnummer weer te geven.

U kunt deze code oplossen door de komma (,) toe te voegen voordat "data".

Zie Lintingvoor meer informatie over linting.

Code van commentaar voorzien

De werkbalk, de rij met knoppen onder de menubalk in Visual Studio, kan u helpen productiever te werken terwijl u codet. U kunt bijvoorbeeld de intelliSense-voltooiingsmodus in- of uitschakelen (IntelliSense- is een coderingshulp waarmee onder andere een lijst met overeenkomende methoden wordt weergegeven), een regelinspringing vergroten of verkleinen of code uitcommentariëren die u niet wilt compileren. In deze sectie plaatsen we commentaar op code.

Selecteer een of meer regels code in de editor en kies vervolgens de De geselecteerde regels uitcommentariëren knop op de werkbalk. Als u liever het toetsenbord gebruikt, drukt u op Ctrl+K, Ctrl+C.

De JavaScript-opmerkingstekens // worden toegevoegd aan het begin van elke geselecteerde regel om de code als commentaar te geven.

Codeblokken samenvouwen

Als u het overzicht van bepaalde coderegio's wilt opruimen, kunt u deze samenvouwen. Kies het kleine grijze vak met het minteken erbinnen in de marge van de eerste regel van een functie. Als u een toetsenbordgebruiker bent, plaatst u de cursor ergens in de constructorcode en drukt u op Ctrl+M, Ctrl+M.

Het codeblok wordt samengevouwen tot alleen de eerste regel, gevolgd door een beletselteken (...). Als u het codeblok opnieuw wilt uitvouwen, klikt u op hetzelfde grijze vak dat nu een plusteken bevat of drukt u nogmaals op Ctrl+M, Ctrl+M-. Deze functie wordt Outlining genoemd en is vooral handig wanneer je lange functies of hele klassen samenvouwt.

Definities weergeven

Met de Visual Studio-editor kunt u eenvoudig de definitie van een type, functie, enzovoort inspecteren. Een manier is om naar het bestand te gaan dat de definitie bevat, bijvoorbeeld door Ga naar Definitie te kiezen waar naar het programmeerelement wordt verwezen. Een nog snellere manier om uw focus niet te verplaatsen van het bestand waarin u werkt, is door Definitie bekijkente gebruiken. Laten we eens kijken naar de definitie van de render methode in het onderstaande voorbeeld.

Klik met de rechtermuisknop op render en kies Definitie bekijken in het inhoudsmenu. Of druk op Alt+F12.

Er wordt een pop-upvenster weergegeven met de definitie van de methode render. U kunt in het pop-upvenster schuiven of zelfs de definitie van een ander type bekijken vanuit de bekeken code.

Sluit het voorvertoningsvenster voor definities door het kleine vak met een 'x' in de rechterbovenhoek van het pop-upvenster te kiezen.

Codefragmenten gebruiken

Visual Studio biedt nuttige codefragmenten die u kunt gebruiken om snel en eenvoudig veelgebruikte codeblokken te genereren. codefragmenten zijn beschikbaar voor verschillende programmeertalen, waaronder JavaScript. Laten we een for lus toevoegen aan uw codebestand.

Plaats de cursor op de plaats waar u het fragment wilt invoegen, klik met de rechtermuisknop en kies fragment>Fragment invoegen.

Codefragment

In de editor verschijnt een vakje Invoegen van fragment. Kies Algemeen en dubbelklik vervolgens op de voor item in de lijst.

Hiermee voegt u het for lusfragment toe aan uw code:

for (var i = 0; i < length; i++) {

}

U kunt de beschikbare codefragmenten voor uw taal bekijken door Bewerken>IntelliSense>Fragment invoegente kiezen en vervolgens de map van uw taal te kiezen.

De teksteditor configureren

U kunt andere teksteditoropties voor JavaScript en TypeScript configureren door Tools Options >> Text Editor > JavaScript/TypeScript te kiezen.

Beschikbare opties zijn eigenschappen voor het beheren van opmaak, codevalidatie en vele andere aspecten van de teksteditor.

Verwante inhoud

• Codefragmenten
• code navigeren
• Schetsen
• Naar definitie gaan en definitie bekijken
• herstructureren van
• IntelliSense- gebruiken