Comment exécuter JavaScript dans Visual Studio Code et programmer comme un pro

par


JavaScript se positionne régulièrement comme le langage de programmation favori d’un grand nombre de développeurs.

Plus de 63% des personnes interrogées dans une enquête Stack Overflow de 2023 ont affirmé utiliser JavaScript. Parallèlement, Visual Studio Code est un environnement de développement intégré (IDE) très apprécié. Cette même enquête a révélé que VS Code est l’éditeur de code préféré, plébiscité par plus de 73% des participants.

Visual Studio Code prend en charge JavaScript, parmi de nombreux autres langages. Dans cet article, nous explorerons l’importance de l’exécution de JavaScript dans Visual Studio Code, le processus de création d’un projet JavaScript et d’écriture de code, en fournissant un guide étape par étape pour l’exécution de JavaScript dans VS Code, ainsi que les meilleures pratiques pour une utilisation efficace du code JavaScript dans VSCode.

Pourquoi exécuter JavaScript dans VS Code est-il important ?

JavaScript fait partie des langages pris en charge par défaut dans VS Code. Voici quelques raisons pour lesquelles vous pourriez souhaiter exécuter JavaScript dans VS Code :

  • Exécution et test du code : Vous avez la possibilité d’écrire et d’exécuter du code JavaScript directement dans l’éditeur. L’éditeur reconnaît tout fichier avec une extension .js comme du code JavaScript. Il met également en évidence les erreurs au fur et à mesure que vous écrivez, simplifiant ainsi le débogage.
  • Terminal intégré : Il n’est pas nécessaire de quitter l’éditeur pour exécuter des commandes telles que la création de nouveaux dossiers, la gestion de fichiers ou l’utilisation du contrôle de version. Ce terminal permet également de visualiser les messages d’erreur.
  • Écosystème étendu : Si une fonctionnalité manque à VS Code, vous pouvez toujours rechercher des extensions. Ces extensions offrent des fonctionnalités supplémentaires, ainsi qu’un support pour diverses bibliothèques et frameworks.
  • Rechargement à chaud et serveur en direct : Vous pouvez activer la sauvegarde automatique de votre code JavaScript dans VS Code. L’option de serveur en direct vous permet également d’exécuter votre code JavaScript dans un navigateur pendant que vous codez. Le rechargement à chaud garantit que l’éditeur détecte automatiquement toute modification, évitant ainsi de devoir redémarrer le serveur en direct.
  • IntelliSense et complétion de code : L’éditeur peut suggérer du code intelligent et une complétion automatique dès que vous commencez à taper. Cette fonctionnalité vous fait gagner du temps, en vous permettant de vous concentrer sur la logique.
  • Compatibilité multiplateforme : VS Code est compatible avec macOS, Linux et Windows. L’éditeur prend également en charge TypeScript, qui est une extension de JavaScript introduisant les types.

Comment exécuter JavaScript dans VS Code

La configuration d’un environnement pour exécuter du code JavaScript est simple, quel que soit votre système d’exploitation. Il est préférable que votre machine dispose d’au moins 4 Go de RAM pour cette installation. Voici les étapes à suivre pour commencer :

Installation de Node.js

Node.js est l’un des environnements d’exécution JavaScript les plus populaires. Il vous permet d’exécuter JavaScript en dehors d’un navigateur. Node.js a également ouvert la voie à l’utilisation de JavaScript dans le développement backend avec des frameworks comme Express.js.

Vous pouvez télécharger Node.js gratuitement si ce n’est pas déjà fait. Vous pouvez aussi vérifier son installation en exécutant la commande suivante :

node -v

Si Node.js est installé, vous devriez obtenir une réponse similaire à celle-ci :

Configuration de Visual Studio Code pour le développement JavaScript

Visual Studio Code peut être considéré comme un éditeur de code ou un IDE, selon l’utilisation. VS Code prend en charge JavaScript par défaut. Cependant, certaines fonctionnalités nécessiteront l’installation d’extensions.

VS Code est disponible en téléchargement gratuit. Vous pouvez choisir la version à télécharger en fonction de votre système d’exploitation.

Création d’un projet JavaScript

Vous avez désormais les outils 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, en complément de HTML et CSS. Il peut également servir pour des scripts et des structures de données.

Nous allons créer une application simple, que nous allons nommer JavaScript-VsCode-app.

Vous pouvez utiliser les commandes suivantes :

mkdir JavaScript-VSCode-app
cd JavaScript-VSCode-app
touch app.js
code .

Écrire du code JavaScript dans Visual Studio Code

Pour cette démonstration, nous nous concentrerons uniquement sur le code JavaScript. Voici à quoi ressemble notre projet dans l’éditeur de code.

Nous avons un seul fichier (app.js). Nous allons maintenant écrire un programme simple qui vérifie si un nombre est pair. Voici le code, à écrire dans le fichier app.js :

function isEven(number) {
      return number % 2 === 0;
  }
  // Exemple d'utilisation :
  let myNumber = 8;
  if (isEven(myNumber)) {
      console.log(myNumber + " est pair.");
  } else {
      console.log(myNumber + " est impair.");
  }

Exécuter du code JavaScript dans Visual Studio Code

Nous sommes maintenant prêts à exécuter JavaScript dans VS Code. Cependant, il est essentiel de comprendre ce que fait ce code. Nous avons une fonction nommée « isEven », qui prend un nombre comme argument et retourne ‘true’ si le nombre est divisible par deux, et ‘false’ dans le cas contraire.

Nous pouvons maintenant exécuter cette commande :

node app.js

