From 6ac102afb9d2e0d946e8f9bf66b0888a4783d40e Mon Sep 17 00:00:00 2001
From: Thomas Fritsch <tf@kumquats.fr>
Date: Sun, 9 Feb 2020 23:42:31 +0100
Subject: [PATCH] ajout extensions vscode
---
A-preparatifs.md | 37 +++++++++++++++++++++++++++++++++++++
1 file changed, 37 insertions(+)
diff --git a/A-preparatifs.md b/A-preparatifs.md
index 6e23582..8c070c6 100644
--- a/A-preparatifs.md
+++ b/A-preparatifs.md
@@ -2,6 +2,7 @@
## Sommaire <!-- omit in toc -->
- [A.1. Configuration du projet](#a1-configuration-du-projet)
+- [A.2. Extensions de VSCodium](#a2-extensions-de-vscodium)
- [A.2. Lancement de l'application](#a2-lancement-de-lapplication)
- [A.3. Le fichier `package.json`](#a3-le-fichier-packagejson)
- [A.4. Créer un script de build personnalisé](#a4-créer-un-script-de-build-personnalisé)
@@ -23,6 +24,41 @@ codium ~/ws-js/tp2
```
*(en cas d'échec, vérifiez que vous avez bien suivi les instructions du TP1 sur [l'installation de VSCodium](https://gitlab.univ-lille.fr/js/tp1/blob/master/A-preparatifs.md#a3-installation-ide))*
+## A.2. Extensions de VSCodium
+Avant de commencer à coder, on va installer plusieurs extensions de VSCodium qui vont nous être utiles par la suite :
+
+1. Ouvrez le panneau des extensions à l'aide du raccourci <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>X</kbd>
+2. Recherchez et installez les extensions suivantes :
+ - **Prettier - Code formatter** : un formateur de code automatique : (presque) plus possible d'oublier un point-virgule, ou de mal indenter son code !
+ - **Visual Studio IntelliCode** : améliore les suggestions lors de la frappe
+ - "es6-string-html" : rend possible la coloration syntaxique du code html contenu dans des template strings
+
+3. Pour configurer Prettier, ajoutez un fichier `.vscode/settings.json` dans le tp avec le contenu suivant :
+
+ ```json
+ {
+ "[javascript]": {
+ "editor.formatOnSave": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
+ }
+ ```
+ Créez ensuite un fichier `.prettierrc` à la racine du TP :
+ ```json
+ {
+ "singleQuote": true,
+ "trailingComma": "es5",
+ "endOfLine": "lf",
+ "useTabs": true
+ }
+ ```
+ Enfin, installez prettier avec npm :
+ ```bash
+ npm install --save-dev prettier
+ ```
+ Avec cette configuration, vos fichiers JS seront automatiquement formatés à chaque sauvegarde !<br>Pour voir la liste des configurations possibles, rendez vous sur https://prettier.io/docs/en/configuration.html
+
+
## A.2. Lancement de l'application
1. Si vous êtes repartis de la solution de ce repo (cad. que vous ne repartez pas de vos fichiers du TP précédent), une fois le clone terminé, il faut **installer les paquets npm nécessaires au bon fonctionnement du projet** (notamment le compilateur [Babel](https://babeljs.io)).
@@ -86,6 +122,7 @@ Ce fichier sert à plusieurs choses et notamment :
- @babel/cli
- @babel/core
- @babel/preset-env
+ - prettier
À chaque fois qu'on installe un paquet npm, le paquet en question se télécharge dans le dossier `node_modules`, puis le nom du paquet ainsi que sa version sont automatiquement ajoutés dans le fichier `package.json`. <br>Le dossier `node_modules` n'est **jamais** versionné (c'est en général un dossier relativement volumineux) mais le `package.json` lui l'est car il servira de "recette" pour indiquer aux développeurs qui rejoindraient le projet quels sont les paquets nécessaires.
--
GitLab