Tutoriel de démarrage de VSCode (Introduction)

Quel outil de développement front-end est le meilleur ? Bien sûr, c'est Visual Studio Code ! Elle vient de Microsoft, qu'en pensez-vous ? Et elle est libre !

Extensible et personnalisable. (Extensible et personnalisable, c'est pourquoi je l'aime)

Vous voulez encore plus de fonctionnalités ? Installez des extensions pour ajouter de nouvelles langues, de nouveaux thèmes, des débogueurs et pour vous connecter à des services supplémentaires. Les extensions s'exécutent dans des processus séparés, garantissant qu'elles ne ralentiront pas votre éditeur.

Prenez JavaScript comme représentant. Dans le passé, lorsque nous déboguions JS, nous devions utiliser le navigateur F12. Le code nécessaire pour utiliser console.log. ou une alerte pour afficher le processus. Les développeurs habitués au compilateur VS, par exemple, peuvent ne pas y être habitués. Vous pouvez désormais utiliser VS Code pour le développement. Il est open source et gratuit. En installant des plug-ins liés au langage de développement, VS Code peut réaliser la reconnaissance de syntaxe et les invites de code correspondantes. Actuellement, le magasin d'extension fournit des plug-ins pour la plupart des programmes. langages, qui peuvent être téléchargés à volonté. Les scripts couramment utilisés incluent JScript, EScript et d'autres langages, notamment PHP, Python, etc.

Installation de VS Code

Visual Studio Code (ci-après dénommé VS Code) Adresse de téléchargement : https:/ /code .visualstudio.com/

launch.json Introduction

　launch.json est un fichier de configuration généré automatiquement par VSCode dans le répertoire de développement actuel. Pendant le développement, configurez le chemin de démarrage du programme et l'environnement d'exécution en fonction du type de projet, comme indiqué dans la figure ci-dessous, qui décrit le chemin du fichier qui doit actuellement être débogué comme "${workspaceFolder}/scripts/debug.js ", et le programme utilise un nœud pour le débogage.

Cliquez sur le bouton Ajouter une configuration pour voir plus d'options de configuration. La liste des options est liée aux extensions actuellement installées, par exemple après l'installation de Chrome.

Les significations spécifiques de certaines variables prédéterminées dans launch.json sont les suivantes

${workspaceRoot} Le chemin du dossier ouvert dans VSCode

Texte original : le chemin de le dossier ouvert dans VS Code

${workspaceRootFolderName} Le chemin d'accès au dossier ouvert dans VSCode, mais ne contient pas de "/"

Texte original : le nom du dossier ouvert dans VS Code sans aucun solidus (/)

${file} Le fichier actuellement ouvert

Texte original : le fichier actuellement ouvert

${relativeFile} Le fichier actuellement ouvert (par rapport à workspaceRoot)

Texte original : le fichier actuellement ouvert par rapport à workspaceRoot

${fileBasename} Le nom du fichier actuellement ouvert, à l'exclusion de l'extension

Texte original : le fichier actuel nom de base du fichier ouvert

$ {fileDirname} Le nom du répertoire du fichier actuellement ouvert

Texte original : le nom du répertoire du fichier actuellement ouvert

${fileExtname} L'extension du fichier actuellement ouvert fichier ouvert

Texte original : l'extension du fichier actuellement ouvert

${cwd} Le répertoire de travail (répertoire de démarrage) de la tâche en cours d'exécution

Texte original : celui de l'exécuteur de tâche répertoire de travail actuel au démarrage

Développé à l'aide de VS Code Javascript

Installer le plug-in de script

Utilisez ECMAScript pour développer, installez ESLint Pour le développement Javascript, installez jshint

Debug Script

1. Environnement de débogage, utilisez l'environnement de compilation de nœuds.

2. Configurez launch.json

{

"type": "node",

　"name": "Lancer le programme" ,

　　"program": "${workspaceFolder}/scripts/debug.js" ?//Référencez le fichier js qui doit être testé pour debug.js via require En appelant, vous pouvez simuler le clic du bouton effectuer ou tester l'algorithme

　}

　 3. Basculez vers la page de débogage et démarrez le débogage, comme indiqué dans la figure :

Comment le définir en chinois

Appuyez sur le raccourci clavier Ctrl+shift+p, une boîte de commande apparaîtra, comme indiqué sur l'image :

Entrez configurer la langue

Enfin, dans le fichier de configuration de langue nouvellement ouvert, remplacez les paramètres régionaux : "en-us" par les paramètres régionaux : "zh-cn" Après au redémarrage, la configuration est terminée, comme le montre la figure :

Tutoriel recommandé : Tutoriel d'introduction au vscode

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!