A JavaScripthez készült Visual Studio IDE áttekintése

A Visual Studio integrált fejlesztői környezetének (IDE) 5–10 perces bemutatása során bemutatunk néhány ablakot, menüt és egyéb felhasználói felületi funkciót.

Ha még nem telepítette a Visual Studiót, nyissa meg a Visual Studio letöltési oldalát, és telepítse ingyenesen.

Start ablak

A Visual Studio elindítása után elsőként a kezdőablak jelenik meg. A kezdőablak úgy lett kialakítva, hogy segítsen a "kód gyorsabb eléréséhez". Lehetősége van kód bezárására vagy kivételére, meglévő projekt vagy megoldás megnyitására, új projekt létrehozására, vagy egyszerűen csak egy olyan mappa megnyitására, amely tartalmaz néhány kódfájlt. Ha a kezdőablak nincs megnyitva, a Fájlindító > ablak lehetőséget választva nyissa meg.

Ha először használja a Visual Studiót, a legutóbbi projektek listája üres lesz.

Ha nem MSBuild-alapú kódbázisokkal dolgozik, a Helyi mappa megnyitása lehetőséggel nyissa meg a kódot a Visual Studióban. További információ: Kód fejlesztése a Visual Studióban projektek és megoldások nélkül. Ellenkező esetben létrehozhat egy új projektet, vagy klónozhat egy projektet egy forrásszolgáltatótól, például a GitHubról vagy az Azure DevOpsból.

A Folytatás kód nélkül lehetőség egyszerűen megnyitja a Visual Studio fejlesztői környezetét egy adott projekt vagy kód betöltése nélkül. Ezt a lehetőséget választva bekapcsolódhat egy élő megosztási munkamenetbe, vagy csatolhatja a hibakeresési folyamathoz. Az Esc billentyűt lenyomva bezárhatja a kezdőablakot, és megnyithatja az IDE-t.

Projekt létrehozása

A Visual Studio funkcióinak megismeréséhez hozzunk létre egy új projektet.

1. A kezdőablakban válassza az Új projekt létrehozása lehetőséget, majd a keresőmezőbe írja be a javascript vagy a typescript kifejezést, hogy a projekttípusok listáját azokra szűrje, amelyek a nevükben vagy nyelvtípusukban "javascriptet" vagy "typescriptet" tartalmaznak.

   A Visual Studio különféle projektsablonokat biztosít, amelyek segítenek a kódolás gyors megkezdésében.

   

2. Válasszon egy JavaScript Express-alkalmazásprojekt-sablont , és kattintson a Tovább gombra.

3. A megjelenő Új projekt konfigurálása párbeszédpanelen fogadja el az alapértelmezett projektnevet, és válassza a Létrehozás lehetőséget.

   A projekt létrejött. A jobb oldali panelen válassza a app.js lehetőséget a fájl szerkesztőablakban való megnyitásához. A Szerkesztő megjeleníti a fájlok tartalmát, és itt végzi a legtöbb kódolási munkát a Visual Studióban.

   

Megoldáskezelő

A Megoldáskezelő, amely általában a Visual Studio jobb oldalán található, grafikusan ábrázolja a projektben, megoldásban vagy kódmappában lévő fájlok és mappák hierarchiáját. A hierarchiában tallózhat, és a Megoldáskezelőben megnyithat egy fájlt.

Menük

A Visual Studio tetején található menüsáv kategóriákba csoportosítja a parancsokat. A Project menü például a projekthez kapcsolódó parancsokat tartalmaz. Az Eszközök menüben testre szabhatja a Visual Studio viselkedését a Beállítások lehetőség kiválasztásával, vagy az Eszközök és szolgáltatások lekérése gombra kattintva szolgáltatásokat adhat hozzá a telepítéshez.

Nyissuk meg a Hibajelentés ablakot úgy, hogy a Nézet menüt, majd a Hibalista opciót választjuk.

Hibalista

A hibalista a kód aktuális állapotával kapcsolatos hibákat, figyelmeztetéseket és üzeneteket jeleníti meg. Ha bármilyen hiba (például hiányzó kapcsos zárójel vagy pontosvessző) szerepel a fájlban, vagy a projekt bármely pontján, ezek itt jelennek meg.

Kimeneti ablak

A Kimeneti ablak megjeleníti a projekt létrehozásának és a forrásvezérlő szolgáltatójának kimeneti üzeneteit.

Hozzuk létre a projektet, hogy láthassa a build kimenetét. A Build menüben válassza a Build Solution (Megoldás létrehozása) lehetőséget. A Kimeneti ablak automatikusan megkapja a fókuszt, és megjelenít egy sikeres buildüzenetet.

Keresőmező

A Keresőmező egy gyors és egyszerű módja annak, hogy bármit is csináljon a Visual Studióban. Beírhat néhány szöveget a kívánt tevékenységhez, és megjeleníti a szöveghez kapcsolódó beállítások listáját. Tegyük fel például, hogy növelni szeretné a buildkimenet részletességét, hogy további részleteket jelenítsen meg arról, hogy pontosan mit csinál a build. Ezt a következőképpen teheti meg:

1. Ha nem látja a keresőmezőt, nyomja meg a Ctrl+Q billentyűket az elindításhoz, majd írja be a verbosity a mezőbe.

2. A megjelenített eredmények közül kattintson duplán az MSBuild projekt építési kimenet részletességére (projectsAndSolutions.buildAndRun.outputVerbosity) bejegyzésre.

   

   A Beállítások panel megnyílik az Összes beállításprojekt>és megoldás>összeállítása és futtatása szakaszhoz.

3. Használja a legördülő menüt, és állítsa az MSBuild project build kimeneti részletességi beállítását Normál értékre.

4. A projekt újraépítéséhez kattintson a jobb gombbal a projektre a Megoldáskezelőben , és válassza az Újraépítés lehetőséget a helyi menüből.

   A Kimeneti ablak ezúttal részletesebb naplózást jelenít meg a buildelési folyamatból.

   

Visszajelzés küldése menü

Ha problémákat tapasztal a Visual Studio használata során, vagy ha javaslata van a termék fejlesztésére, használja a Visszajelzés küldése menüt a Visual Studio ablakának tetején.

Következő lépések

Áttekintettük a Visual Studio néhány funkcióját, hogy megismerkedjen a felhasználói felülettel. További információk:

Tudnivalók a kódszerkesztőről

Tudnivalók a projektekről és a megoldásokról

Lásd még

• A Visual Studio IDE áttekintése
• A Visual Studio 2017 további funkciói
• Téma és betűszínek módosítása