User Documentation VS Code - Een Populaire Gratis IDE
Van Wikipedia:
Visual Studio Code, ook vaak aangeduid als VS Code, is een broncode-editor gemaakt door Microsoft voor Windows, Linux en macOS. Functies omvatten ondersteuning voor debuggen, syntaxismarkering, intelligente codeaanvulling, snippets, coderefactoring en ingebouwde Git. Gebruikers kunnen het thema, de sneltoetsen en voorkeuren aanpassen en extensies installeren die extra functionaliteit toevoegen.
Installatie
De standaardpagina van de VS Code website heeft een vervolgkeuzelijst voor elk ondersteund platform. De kans is groot dat uw platform al vooraf geselecteerd is. Download en installeer en u bent klaar om te beginnen.
Aan de Slag
De VS Code Aan de Slag-pagina heeft enkele Start-items, een lijst met Recente items, en een korte lijst met Walkthroughs. Als u helemaal nieuw bent met VS Code wordt aanbevolen deze te bekijken. Ze duren slechts enkele minuten.
De VS Code documentatie is beschikbaar via het menu Help / Documentatie. De Introductievideo's zijn de moeite waard om te bekijken. Elke video duurt 2 tot 6 minuten en geeft een uitstekende introductie tot de functies van VS Code.
De officiële documentatie is de plek om naartoe te gaan als u specifieke informatie wilt opzoeken.
VS Code Extensies
VS Code kan worden gebruikt voor elk type tekst, inclusief een breed scala aan programmeertalen. Het werkt met JavaScript zonder extensies toe te voegen. Andere talen worden herkend op basis van context, dus als u begint met het maken en opslaan van PHP-code, wordt u waarschijnlijk gevraagd om een PHP Support pack te installeren.
Klik op het Extensies-icoon in de linker Activiteitenbalk om te zien wat u heeft geïnstalleerd en wat wordt aanbevolen. U heeft de PHP Debug extensie nodig!
De VS Code Schermindeling
Enkele termen die in de volgende instructies worden gebruikt:
- Activiteitenbalk de smalle balk aan de linkerkant van het scherm. Selecteer een icoon om de Primaire Zijbalk te openen of te sluiten.
- Primaire Zijbalk toont, indien geopend, details van de geselecteerde activiteit.
- Statusbalk onderaan het scherm. Deze toont wat er gaande is.
- Paneel een gebied onder de tekstvakken om andere informatie weer te geven.
Selecteer een weergave-icoon rechtsboven om een van deze items te openen of te sluiten.
Een Joomla Extensie Coderen
Om een extensie te maken is uw doel om een zipbestand te maken dat u kunt installeren in een werkende Joomla website. U heeft dus een map nodig om uw code in te bewaren. Deze moet zich binnen uw persoonlijke bestandsruimte bevinden op uw laptop of desktopcomputer die wordt gebruikt voor lokale ontwikkeling. Het mag niet in uw websiteboom staan. U kunt bijvoorbeeld ~/jextensions gebruiken om submappen voor verschillende extensies te bevatten. Ik gebruik ~/git omdat het kort en makkelijk te spellen is, hoewel het mogelijk verwarrend is omdat elke submap een aparte git-repository gebruikt.
Voorbeeldcode
Als u wat voorbeeldcode wilt om mee te werken, is er een extensie beschikbaar op GitHub genaamd mod_debugme. Zoals de naam al aangeeft, is het een module met enkele bugs. Naast de modulecode is er een build.xml-bestand om één manier te illustreren om het bouwen voor testen en het maken van een zipbestand te automatiseren.
De module is ontworpen om de volgende paar (standaard 3) gebeurtenissen (verjaardagen) te tonen uit een lijst die is opgeslagen in een databasetabel. U kunt zich voorstellen dat dit wordt gebruikt op een kantoor- of familiewebsite in afwachting van taart.
Het is misschien het beste om te beginnen met git-commando's vanaf de opdrachtregel. Maak eerst een map aan voor uw code en kloon dan de externe repository:
mkdir ~/git
cd ~/git
git clone https://github.com/ceford/j4xdemos-mod-debugme
Het antwoord zou slechts enkele seconden moeten duren:
Cloning into 'j4xdemos-mod-debugme'...
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (23/23), done.
remote: Compressing objects: 100% (16/16), done.
remote: Total 23 (delta 3), reused 23 (delta 3), pack-reused 0
Unpacking objects: 100% (23/23), done.
Neem even de tijd om de inhoud van de map te bekijken:
cd j4xdemos-mod-debugme
ls -al
total 16
drwxr-xr-x 6 ceford staff 192 2 Sep 17:48 .
drwxr-xr-x 3 ceford staff 96 2 Sep 17:48 ..
drwxr-xr-x 12 ceford staff 384 2 Sep 17:48 .git
-rw-r--r-- 1 ceford staff 1402 2 Sep 17:48 README.md
-rw-r--r-- 1 ceford staff 927 2 Sep 17:48 build.xml
drwxr-xr-x 8 ceford staff 256 2 Sep 17:48 mod_debugme
De map .git bevat informatie over de repo. Het bestand README.md is een markdown-document dat deze repo beschrijft. Het bestand build.xml is een bestand dat wordt gebruikt om de extensie te bouwen met een extern hulpmiddel, Phing - later beschreven. De map mod_debugme bevat de code van de extensie.
Installeren in Joomla
Comprimeer de map van de extensie om een installeerbaar zip-bestand te maken:
zip -r mod_debugme.zip mod_debugme
U kunt het zip-bestand nu installeren in de Joomla website die u gebruikt om te testen. Na installatie moet u een Website module aanmaken en toewijzen aan een modulepositie. Omdat het een kapotte module is, kunt u deze tijdens het werk eraan toewijzen aan een positie op Alle pagina's; of u kunt deze toewijzen aan een positie op een enkele pagina; of u kunt deze plaatsen in een artikel met een eigen menu-item.
Verwijder na installatie het zip-bestand.
Debugmodus inschakelen
Stel in Joomla's Algemene instellingen Foutopsporing in op Ja en Foutenrapportage op Maximaal.
Wanneer u een pagina opent die de kapotte module bevat, ziet u een stack trace die aangeeft waar een fout is veroorzaakt.
Soms staat de programmeerfout op de eerste regel van de stack trace. Anders, als de fout wordt veroorzaakt in library-code, bijvoorbeeld door ongeldige gegevens door te geven aan een databasefunctie, kan de programmeerfout verder naar beneden in de lijst met functieaanroepen staan.
Map van de extensie openen in VS Code
Gebruik in VS Code het menu-item Bestand / Map Openen om de map met uw lokale kopie van de mod_debugme extensiecode te zoeken en te openen. U zou iets vergelijkbaars moeten zien als het volgende:
U kunt het probleem misschien al oplossen door de code te lezen. In het geval van de fout Class "DebugHelper" not found zult u zien dat een use-statement een paar regels eerder is uitgecommentarieerd. Het vergeten van een use-statement is een veelvoorkomende fout tijdens de begin van de ontwikkeling!
Los dat probleem op en comprimeer en installeer de module opnieuw. Die stap wordt een beetje vervelend als u meerdere problemen hebt. Dat is waar build-tools van pas komen.
Phing
Phing is een command line tool, beschikbaar voor alle platformen, die gebruikt wordt om softwarepakketten te bouwen aan de hand van instructies opgeslagen in een xml-bestand, standaard genaamd build.xml. Voor het werken met extensiecode kan het gebruikt worden om twee dingen te doen:
- gewijzigde bestanden kopiëren van uw extensiebronmap naar de juiste plaatsen in uw websitemap.
- een nieuw zip-bestand genereren voor nieuwe installaties.
Download en installeer Phing. Er zijn ook andere build-tools beschikbaar! U kunt Phing in uw eigen bin-map of in een systeem bin-map installeren. U moet het pad naar uw Phing-code noteren. In dit voorbeeld is dat ~/bin/phing-latest.phar. U kunt het vanaf de command line uitproberen nadat u naar de map met uw extensiecode bent gegaan:
cd ~/git/j4xdemos-mod-debugme
php ~/bin/phing-latest.phar
Reactie:
Buildfile: /Users/ceford/git/j4xdemos-mod-debugme/build.xml
mod_debugme > main:
... Eventuele gekopieerde bestanden worden hier vermeld
[zip] Building zip: /Users/ceford/zips/mod_debugme.zip
BUILD FINISHED
Total time: 0.0863 seconds
VS Code Taken
Om Phing vanuit VS Code uit te voeren, moet u een tasks.json-bestand aanmaken in de .vscode-map in de root van de j4xdemos-mod-debugme-map. Als die laatste niet bestaat, maak hem dan eerst aan. Maak vervolgens het tasks.json-bestand aan en vul de volgende code in:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Build mod_debugme",
"type": "shell",
"command": "php ~/bin/phing-latest.phar",
"windows": {
"command": "php ~/bin/phing-latest.phar"
},
"group": "build",
"presentation": {
"reveal": "always",
"panel": "shared"
}
}
]
}
Windows-gebruikers moeten het Windows-specifieke commando aanpassen. U kunt de extensie nu bouwen via het menu Terminal / Run Build Task. Het resultaat van het commando zou moeten verschijnen in het Terminal Paneel onder het tekstvak.
* Executing task: php ~/bin/phing-latest.phar
Buildfile: /Users/ceford/git/gitdemo/j4xdemos-mod-debugme/build.xml
mod_debugme > main:
[zip] Nothing to do: /Users/ceford/zips/mod_debugme.zip is up to date.
BUILD FINISHED
Total time: 0.1031 seconds
* Terminal will be reused by tasks, press any key to close it.
Er kunnen onbegrijpelijke foutmeldingen optreden. De meest waarschijnlijke oorzaak is dat er ongeldige paden naar mappen in het build.xml-bestand staan of dat een map niet is aangemaakt. Gewoon weer een ander soort probleem om op te sporen!
Foutopsporing
U zou de eerste fout moeten kunnen oplossen door de code te inspecteren. Meer gecompliceerde problemen vereisen het stap voor stap doorlopen van de code met de debugger. Daarmee kunt u variabelen inspecteren om te zien of ze de waarden bevatten die u verwacht, bijvoorbeeld bij het doorgeven van argumenten aan bibliotheekfuncties.
php.ini Instellingen
Om foutopsporing met Xdebug in te stellen moet u enkele regels toevoegen aan het begin van uw php.ini bestand.
zend_extension="xdebug.so"
xdebug.mode="debug"
xdebug.client_port=9003
xdebug.start_with_request = yes
Na het opslaan van eventuele wijzigingen, herstart uw Apache server.
Venster Website toevoegen
Uw extensiemap bevat slechts een paar bestanden, de bronbestanden van de bestanden die op uw website zijn geïnstalleerd. Foutopsporing tijdens runtime houdt in dat u breakpoints instelt in uw websitebestanden, dus heeft u toegang tot die bestanden nodig. U zou het menu File / Add Folder to Workspace... kunnen gebruiken om de websitemap aan uw Workspace toe te voegen. Er is echter een grote kans dat u dan wijzigingen aanbrengt in de websitebestanden in plaats van de bronbestanden. Het is daarom waarschijnlijk het beste om een apart VS Code venster te openen voor foutopsporing.
- Nieuw venster openen: Selecteer in het VS Code menu File / New Window en selecteer de map die uw Joomla website bevat.
- Map openen: Selecteer in het nieuw geopende venster File / Open Folder... uit het VS Code menu. Zoek uw websitemap en selecteer deze. U zou nu een lijst met alle bestanden van uw Joomla website moeten zien in de Primaire Zijbalk.
Startconfiguratie
Om foutopsporing daadwerkelijk te laten werken in VS Code heeft u een launch configuratie nodig. Maak in de hoofdmap van uw website een map aan met de naam .vscode (let op de punt ervoor) met daarin een bestand genaamd launch.json met de volgende inhoud:
{
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"hostname": "0.0.0.0",
"port": 9003,
"stopOnEntry": true,
"pathMappings": {
"/Users/ceford/Sites/j421rc2": "${workspaceFolder}"
}
}
]
}
Vergeet niet het pathMappings item in dit voorbeeld te vervangen door de daadwerkelijke pathMappings van uw eigen website. Het stopOnEntry item zal de verwerking pauzeren bij de allereerste regel PHP-code die wordt uitgevoerd.
Foutopsporing mod_debugme
Nu bent u klaar om de fouten in de geïnstalleerde module te vinden en op te lossen.
- Modulecode vinden: Zoek de eerste fout op regel 16 van JROOT/modules/mod_debugme/mod_debugme.php.
- Breakpoint instellen: Klik in de ruimte links van het nummer 16. Er verschijnt een lichtrode stip wanneer u erover zweeft, en deze wordt volledig rood nadat u erop heeft geklikt, om aan te geven dat er een breakpoint is ingesteld.
- Foutopsporing starten: Selecteer in het VS Code menu Run / Start Debugging. Herlaad uw website in uw browser. Uw VS Code venster zou opnieuw moeten verschijnen met de code gestopt bij de eerste regel van het bestand index.php van de website. Bovenaan het scherm staan enkele pictogrammen om het foutopsporingsproces te besturen. Deze zouden voor zich moeten spreken. Zo niet, zoek ze dan op in de VS Code Help / Documentatie.
- Doorgaan: Selecteer de knop doorgaan - de code zal doorlopen tot uw eerste breakpoint. Bekijk de code om te zien wat het probleem is.
- Zweven: Als u met de muis over een variabele zweeft waaraan een waarde is toegekend, verschijnt een kleine Tooltip met een samenvatting van de attributen van die variabele. Er is geen Tooltip voor variabelen waaraan geen waarden zijn toegekend.
- Variabelen: De linkerkolom bevat meer informatie over de status van de code bij het breakpoint. Er zijn er te veel om hier allemaal te behandelen. Verken ze naar behoefte!
- Debuggen stoppen: Het is waarschijnlijk het beste om het pictogram Doorgaan te selecteren, anders wordt de webpagina leeg weergegeven. Anders kunt u de knop Stoppen of het menu Uitvoeren / Debuggen Stoppen gebruiken.
Een bug oplossen
Onthoud: Herstel de bug niet in de website code! Herstel het in de broncode!
Herstel de broncode en gebruik vervolgens Terminal / Run Build Task....
Start debuggen opnieuw.
Tips
Een paar niet zo voor de hand liggende problemen:
- U herstelt de eerste bug maar het crasht nog steeds op die regel. Kijk in mod_debugme.xml om te zien waar de src van namespaced classes is gedefinieerd. Wanneer dit is hersteld in de broncode moet u het zip-bestand opnieuw installeren of administrator/cache/autoload_psr4.php verwijderen. Wanneer dit ontbreekt, bouwt Joomla dat bestand opnieuw op uit manifestbestanden. Maar als er een incorrecte of ontbrekende vermelding in staat, wordt dit pas hersteld nadat de extensie opnieuw is geïnstalleerd.
- Soms moet u een breekpunt instellen enkele regels voor de regel waar de fout optreedt, vooral als u waarden wilt controleren die aan functieaanroepen worden doorgegeven.
- Tabel xxx.yyy\debugme bestaat niet. Ah ja, de code om een tabel aan te maken bij installatie en te verwijderen bij deïnstallatie is nooit gemaakt. U moet een sql-query uitvoeren in phpMyAdmin met de inhoud van het bestand mod\debugme.sql. Vergeet niet om #\ in de tabelnamen te wijzigen naar uw databasevoorvoegsel. En als het nog steeds mislukt, controleer dan de tabelnaam in de code.
Schermafbeelding
Wanneer alles is hersteld, ziet u mogelijk het volgende:
Cake days?
Referenties
Uit de Joomla! documentatie: Visual Studio Code behandelt ook de configuratie van andere tools, bijvoorbeeld CodeSniffer en PHPUnit.