Merge branch 'next_version' of...

Merge branch 'next_version' of gitlab.veremes.net:Documentation/doc_interne_developpement into next_version

Merge branch 'next_version' of...
28f83fee · Anthony Borghi · b6faf372 · 19292561 · 28f83fee · 28f83fee
Commit 28f83fee authored 2 years ago by Anthony Borghi
--- a/source/vscode/index.rst
+++ b/source/vscode/index.rst
@@ -17,3 +17,4 @@ Visual Studio Code est l'IDE utilisé par les développeurs de Veremes pour trav
   presentation.md
   extensions_obligatoires.md
   extensions_utiles.md
+   raccourcis_astuces.md
\ No newline at end of file
--- a/source/vscode/presentation.md
+++ b/source/vscode/presentation.md
@@ -3,50 +3,6 @@
 [Visual Studio Code ou VS Code](https://code.visualstudio.com/) est un IDE édité par Microsoft, s'appuyant sur la librairie [Monaco](https://microsoft.github.io/monaco-editor/) également utilisée dans Vitis. \
 C'est une application développée avec électron, d'ailleurs une [version Web](https://vscode.dev/) existe aussi qui peut parfois dépanner sur les serveurs Windows.

-## Raccourcis et astuces
-
-Certains raccourcis pourront être erronés, une partie de l'équipe utilisant une extension pour reprendre les raccourcis de l'IDE Atom anciennement utilisé.
-
-### Créer un snippet personnalisé
-
-Un snippet est un raccourcis qui va vous permettre de pré-générer du code.
-
-Il est possible d'en partager dans le dépot ou de les définir localement pour votre vscode.
-
-Pour définir un snippet, il faut aller dans `File > Preferences > Configure User Snippets`, il faudra saisir un nom pour le fichier générique la première fois.
-
-Ci-dessous un exemple de syntaxe pour définir un snippet : 
-```json
-{
-	"ajax promise" : {
-		"scope": "javascript,typescript",
-		"prefix": "v-ajaxp",
-		"body": [
-			"this.vitisRequest.ajaxRequestPromise({",
-			"\tmethod: '',",
-			"\turl: env.properties.app_api_url + '/',",
-			"}).then((resp) => {});"]
-	}
-}
-```
-
-La clé sert de nom pour le snippet, le prefixe est ce qu'il faudra saisir pour déclencher la génération de code.
-
-Avec cet exemple si je tape `v-ajaxp` dans un fichier js ou ts je récupérerai le code suivant : 
-```js
-this.vitisRequest.ajaxRequestPromise({
-  method: '',
-  url: env.properties.app_api_url + '/',
-}).then((resp) => {});
-```
-
-Je n'ai plus qu'à le personnaliser, remplacer le this par services dans certains cas, ...
-
-Il y a plein d'utilisations possibles, génération de code récurent pour logguer, débugguer par exemple.
-
-pour avoir plus d'information sur le sujet la documentation est disponible via [ce lien](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets).
-
-
 ## Configuration

 Pour accéder au fichier de configuration JSON de vscode Il faut passer par la palette de commande `CTRL+MAJ+P` et choisir `Preferences : Open User Settings (JSON)`.

--- a/source/vscode/raccourcis_astuces.md
+++ b/source/vscode/raccourcis_astuces.md
+<style>
+    img {
+        margin: 0px !important;
+    }
+</style>
+
+# Raccourcis & astuces
+
+## Snippets
+
+Les snippets permettent de générer du code en tapant que quelques caractères.
+
+Par exemple sur un fichier JS lorsque j'écris `log` puis j’appuie sur la touche `tab` j'obtiens le code ci-après avec le curseur au bon endroit.
+```js
+console.log('');
+```
+
+Pour définir un snippet, il faut aller dans `File > Preferences > Configure User Snippets`.
+La première fois il faudra cliquer sur `New global snippets file` et saisir un nom.
+Les autres fois il suffira simplement d'éditer le fichier.
+
+Plus d'informations sur le sujet sont disponibles sur la documentation via [ce lien](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets).
+
+#### Exemple : logs
+
+Les snippets qui sont pour moi les plus utilisés sont ceux des logs sur les différents langages.
+
+Personnellement j'utilise `log` pour écrire un message et `logv` pour écrire la valeur d'une variable.
+
+```json
+{
+    "Print to console JS": {
+        "scope": "javascript,typescript",
+        "prefix": "log",
+        "body": [
+            "console.log('$1');"
+        ],
+        "description": "Log output to console"
+    },
+    "Print to console python": {
+        "scope": "python",
+        "prefix": "log",
+        "body": [
+            "print(str('$1'))"
+        ],
+        "description": "Log output to console"
+    },
+    "Print to console php": {
+        "scope": "php",
+        "prefix": "log",
+        "body": [
+            "error_log('$1');"
+        ],
+        "description": "Log output to console"
+    },
+    "Print variable to console JS": {
+        "scope": "javascript,typescript",
+        "prefix": "logv",
+        "body": [
+            "console.log('$1', $1);"
+        ],
+        "description": "Log output value to console"
+    },
+    "Print to variable console python": {
+        "scope": "python",
+        "prefix": "logv",
+        "body": [
+            "print('$1 : ' + str($1))"
+        ],
+        "description": "Log output value to console"
+    },
+    "Print to variable console php": {
+        "scope": "php",
+        "prefix": "logv",
+        "body": [
+            "error_log('$1 :' . print_r($1, true));"
+        ],
+        "description": "Log output value to console"
+    }
+}
+```
+
+#### Exemple : ajaxRequest
+
+Insère les fonctions permettant de faire des requêtes http via ajaxRequestPromise en tapant `ajaxget`, `ajaxput`, `ajaxpost`
+
+```json
+{
+    "ajax get": {
+		"scope": "javascript,typescript",
+		"prefix": "ajaxget",
+		"body": [
+			"this.vitisRequest.ajaxRequestPromise({",
+			"  method: 'GET',",
+			"  url: environment.properties.app_api_url + '/$1',",
+			"  params: {}",
+			"}).then((resp: any) => {",
+			"  ",
+			"});"
+		],
+		"description": "AjaxRequest for GET"
+	},
+	"ajax post": {
+		"scope": "javascript,typescript",
+		"prefix": "ajaxpost",
+		"body": [
+			"this.vitisRequest.ajaxRequestPromise({",
+			"  method: 'POST',",
+			"  url: environment.properties.app_api_url + '/$1',",
+			"  data: {}",
+			"}).then((resp: any) => {",
+			"  ",
+			"});"
+		],
+		"description": "AjaxRequest for POST"
+	},
+	"ajax put": {
+		"scope": "javascript,typescript",
+		"prefix": "ajaxput",
+		"body": [
+			"this.vitisRequest.ajaxRequestPromise({",
+			"  method: 'PUT',",
+			"  url: environment.properties.app_api_url + '/$1',",
+			"  data: {}",
+			"}).then((resp: any) => {",
+			"  ",
+			"});"
+		],
+		"description": "AjaxRequest for PUT"
+	}
+}
+```
+
+#### Exemple : Promesse JS
+
+En JavaScript / TypeScript qui est un langage asynchrone par défaut il est souvent nécessaire d'utiliser les promesses.
+
+Pour cela j'ai un snippet `promise` qui en génère une.
+
+```json
+{
+    "Promise": {
+		"scope": "javascript,typescript",
+		"prefix": "promise",
+		"body": [
+			"return new Promise((resolve, reject) => {",
+			"  $1",
+			"});"
+		],
+		"description": "Log output to console"
+	},
+}
+```
+
+## Raccourcis clavier
+
+Au moment où j'écris ce document j'utilise l'extension **Atom keymap**, il se peut donc que les raccourcis cités ne fonctionnent pas s'il n'est pas installé.
+
+#### Fonctions de recherche
+
+* `CTRL + F` : permet de faire une recherche dans un fichier
+* `CTRL + MAJ + F` : permet de faire une recherche dans un dossier
+* `CTRL + H` : permet de faire un remplacement dans un fichier
+* `CTRL + MAJ + H` : permet de faire un remplacement dans un dossier
+
+#### Déplacement du curseur par mot
+
+* `CTRL + flèche gauche/droite` : déplace la curseur mot par mot.
+* `CTRL + MAJ + flèche gauche/droite` : déplace la sélection mot par mot.
+
+#### Commandes VSCode
+
+* `CTRL + MAJ + P` : affiche une prompt sur lequel je peux écrire librement et qui va m'ouvrir les différents menus de VSCode comme si je passais par fichier etc..
+* `CTRL + ²` : affiche / cache le terminal (non prévu par défaut, il faudra le créer). Équivalent à `CTRL + P + create new terminal`.
+
+#### Fold
+
+Ces raccourcis pemettent de replier le conde en fonction de l'indentation, pour se faire j'autilise `CTRL + K + [numéro]` où `[numéro]` est l'index d'indentation.
+
+Prenons exemple sur ce code
+
+```html
+<div>
+    <ul>
+        <li>
+            <a>
+                mon contenu 1
+            </a>
+        </li>
+    </ul>
+    <ul>
+        <li>
+            <a>
+                mon contenu 2
+            </a>
+        </li>
+    </ul>
+</div>
+```
+
+Si je fais `CTRL + K + 2` j'obtiens quelque chose comme ça
+
+```html
+<div>
+    <ul>
+    </ul>
+    <ul>
+    </ul>
+</div>
+```
+
+Si je fais `CTRL + K + 3` j'obtiens quelque chose comme ça
+
+```html
+<div>
+    <ul>
+        <li>
+        </li>
+    </ul>
+    <ul>
+        <li>
+        </li>
+    </ul>
+</div>
+```
+
+#### Multi curseur
+
+C'est quelque chose que j'utilise beaucoup et qui me fait parfois gagner beaucoup de temps.
+
+* `MAJ + ALT + Flèche haut/bas` : permet de placer plusieurs curseurs à la verticale.
+
+C'est très utile mais parfois à cause de l'indentation ça peut être problématique.
+
+* `CTRL + click` : me permet alors de les placer manuellement, on peut aussi double clic pour sélectionner un mot en entier.
+* `CTRL + D` : c'est un peu comme si on mixait le précédent avec `CTRL + F`, après avoir sélectionné un mot ça permet de placer un multi-curseur sur le prochain mot identique.