Ecrire ses articles en BBCode (sur phpBoost par exemple) à l'aide de VSCode
Aujourd'hui un article sur phpBoost : comment écrire ses articles dans phpBoost avec Visual Studio Code ! Ce n'est plus vraiment utile pour moi puisque je n'utilise plus phpBoost mais j'ai gardé cet article si cela peut servir à quelqu'un d'autre 😅. Vous gagnerez beaucoup de temps et pourrez en plus écrire vos articles sauvegardés dans un coin pour publier plus tard par exemple.
Note
Je vais supposer que vous utilisez Visual Studio Code et que vous l'avez déjà installé...
Installation de l'extension
Une extension existe dans VSCode pour le BBCOde, je trouve qu'elle n'apporte pas grand chose mais elle vous ajoutera le type de fichier BBCode, c'est important pour la suite. Cherchez BBCode dans les extensions et vous la trouverez. Sinon, voici le lien : Extension BBCode
Ajout du snippet
Méthode 1 : snippet dédié aux fichiers .bbcode
Créez un nouveau fichier où vous le souhaitez et donnez lui l'extension .bbcode Puis en bas à gauche de la fenêtre de VSCode, cliquez sur la roue dentée puis sur "Extraits de code de l'utilisateur" (User Snippets si votre interface est en anglais).
Cliquez ensuite sur bbcode. Un nouveau fichier bbcode.json doit normalement se créer, vous avez un exemple de son utilisation en tête du fichier. Collez y le code suivant avant la dernière accolade fermée, je vous explique juste après :
"Code bash": {
"prefix": "bash",
"body": [
"[code=bash]",
"$1",
"[/code]",
"$0"
],
"description": "Insertion de code bash"
}
"Paragraphe centré": {
"prefix": "center",
"body": [
"[align=center]",
"$1",
"[/align]",
"$0"
],
"description": "Insertion d'un paragraphe centré"
}
"Image": {
"prefix": "img",
"body": [
"[figure=${1:Légende affichée}][img alt=\"${2:Texte alternatif}\" style=\"width: ${3:500}px\"]/upload/$4[/img][/figure]"
"$0"
],
"description": "Insertion d'une image"
}
"Insertion d'une information": {
"prefix": "info",
"body": [
"[style=notice]",
"$1",
"[/style]",
"$0"
],
"description": "Insertion d'une information"
}
"Insertion d'une question": {
"prefix": "q?",
"body": [
"[style=question]",
"$1",
"[/style]",
"$0"
],
"description": "Insertion d'une question"
}
"Insertion d'un succès": {
"prefix": "succes",
"body": [
"[style=success]",
"$1",
"[/style]",
"$0"
],
"description": "Insertion d'un succès"
}
"Insertion d'un avertissement": {
"prefix": "warn",
"body": [
"[style=warning]",
"$1",
"[/style]",
"$0"
],
"description": "Insertion d'un avertissement"
}
"Insertion d'une erreur": {
"prefix": "err",
"body": [
"[style=error]",
"$1",
"[/style]",
"$0"
],
"description": "Insertion d'une erreur"
}
"Insertion d'un lien web": {
"prefix": "url",
"body": [
"[url=https://$1]${2:Texte à afficher}[/url]",
"$0"
]
}
"Liste à 2 items": {
"prefix": "ls2",
"body": [
"[list]",
"[*]$1",
"[*]$2",
"[/list]",
"$0"
],
"description": "Insertion d'une liste à 2 items"
}
"Liste à 3 items": {
"prefix": "ls3",
"body": [
"[list]",
"[*]$1",
"[*]$2",
"[*]$3",
"[/list]",
"$0"
],
"description": "Insertion d'une liste à 3 items"
}
"Liste à 4 items": {
"prefix": "ls4",
"body": [
"[list]",
"[*]$1",
"[*]$2",
"[*]$3",
"[*]$4",
"[/list]",
"$0"
],
"description": "Insertion d'une liste à 4 items"
}
"Liste à 5 items": {
"prefix": "ls5",
"body": [
"[list]",
"[*]$1",
"[*]$2",
"[*]$3",
"[*]$4",
"[*]$5",
"[/list]",
"$0"
],
"description": "Insertion d'une liste à 5 items"
}
"Liste ordonnée à 2 items": {
"prefix": "lso2",
"body": [
"[list=ordered]",
"[*]$1",
"[*]$2",
"[/list]",
"$0"
],
"description": "Insertion d'une liste ordonnée à 2 items"
}
"Liste ordonnée à 3 items": {
"prefix": "lso3",
"body": [
"[list=ordered]",
"[*]$1",
"[*]$2",
"[*]$3",
"[/list]",
"$0"
],
"description": "Insertion d'une liste ordonnée à 3 items"
}
"Liste ordonnée à 4 items": {
"prefix": "lso4",
"body": [
"[list=ordered]",
"[*]$1",
"[*]$2",
"[*]$3",
"[*]$4",
"[/list]",
"$0"
],
"description": "Insertion d'une liste ordonnée à 4 items"
}
"Liste ordonnée à 5 items": {
"prefix": "lso5",
"body": [
"[list=ordered]",
"[*]$1",
"[*]$2",
"[*]$3",
"[*]$4",
"[*]$5",
"[/list]",
"$0"
],
"description": "Insertion d'une ordonnée liste à 5 items"
}
"Tableau 2x2": {
"prefix": "tab",
"body": [
"[table]",
"\t[row]",
"\t\t[col]$1[/col]",
"\t\t[col]$2[/col]",
"\t[/row]",
"\t[row]",
"\t\t[col]$3[/col]",
"\t\t[col]$4[/col]",
"\t[/row]",
"[/table]"
"$0"
],
"description": "Insertion d'un tableau avec 2 lignes et 2 colonnes"
}
Si on prend le premier bloc en exemple, on retrouve le nom du snippet (ce que vous voulez, ici Code bash). Ensuite le prefix, c'est ce que vous taperez dans l'éditeur et ensuite le texte qui sera inséré. Enfin, la description, c'est facultatif mais je préfère la mettre.
Ensuite, dans VSCode, lorsque vous créérez un fichier .bbcode, vous pourrez taper par exemple bash et vous aurez automatiquement les balises pour insérer du code bash.
Méthode 2 : snippet global
Tip
Dans cette méthode, pour chaque raccourci, vous devrez préciser à quels langages cela s'applique, c'est pratique pour créer des snippets valables pour plusieurs langages. Personnellement, j'utilise la méthode 1.
Créez un nouveau fichier où vous le souhaitez et donnez lui l'extension .bbcode Puis en bas à gauche de la fenêtre de VSCode, cliquez sur la roue dentée puis sur "Extraits de code de l'utilisateur" (User Snippets si votre interface est en anglais).
Cliquez ensuite sur "Nouveau fichier d'extraits globaux" (New Global Snippets File en anglais), puis donnez un nom à votre fichier.
Dans ce nouveau fichier, vous avez un exemple de la structure également mais vous remarquerez une nouvelle ligne scope. Ici vous ajoutez en paramètre le ou les langage(s) pour lesquels s'applique ce raccourci. Il faut donc ajouter cette ligne dans chaque bloc vu ci-dessus (en remplacant javascript,typescript par bbcode).
Conclusion
Et voilà, désormais vous pouvez écrire vos article pour phpBoost dans VSCode. C'est très pratique, et cela va bien plus vite pour ajouter des listes, des tableaux, un warning ou un lien web. Si vous voulez plus d'infos sur ces snippets, la page suivante explique bien les choses Snippets in Visual Studio Code
Bonnes rédactions !