Centre des communautés
Centre des communautés

Bonjour à toutes et à tous,

Aujourd'hui je vous propose un petit tutoriel pour utiliser Visual Studio Code (VSC) dans l'objectif de modifier des articles comme un vrai informaticien !

Pour écrire ce billet, j'ai par ailleurs utilisé Visual Studio Code comme indiqué sur le résumé de modification.

Pourquoi utiliser VSC ?[]

Avantages[]

Une première chose que nous pouvons nous demander est "mais pourquoi utiliser VSC et non l'éditeur intégré ?". Personnellement, j'avais l'outil sur mes machines pour mes cours d'informatiques puis je l'ai gardé comme éditeur .txt par défaut. Donc si comme moi, vous développez des scripts ou du code, ça peut devenir un EDI par défaut.

Mais dans le cadre de Fandom, plusieurs missions peuvent être réalisées avec ce dernier :

  • Pour la répétition des mots : En tapant un mot, l'EDI propose automatiquement l'autocomplétion s'il retrouve le même début (par exemple, taper "Arthur Morgan" et la prochaine fois que "A" ou "M" vont être entrés, "Arthur" ou "Morgané" seront proposés). Je l'utilise pour faire les génériques des jeux Rockstar Games qui ont donc un bon nombre de développeurs en commun, cela permet de gagner du temps et de déceler des fautes de frappe dans les autres génériques déjà écrits.
  • En cas de refonte de page, il peut être agréable de ne publier la page qu'une fois la refonte faite entièrement or parfois, il n'est pas possible de le faire en une fois.
  • Il est également possible d'éviter les pertes de modification surtout pour les utilisateurs avec un ancien ordinateur susceptible de planter ou lorsque le réseau internet est instable.
  • Éditer en hors ligne : Il suffit d'ouvrir les pages à modifier préalablement dans VSC et lorsque vous réouvrirez VSC, elles seront toujours prêtes à être éditées. A savoir que VSC sauvegarde toutes éditions en arrière-plan.
  • Étant donné que son objectif premier est d'être un EDI, les pages JavaScript et Cascading Style Sheets seront plus agréables à éditer dans ce logiciel. Dans la même idée, éditer JavaScript Object Notation (TemplateData, pages JSON...) sera plus agréable (le JSON des TemplateData n'est pas coloré via l'éditeur mais l'est via VSC)
  • Travailler hors ligne. Lors d'un déplacement sans possibilité de se connecter à un Wi-Fi, il est pratique de préalablement récupérer plusieurs pages pour pouvoir les éditer.
  • Combiner avec d'autres extensions (<Auto Close Tag> par exemple), la productivité peut être accru.

Inconvénients[]

Il y a cependant quelques inconvénients :

  • Pas de suggestion de liens, modèles, fichiers...
  • La prévisualisation n'est pas aussi belle que sur Fandom (surtout si tous les modèles du wiki sont gérés via CSS)

Prérequis[]

Visual Studio Code[]

Pour commencer, le logiciel lui-même va être nécessaire. Il faut le télécharger sur le site officiel. Installez-le comme vous le désirez.

Extension[]

Une fois installé, l'extension Wikitext va être requise. Rendez-vous sur la page de l'extension sur le Marketplace de Visual Studio Code et cliquez sur "Install". Cela aura pour effet d'ouvrir la page de l'extension sur Visual Studio Code où vous n'aurez qu'à cliquer sur Install (encore).

Personnellement, je recommande également l'extension French Language Pack for Visual Studio Code permettant d'avoir Visual Studio Code en français, mais cela n'aura aucune incidence sur la suite, si vous ne l'avez pas.

Mot de passe[]

Tout comme pour utiliser un robot, un mot de passe robot sera nécessaire afin de publier les modifications alors, créons en un !

Depuis n'importe quel wiki :

  • Aller sur Special:BotPasswords
  • Entrer le nom du bot (ça peut être n'importe quoi)
  • Lui donner les autorisations voulues
  • Copier les informations

Bien que le mot de passe robot soit obligatoire, il n'est pas utile d'avoir l'étiquette robot, la modification ne sera pas considérée comme faite par un robot. De plus, à l'inverse de l'utilisation d'un robot, le mot de passe robot peut être fait avec votre compte principal (dans mon cas Thegamer1604) sans avoir besoin d'un second compte.

Configurations[]

Visual Studio Code[]

Commençons par configurer Visual Studio Code.

Rendez-vous sur les paramètres de l'extension :

  • Aller sur la page de l'extension
  • Cliquer sur la roue cranter à droite de "Désactiver"
  • Choisir "Paramètres d'extension" (dernière option)

Plusieurs éléments vont être à modifier ici :

  1. Dans Wikitext: Api Path, il faut écrire "/fr/api.php" (sans le /fr/ pour un wiki anglophone)
  2. Dans Wikitext: Article Path, il faut écrire "/fr/wiki/" (idem, sans le /fr/ pour un wiki anglophone)
  3. Dans Wikitext: Host, il faut écrire l'url du wiki. Par exemple "reddead.fandom.com"
  4. Dans Wikitext: Password, il faut écrire le mot de passe du compte obtenu dans la section précédente. Pour moi : Thegamer1604@VSC
  5. Enfin, dans Wikitext: User Name, il faut écrire le nom du compte créé dans la section précédente. Pour moi : kh0cicdneh107ltn0mste4no2d80102o

A noter que changer le wiki peut parfois requérir un redémarrage de Visual Studio Code.

Vous pouvez également activer le CSS (Wikitext: Get CSS) et le JavaScript (Wikitext: Enable JavaScript) afin d'avoir des rendus plus proches de la page. Sans CSS, l'Infobox n'est pas stylisée (ceci n'est qu'un exemple parmi d'autres).

Fandom[]

Pour Fandom, deux options vous sont possibles.

Un simple lien vers Visual Studio Code[]

Si vous désirez simplement pouvoir ouvrir un article dans Visual Studio Code sans chercher plus loin, il vous suffit simplement d'ajouter "mw.loader.load("https://github.com/Frederisk/Wikitext-Extension-Gadget/releases/latest/download/index-vscode.js");" dans votre Global.js ou Common.js (pour un wiki seulement) ce qui ajoutera un lien "Ouvrir dans VSCode" à la liste déroulante auprès du bouton modifier.

Script Wiki Dev[]

A contrario, si vous voulez quelque chose de plus visuel et rapidement cliquable, il existe un script sur le wiki Dev : OpenWithVSC.

Modifier une page[]

Maintenant que tout est en place, vous pouvez commencer à éditer des pages ! Cependant, une fois la modification faite, il faut la publier. Pour cela, vous devez appuyer sur CTRL+Shift+P ou F1 et taper "Post your edit to the website" et appuyer sur entrer.

Pour gagner du temps, vous pouvez configurer une touche par défaut pour éviter l'étape précédente :

  1. CTRL+Shift+P ou F1 et taper "Post your edit to the website"
  2. Cliquer sur la roue cranter
  3. Double clic sur la commande et choisir la touche raccourci

Désormais, la simple pression sur cette touche exécutera la commande.

L'enregistrement de la modification n'est pas finie, il faut désormais entrer le nom de la page (qu'elle existe ou non), appuyer sur entrer et remplir le résumé de modification (facultatif, mais rappelons qu'un résumé de modification améliore l'administration d'un wiki) et alors vous aurez publié votre modification.

En espérant vous avoir aidé (à devenir un vrai geek), n'hésitez pas à me dire s'il y a un problème (incompréhension, erreur...) dans les commentaires !

C'était Thegamer1604 (Discussion)