Créer une extension VsCode 
Tags: french, javascript, vscode, extension
Published: 2021-07-10 06:19:49

**Etes vous déjà posé la question de savoir comment les extensions VsCode étaient créées ?**

Au travail l'autre jour avec les autres devs on se demandait "tiens comment c'est fait enfaite ?" Du coup direction la Doc de VsCode et bim voila un tuto pour faire sa première extension. Ni une ni deux en rentrant a la maison dans le bus, j'ai fait ma première extension.
![first Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqu5rk2tryxyw40fu8pz.png)

- Vérifier que Node est installé
- Git ( optionnel )  

**On commence donc par générer le projet :**

Dans Vscode on ouvre un terminal ( on remarque que je suis dans le dossier **chuck** vous allez vite comprendre 😜)
![Install library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naapu77y6qgqvzutq5fe.png)

Puis on lance la première ligne de commande pour installer les 2 librairies "yo" et "generator-code".
`npm install -g yo generator-code`

Une fois terminé on lance la commande suivante pour paramétrer le projet.
`yo code`
![Form yo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jdrlemz39mq8yhk4m94.png)

Il va falloir répondre à deux trois questions. Comme le langage utilisé, le nom de l'extension, description etc...

![Form yo 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdoga6g2rn1tk31ya2z7.png)

Voila le projet est paramétré 💪, je ne vais pas passer en revue tous les fichiers, celui qui nous intéresse est **extension.js**

![extension.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ioe6iqki02z90tu3axq.png)

On remarque que la fonction **Activate** a un commentaire qui dit que celle-ci s'exécute seulement une fois au moment du lancement de l'extension ( 🤔 on dirait un useEffect de React/ReactNative non ? )

#####Et si on appelait une Api qui nous retournerai une blague de Chuck Norris tiens ?######

- [API de Chuck](https://api.chucknorris.io)
- Besoin d'Axios/fetch pour la requête 

J'installe Axios ( j'aime bien axios 😁 )
`npm install axios`

On l'importe en haut de projet, puis on modifie notre fonction Anonyme pour que celle-ci devienne Async ( Ligne 20 )
![function activate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li7eeny2mvkk6wenf9tp.png)

- Ligne 21 : On fait la requête vers l'API.
- Ligne 24 : Le commentaire nous dit qu'à chaque fois que l'on appellera l'extension, le code sera exécuté, en gros un nouvel appel a l'API et un affichage. 
- Ligne 27 : On affiche le résultat de la requête.

**On l'affiche ?? Mais comment on l'appel du coup ?** 

On voit en Ligne 15 ceci `'chuck-s-joke-generator.CalledChuck'`

Le `CalledChuck` c'est la commande qui permettra d'appeler l'API. Pour cela il faut modifier un petit peu le fichier **packages.json**
![Command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqjkz05j0gm46xbeannn.png)

- Ligne 13 et 19, on remplace le `helloworld` par `CalledChuck`
- Ligne 20, on met ce que l'on veut, mais ceci sera affiche dans la barre de recherche VsCode.
![Command Changed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tte127zt0fkeg69b66mr.png)

**On essaye pour voir ?** 

On retourne sur notre `extension.js` et on appuie sur F5 ceci nous ouvre une nouvelle fenêtre VsCode. On appuie sur les touches `control + shift + p`(Windows) pour ouvrir la barre de recherche et on cherche `Called Chuck`
![Called Chuck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bsg5wjwtq78u1mpmm52.png)

On sélectionne notre bon vieux Chuck 🤠 et Boumm sa blague apparait en bas à droite. 😁
![Response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qegje92iwcjrrq4p778k.png)

**Et si on la publiait ?**

On commence donc par installer une autre librairie 
`npm install -g vsce`

Il nous faut un compte Azure devOps ( Gratuit ), il vous faudra créer votre organisation si vous n'en avez pas ( il faut se laisser guider ) Et ensuite un Token.

Voici le lien qui décrit comment faire [VsCode Documentation](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)

Ensuite nous allons créer un publisher, ceci représente l'identité de la personne qui publie une extension sur le MarketPlace, toutes extensions possède un Publisher.
![Publisher](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wieujf17zbm6an15jx7t.png)

On rentre ensuite notre login and token dans le terminal :
![Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wciyxaoj08dsutvt9twc.png)

Et pour finir, on va publier l'extension avec la commande suivante :
On ajoute dans `package.js` la ligne suivante `"publisher": "VotrePublisherId",` et ensuite on lance `vsce publish` dans le terminal.
![Publish](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08gr08rcjasa6bkkhx9u.png)

Apres la publication, ceci prend quelques minutes pour valider, voila ce que l'on a en attendant.
![Waiting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fisksv96m0k8iuhy9lf.png)
Et voila, c'est validé !!! 😁😁😁
![Voilaaa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ivbbaug203l8dh3il2h.png)

Si vous cherchez l'application dans VsCode, maintenant on la trouve. 🤣🤣 
![Search it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5xkkyccsng2jhjr4ubj.png)

N'hésitez pas à la télécharger, la noter et surtout à la partager haha 

Et si on en faisait plus utile ? Si des personnes sont intéressées. Contactez moi.

J'espère que vous avez apprécié. A la prochaine.