Vous pouvez l’exécuter depuis le répertoire racine ou directement dans le terminal de VS Code.

Après avoir exécuté le code, nous obtenons « 8 est pair » comme résultat.

Et si nous vérifiions si 9 est pair ? Modifions notre code comme suit :

function isEven(number) {
      return number % 2 === 0;
  }
  
  // Exemple d'utilisation :
  let myNumber = 9;
  if (isEven(myNumber)) {
      console.log(myNumber + " est pair.");
  } else {
      console.log(myNumber + " est impair.");
  }

Voici le résultat après avoir exécuté le code :

Comme vous pouvez le voir, « 9 est impair » est le résultat.

Ajouter les extensions nécessaires

Le programme que nous avons créé est simple. Toutefois, il peut être nécessaire de créer une application complexe, nécessitant l’utilisation d’un linter ou d’un débogueur. Sur le côté gauche de VS Code, cliquez sur l’avant-dernier bouton.

Vous pouvez également utiliser le raccourci clavier : CTRL+Maj+X.

Vous pouvez maintenant rechercher diverses extensions. Par exemple, nous pouvons chercher ESLint.

Il est possible que les extensions soient déjà activées. Vérifiez la description des différentes extensions pour faciliter leur configuration et leur utilisation.

Utilisation de l’extension Code Runner

Visual Studio Code prend en charge de nombreux langages de programmation. Vous pouvez utiliser Code Runner pour exécuter du code dans les langages les plus courants. Localisez l’onglet Extensions sur la gauche de votre VS Code et cherchez Code Runner.

Cliquez sur installer, activez l’extension et vous êtes prêt à exécuter votre code. Prenons l’exemple d’une simple instruction : console.log(« Bonjour, le monde ! »); dans notre fichier app.js. Pour l’exécuter à l’aide de Code Runner, appuyons sur F1 et tapons RUN CODE.

Voici ce que nous obtenons dans le terminal :

[Running] node "/home/tk/JavaScript-VSCode-app/app.js"
  Bonjour, le monde !
  [Done] exited with code=0 in 2.106 seconds

Meilleures pratiques pour une écriture efficace de code JavaScript

La configuration mise en place est idéale pour les programmes JavaScript simples. Cependant, ces bonnes pratiques peuvent être utiles pour une exécution plus fluide de JavaScript sur VS Code :

  • Utiliser un linter de code : La lisibilité peut devenir un problème lorsque la taille de votre fichier JavaScript augmente. L’utilisation d’une extension telle que ESLint plus joli permet de détecter rapidement les erreurs dans le code et d’améliorer sa lisibilité.
  • Conserver différents langages dans différents fichiers : Un projet frontal standard peut nécessiter l’écriture de code HTML, CSS et JavaScript. Vous pourriez être tenté d’écrire tout le code dans un seul fichier. Il est cependant recommandé de toujours séparer votre code HTML, CSS et JavaScript dans des fichiers distincts.
  • Profiter des extensions : Le marché VS Code propose des milliers d’extensions qui facilitent l’utilisation de diverses bibliothèques. Explorez le marché et privilégiez les extensions les mieux notées et les plus documentées.

Intégration du contrôle de version avec Git dans Visual Studio Code

Nous avons vu comment configurer VS Code et comment exécuter JavaScript dans cet éditeur de code. Il peut cependant être nécessaire d’utiliser un système de contrôle de version comme Git pour suivre les modifications apportées à votre code ou les transférer vers un dépôt distant tel que GitHub. Voici les étapes à suivre :

  • Installation de Git : Git est le système de contrôle de version le plus largement utilisé. Téléchargez la version de Git adaptée à votre système d’exploitation et aux spécifications de votre machine. Après l’installation, vous pouvez exécuter cette commande pour vérifier la version de Git :
git -v

Si l’installation est correcte, vous devriez obtenir une réponse similaire dans votre terminal :

  • Initialisation d’un dépôt Git : Vous pouvez suivre toutes vos modifications et les valider (stager) dans Git. Exécutez cette commande depuis la racine de votre dossier de projet :
git init

  • Configuration de votre identité Git : Vous devez indiquer à Git qui vous êtes en configurant votre nom d’utilisateur et votre adresse e-mail. Utilisez les commandes suivantes :

git config –global user.name « Votre Nom »

git config –global user.email « [email protected]« 

Remplacez « Votre Nom » et « [email protected] » par vos informations personnelles.

  • Stager et valider les modifications : Git est maintenant configuré et vous pouvez commencer à stager et à valider vos modifications. Exécutez cette commande pour afficher tous les fichiers non suivis :
git status

Vous pouvez maintenant voir tous les fichiers non suivis et non validés.

Pour stager les modifications, exécutez la commande :

git add .

Exécutez à nouveau git status et vous devriez voir quelque chose de similaire :

Vous pouvez maintenant valider vos fichiers. Exécutez cette commande :

git commit -m "votre message de commit"

Remplacez « votre message de commit » par un bref résumé de vos actions.

Vous pouvez maintenant connecter votre contrôle de code source à des plateformes de dépôt distant telles que GitHub.

Conclusion

Nous espérons que vous comprenez maintenant comment créer un environnement et exécuter JavaScript dans VS Code. L’utilisation d’extensions supplémentaires peut être utile pour travailler avec les bibliothèques et les frameworks JavaScript dans cet éditeur. Assurez-vous de maintenir Visual Studio Code à jour pour profiter des dernières fonctionnalités.

N’hésitez pas à consulter notre article sur les meilleures ressources pour apprendre JavaScript et perfectionner vos compétences.



Tweetez
Partagez
Épingle
Partagez
Partagez
0 Partages