Introduction

Lab starter

Ce lab starter initie les développeurs web en configurant Windows, en installant Visual Studio Code et des extensions, et en utilisant Emmet pour améliorer l’efficacité du développement.

Table des matières

Configuration windows

Configuration windows

Pour configurer un poste Windows pour un développeur, vous pouvez suivre ces étapes suivants

Affichage des fichiers cachés :

Affichage des fichiers cachés

• Ouvrez l’explorateur de fichiers.
• Allez dans l’onglet “Affichage” dans la barre de menu.
• Cochez la case “éléments masqués” dans le groupe “Options”.
• Les fichiers cachés seront maintenant visibles.

Affichage des extensions des fichiers :

Affichage des extensions des fichiers

• Dans l’explorateur de fichiers, allez dans l’onglet “Affichage”.
• Cochez la case “Extensions de noms de fichiers” dans le groupe “Options”.
• Les extensions de fichiers seront maintenant visibles.

Lancement de PowerShell dans le dossier ouvert :

Lancement de PowerShell dans le dossier ouvert

• Ouvrez l’explorateur de fichiers.
• Allez dans le dossier où vous souhaitez ouvrir PowerShell.
• Maintenez la touche “Maj” enfoncée, faites un clic droit sur un espace vide du dossier.
• Sélectionnez “Ouvrir une fenêtre PowerShell ici” dans le menu contextuel.
• PowerShell sera lancé dans le dossier actuel.

Création de snippets

Création de snippets

La création de snippets, ou extraits de code réutilisables, est une pratique courante pour améliorer l’efficacité et la productivité lors du développement web. Les snippets peuvent être utilisés pour des tâches récurrentes, des fonctions courantes ou des modèles de code complexes.

Les etapes de Création de snippets

Snippets en vscode

Dans Visual Studio Code, vous pouvez créer un nouveau snippet en accédant à File > Preferences > User Snippets > New Global Snippets file. Ensuite, vous pouvez ajouter :

{
    "Create HTML Link": {
        "prefix": "link",
        "body": [
            "<a href=\"$1\">$2</a>"
        ],
        "description": "Creates an HTML link with href attribute"
    }
}

Références

• https://blog.stephane-robert.info/post/ansible-create-snippet-vscode/
• https://code.visualstudio.com/docs/editor/userdefinedsnippets

Emmet vscode

Emmet vscode

Emmet propose une large gamme d’abréviations et de commandes pour vous aider à générer rapidement du code HTML et CSS dans Visual Studio Code. Voici une liste de quelques abréviations et commandes Emmet couramment utilisées

HTML Abbreviations:

HTML Abbreviations

• ! : Génère un modèle HTML de base.
• html:5 : génère un doctype HTML5 avec une structure de base.
• div : génère un élément div.
• p : génère un élément de paragraphe p.
• a : génère un élément d’ancrage a.
• img : génère un élément d’image img.
• ul>li*3 : génère une liste non ordonnée avec trois éléments de liste.
• table>tr>td*3 : génère un tableau avec deux lignes et trois colonnes.
• form>input:text+input:password+input:submit : génère un formulaire avec saisie de texte, saisie de mot de passe et bouton de soumission.

CSS Abbreviations:

CSS Abbreviations

• m10 : ajoute une marge de 10 px.
• p20 : ajoute un remplissage de 20 px.
• bgc : définit la couleur d’arrière-plan.
• w100 : définit la largeur sur 100 px.
• h50 : définit la hauteur sur 50 px.
• d:f : définit l’affichage sur flex.
• jc:c : définit le contenu justifié au centre.
• ai:c : définit les éléments d’alignement au centre.
• br : Ajoute un rayon de bordure.
• fsz : définit la taille de la police.
• ff : définit la famille de polices.

Références

• https://code.visualstudio.com/docs/editor/emmet
• https://docs.emmet.io/cheat-sheet/

Installation extension

Extension Json

Un outil informatique polyvalent, le Visual Studio Code de Microsoft, offre un support intégré pour la manipulation des fichiers JSON, incluant la coloration syntaxique, le formatage et la validation, facilitant ainsi le travail avec ce format de données populaire.

Références

• https://marketplace.visualstudio.com/items?itemName=ZainChen.json
• https://github.com/microsoft/vscode-extension-samples

Installation en vscode

Installation extensions en vscode

Installation des extensions en VS code

Markdown All in One

Markdown All in One

Tout ce dont vous avez besoin pour Markdown (raccourcis clavier, table des matières, aperçu automatique et plus encore).

Installation

• id : yzhang.markdown-all-in-one

Références

• https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
• https://markdown-all-in-one.github.io/docs/guide/#features

Todo Tree

Todo Tree

Extension todo tree recherche rapidement (à l’aide de ripgrep) dans votre espace de travail des balises de commentaires telles que TODO et FIXME, et les affiche dans une arborescence dans la barre d’activité. La vue peut être glissée hors de la barre d’activité vers le volet de l’explorateur (ou partout où vous préférez qu’elle soit).

Installation

• id : Gruntfuggly.todo-tree

Références

• https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
• https://dev.to/equiman/vscode-extension-todo-tree-1n02

Conclusion

Conclusion

En conclusion, ce guide détaille les étapes pour configurer un environnement de développement dans Visual Studio Code, améliorant ainsi la productivité et la personnalisation des tâches de développement. En continuant d’explorer les fonctionnalités de VS Code et en restant à jour avec les dernières tendances, les développeurs peuvent optimiser leur flux de travail et rester compétitifs sur le marché.