JavaScript a été régulièrement classé comme le langage de programmation préféré de la plupart des développeurs.
Plus de 63 % des personnes interrogées dans un Enquête Stackoverflow 2023 ont déclaré qu’ils utilisaient JavaScript. D’un autre côté, le code Visual Studio est un environnement de développement intégré (IDE) populaire. Le même enquête a montré que VS Code est l’éditeur de code préféré, avec plus de 73 % des personnes interrogées votant en sa faveur.
Visual Studio Code prend en charge JavaScript, parmi de nombreux autres langages. Dans cet article, je décrirai l’importance d’exécuter JavaScript dans Visual Studio Code, comment créer un projet JavaScript/écrire du code, donnerai un guide étape par étape pour exécuter JavaScript dans VS Code et les meilleures pratiques pour exécuter du code JavaScript. dans VSCode.
Table des matières
Importance d’exécuter JavaScript dans VS Code
JavaScript fait partie des rares langages pris en charge dès le départ dans Code VS. Voici quelques-unes des raisons pour lesquelles vous souhaiterez peut-être exécuter JavaScript sur VS Code :
- Exécuter et tester du code : vous pouvez écrire et exécuter du code JavaScript sans quitter l’éditeur. Cet éditeur traitera tout ce que vous écrivez dans des fichiers avec une extension .js comme du code JavaScript. Cet éditeur de code mettra également en évidence les erreurs dans votre code au fur et à mesure que vous écrivez et facilitera le débogage.
- Il dispose d’un terminal intégré : vous n’avez pas besoin de quitter l’éditeur de code pour exécuter des commandes permettant de créer de nouveaux dossiers ou fichiers ou d’effectuer un contrôle de version. Ce terminal vous permet également de visualiser les messages d’erreur.
- Un grand écosystème : vous pouvez toujours rechercher des extensions si la fonctionnalité que vous recherchez n’est pas prise en charge par VS Code prêt à l’emploi. Vous pouvez utiliser ces extensions pour des fonctionnalités supplémentaires et obtenir la prise en charge de diverses bibliothèques et frameworks.
- Rechargement à chaud et serveur en direct : vous pouvez activer la sauvegarde automatique de votre code JavaScript sur VS Code. L’option de serveur en direct vous permet également d’exécuter du code JavaScript sur votre navigateur pendant que vous codez. La fonction de rechargement à chaud garantit que l’éditeur de code sélectionne automatiquement toutes les modifications et que vous n’avez pas besoin de redémarrer le serveur en direct.
- IntelliSense et complétion de code : parfois, les éditeurs de code ont simplement besoin que vous commenciez à écrire du code et proposeront des suggestions via une suggestion de code intelligente et une complétion automatique. Cette fonctionnalité vous fera gagner du temps ; il vous suffit de vous concentrer sur la logique.
- Compatibilité multiplateforme : vous pouvez installer VS Code sur macOS, Linux et Windows. Cet éditeur de code prend également en charge TypeScript, un exposant de JavaScript qui introduit les types.
Exécuter JavaScript dans VS Code
Définir un environnement pour exécuter du code JavaScript est simple, quel que soit votre système d’exploitation. Idéalement, votre machine devrait disposer d’au moins 4 Go de RAM pour ces installations. Suivez ces étapes pour commencer.
Configurer Node.js
Noeud.js est l’un des environnements d’exécution JavaScript les plus populaires. Avec Node.js, vous pouvez exécuter JavaScrpt en dehors d’un environnement de navigateur. Node.js a également permis d’utiliser JavaScript dans le développement backend avec ses frameworks comme Express.js.
Tu peux télécharger Node.js gratuitement si vous ne l’avez pas déjà sur votre machine. Vous pouvez également vérifier s’il est installé sur votre machine à l’aide de cette commande :
node -v
S’il est installé, vous verrez quelque chose comme ceci sur votre terminal :
Configuration de Visual Studio Code pour le développement Javascript
Visual Studio Code peut être décrit comme un éditeur de code et un IDE, selon le cas d’utilisation. VS Code prend en charge JavaScript par défaut. Cependant, certaines fonctionnalités JavaScript nécessiteront des extensions pour s’exécuter.
VS Code est téléchargeable gratuitement. Vous pouvez choisir le pertinent version à télécharger en fonction de votre système d’exploitation.
Création d’un projet JavaScript
Vous disposez désormais du logiciel de base (environnement d’exécution et éditeur de code) pour créer une application JavaScript. JavaScript est utilisé pour ajouter de l’interactivité aux sites Web et est principalement utilisé avec HTML et CSS. Cependant, vous pouvez également l’utiliser pour les scripts et les structures de données.
Je peux maintenant créer une application simple et l’appeler JavaScript-VsCode-app.
Vous pouvez utiliser ces commandes :
mkdir JavaScript-VSCode-app
cd JavaScript-VSCode-app
touch app.js
code .
Écrire du code JavaScript dans Visual Studio Code
Pour cette démonstration, j’écrirai uniquement du code JavaScript. Voici à quoi ressemble notre projet sur l’éditeur de code.
Comme vous pouvez le voir, nous n’avons qu’un seul fichier (app.js). Je peux maintenant écrire un programme simple qui vérifie si un nombre est pair. J’écrirai mon code sur le fichier app.js. Voici mon code :
function isEven(number) {
return number % 2 === 0;
}
// Example usage:
let myNumber = 8;
if (isEven(myNumber)) {
console.log(myNumber + " is even.");
} else {
console.log(myNumber + " is odd.");
}Exécution de code JavaScript dans Visual Studio Code
Nous sommes maintenant prêts à exécuter JavaScript dans le VS Code. Cependant, nous devons comprendre ce que fait ce code. Nous avons une fonction que nous avons nommée « isEven ». Notre fonction prend un nombre et renvoie ‘true’ si le nombre est divisible par deux. Cependant, si le nombre n’est pas divisible par deux, il renverra « faux ».
Nous pouvons maintenant exécuter cette commande :
node app.js
Vous pouvez l’exécuter sur le répertoire racine ou sur le terminal VS Code.
Après avoir exécuté le code que nous avons fourni à la dernière étape, nous obtenons « 8 est pair » comme sortie.
Et si on vérifiait si 9 est pair ? Nous pouvons modifier notre code comme suit :
function isEven(number) {
return number % 2 === 0;
}
// Example usage:
let myNumber = 9;
if (isEven(myNumber)) {
console.log(myNumber + " is even.");
} else {
console.log(myNumber + " is odd.");
}Voici ce que nous obtenons après avoir exécuté notre code :
Comme vous pouvez le voir, « 9 est impair » est notre résultat.
Ajouter les extensions nécessaires
Le programme que nous avons créé ci-dessus est simple. Cependant, vous souhaiterez peut-être créer une application complexe dans laquelle vous devrez linter votre code ou même déboguer. Sur le côté gauche du VS Code, cliquez sur l’avant-dernier bouton.
Vous pouvez également utiliser des raccourcis clavier : CTRL+Maj+X.
Vous pouvez maintenant rechercher diverses extensions à utiliser sur votre code. Par exemple, je peux rechercher ESLint.
Vous pouvez voir que les extensions sont déjà activées de mon côté. Vérifiez toujours la description des différentes extensions pour les rendre faciles à configurer et à utiliser.
Utiliser l’extension Code Runner
Visual Studio Code prend en charge des centaines de langages de programmation. Vous pouvez utiliser Coureur de code pour exécuter des codes dans les langages de programmation les plus courants. Localisez l’onglet Extensions sur le côté gauche de votre VS Code et recherchez Code Runner.
Cliquez sur installer et activez l’extension, et vous êtes maintenant prêt à exécuter votre code. J’ai une simple déclaration disant console.log(« Hello, World! »); dans mon fichier app.js. Je peux l’exécuter en utilisant Code Runner. J’utiliserai le raccourci F1 et taperai RUN CODE.
Voilà ce que j’obtiens sur mon terminal :
[Running] node "/home/tk/JavaScript-VSCode-app/app.js" Hello, World! [Done] exited with code=0 in 2.106 seconds
Meilleures pratiques pour écrire du code JavaScript efficacement
La configuration que nous avons jusqu’à présent est parfaite pour les programmes JavaScript simples. Cependant, vous devez garder ces bonnes pratiques à l’esprit si vous souhaitez exécuter JavaScript sur VS Code en douceur :
- Utilisez un linter de code : la lisibilité peut devenir un problème à mesure que la taille de votre fichier JavaScript augmente. Vous pouvez utiliser une extension telle que ESLint plus joli pour vous assurer de détecter rapidement les erreurs dans votre code et d’augmenter la lisibilité de votre code.
- Conservez différentes langues dans différents fichiers : un projet frontal typique peut nécessiter que vous écriviez du code HTML, CSS et JavaScript. Vous pourriez être tenté d’écrire tout le code dans un seul document. Cependant, assurez-vous toujours d’écrire votre code HTML, CSS et JavaScript dans des fichiers différents.
- Profitez des extensions : le marché VS Code propose des milliers d’extensions qui facilitent l’utilisation de diverses bibliothèques. Explore le marché et choisissez les extensions avec les meilleures notes et la meilleure documentation.
Configuration de Git dans Visual Studio Code pour l’intégration du contrôle de version
Nous avons jusqu’à présent indiqué les étapes de configuration de VS Code et d’exécution de JavaScript sur cet éditeur de code. Cependant, vous devrez peut-être utiliser un contrôle de version comme Git pour suivre les modifications apportées à votre code ou même les transférer vers un référentiel distant comme GitHub. Voici les étapes à suivre :
- Installer Git : Git est le contrôle de version le plus utilisé en développement. Télécharger Git version adaptée à votre système d’exploitation et aux spécifications de votre machine. Vous pouvez exécuter cette commande après l’installation pour vérifier votre version de Git :
git -v
Si vous l’avez installé correctement, vous aurez quelque chose de similaire à ceci sur votre terminal :
- Initialisez un référentiel Git : vous pouvez suivre toutes vos modifications et les valider (stader) sur Git. Exécutez cette commande depuis la racine de votre dossier de projet :
git init
- Configurez votre identité Git : vous devez indiquer à Git qui vous êtes en configurant votre nom d’utilisateur et votre adresse e-mail. Exécutez ces commandes pour commencer :
git config –global user.name « Votre nom »
git config –global user.email « [email protected]»>[email protected]”
Remplacez « Votre nom » et «[email protected] » avec les détails pertinents.
- Organiser et valider les modifications : vous avez maintenant configuré Git et pouvez désormais organiser et valider vos modifications. Exécutez cette commande pour vérifier tous les fichiers non suivis :
git status
Vous pouvez maintenant voir tous les fichiers non suivis et non validés.
Exécutez cette commande pour organiser les modifications :
git add .
Exécutez à nouveau git status et vous verrez quelque chose de similaire à ceci :
Vous pouvez maintenant valider vos fichiers. Exécutez cette commande :
git commit -m “your commit message”
Remplacez « votre message de validation » par quelque chose qui décrit vos actions.
Vous pouvez désormais connecter votre contrôle de code source à des plateformes de référentiel distant telles que GitHub.
Conclusion
Nous espérons maintenant que vous comprenez comment créer un environnement et exécuter JavaScript dans VS Code. Vous aurez peut-être besoin d’extensions supplémentaires pour travailler avec les bibliothèques et les frameworks JavaScript sur cet éditeur de code. Cependant, gardez toujours Visual Studio Code à jour si vous souhaitez profiter de toutes les dernières fonctionnalités.
Consultez notre article sur les meilleures ressources pour apprendre JavaScript et perfectionner vos connaissances.