Les outils démarrer en JavaScript avec VS Code : Premier script

Les outils pour bien démarrer en JavaScript avec VS Code faire son premier script

image démarrer javascript son premier script avec vs code

 

Introduction

Pour bien débuter avec JavaScript, il est crucial de disposer des bons outils et de suivre les étapes appropriées. Visual Studio Code (VS Code) est un éditeur de code puissant et populaire qui simplifie considérablement la rédaction de scripts JavaScript. Ce guide vous présentera les outils indispensables et vous accompagnera dans la création de votre premier script JavaScript.

 

Installation de VS Code

 

Avant toute chose, téléchargez et installez Visual Studio Code depuis le site officiel. VS Code est disponible pour Windows, macOS et Linux. Une fois installé, lancez l’éditeur.

 

Extensions essentielles pour JavaScript

 

VS Code dispose d’un vaste écosystème d’extensions qui augmentent ses fonctionnalités. Pour JavaScript, certaines extensions sont particulièrement utiles :

 

  1. ESLint : Pour l’analyse de code et la correction des erreurs.
  2. Prettier – Code formatter : Pour formater automatiquement votre code.
  3. JavaScript (ES6) code snippets : Pour bénéficier de raccourcis de code.

Pour installer ces extensions, allez dans l’onglet des extensions (icône en forme de carré dans la barre latérale), recherchez les extensions et cliquez sur « Installer ».

 

Configuration de votre environnement

 

Une fois VS Code prêt, il est temps de configurer votre environnement de développement. Créez un nouveau dossier sur votre ordinateur et ouvrez-le dans VS Code. Vous pouvez le faire en cliquant sur « File » > « Open Folder… » et en sélectionnant votre dossier.

 

 

Comment démarrer javascript votre premier script ?

 

 Il existe 2 façons différentes d’écrire du Javascript :

 
 

1. Création de votre premier fichier HTML avec script intégré

 

Dans votre nouveau dossier, créez un fichier nommé index.html. Contrairement à la méthode précédente où nous avons séparé le JavaScript dans un fichier distinct, nous allons cette fois intégrer le script directement dans le fichier HTML.

Voici un exemple de contenu pour index.html :

 

 <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premier Script JavaScript</title>
</head>
<body>
    <h1>Bonjour, JavaScript c'est Développeur Pro!</h1>
    <script>
        console.log('Hello, world!');
    </script>
</body>
</html>

 

Exécution de votre script

 

Installez d’abord le plugin Live Server dans Visual Studio Code. Puis pour voir votre script en action, ouvrez index.html dans votre navigateur préféré. Pour ce faire, cliquez avec le bouton droit de la souris sur le fichier index.html dans VS Code et sélectionnez « Open with Live Server ». Attention Si vous n’avez pas encore l’extension Live Server, installez-la depuis l’onglet des extensions.

 

Exploration de la console

 

Ouvrez les outils de développement de votre navigateur (généralement avec la touche F12 ou Ctrl+Shift+I) et allez dans l’onglet « Console ». Vous y verrez le message « Hello, world! » s’afficher, preuve que votre script fonctionne correctement.

 
 

2. Création de votre premier fichier JavaScript

 

C’est la méthode la plus utilisé avoir un fichier Javascript à part ou pour chacune de vos pages html ou bien des fonctionnalités spécifiques à plusieurs pages. Dans votre nouveau dossier, créez un fichier nommé index.html et un autre nommé script.js. Vous pouvez choisir d’autres noms correspondant à vos pages si vous avez plusieurs fichiers Html et Javascript. Votre fichier HTML servira de point de départ pour intégrer votre script JavaScript.

 

Voici un exemple de contenu pour index.html :

 

 

 <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premier Script JavaScript par Développeur Pro</title>
</head>
<body>
    <h1>Bonjour, JavaScript!</h1>
    <script src="script.js"></script>
</body>
</html>

 

Écrire votre premier script JavaScript

Maintenant, passons à la rédaction de votre script. Ouvrez script.js et ajoutez le code suivant :

 

 
 console.log('Dev pro!');
 
Ce script basique affiche « Dev pro! » dans la console de votre navigateur.
 

Lancement de votre script

 

Même principe que précédemment observer votre script en exécution, ouvrez le fichier index.html dans le navigateur que vous souhaitez. Pour ce faire, faites un clic droit sur index.html dans VS Code et sélectionnez « Open with Live Server ». N’oublié pas installé l’extension Live Server, vous pouvez la trouver et l’installer depuis l’onglet des extensions de visual studio code.

 

Vérification dans la console

 

Même procédure que pour la première méthode accédez aux outils de développement de votre navigateur avec l’onglet inspecter clic droit de la souris ou  (habituellement accessibles via la touche F12 ou Ctrl+Shift+I) et rendez-vous dans l’onglet « Console ». Vous y verrez le message « Dev Pro! » s’afficher, confirmant que votre script fonctionne correctement.

 

Aller plus loin

 

Ce premier script est une introduction simple à JavaScript. Avec VS Code, vous disposez d’un environnement robuste et flexible pour explorer les innombrables possibilités offertes par ce langage Javascript et de nombreux plugins et extensions adéquates dans visual studio code. Vous pouvez maintenant passer à l’étape suivante de votre apprentissage.

 

Conclusion

Visual Studio Code et JavaScript forment un duo idéal pour les développeurs débutants et expérimentés. En suivant ce guide, vous avez posé les bases solides de votre aventure dans le monde du développement web. Continuez à explorer, à apprendre et à expérimenter. Les possibilités sont infinies, et chaque ligne de code vous rapproche un peu plus de la maîtrise.

Bonne programmation !

 

Rejoignez notre Newsletter et Restez Informé !

Vous souhaitez rester à jour avec les dernières tendances et actualités du monde du développement et le métier de développeur. Comment devenir développeur pro ? Rejoignez notre newsletter pour obtenir un accès exclusif à du contenu premium, des astuces de codage, des mises à jour sur les nouvelles fonctionnalités et bien plus encore !

Avantages de l’Inscription

  • Restez Informé: Recevez des articles informatifs sur les dernières avancées et les meilleures pratiques de codage et les softkills.
  • Promos Exclusives: Accédez à des formations détaillés et à des exemples de code pour améliorer vos compétences en programmation.
  • Aperçus des Nouveautés: Soyez parmi les premiers à découvrir les nouvelles fonctionnalités et les frameworks émergents dans l’écosystème du développement FrontEnd et Backend.
  • Communauté Engagée: Rejoignez une communauté passionnée de développeurs et partagez vos idées, questions et expériences.

Comment S’Inscrire

C’est simple et rapide ! Remplissez le formulaire d’inscription avec votre adresse e-mail et cliquez sur « S’Inscrire ». Vous recevrez régulièrement notre newsletter dans votre boîte de réception.


L’inscription à notre newsletter est un moyen idéal de rester informé et de progresser dans le domaine de la programmation et du développement pour devenir un développeur professionnel ou une développeuse pro.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *