Extension Visual Studio Code qui vérifie, sans connexion Internet, que le code HTML5, CSS3, JavaScript, PHP et SQL respecte l'annexe officielle STI (2ème, 3ème et 4ème année Sciences de l'informatique).
Les écarts sont soulignés directement dans l'éditeur, avec l'explication et le code conforme.
Ce qui est vérifié
| Langage |
Contrôles |
| HTML5 |
balises, attributs par balise, types d'<input>, événements, balises de mise en forme (<b>, <strong>…), <button>, pattern, width/height sur les images, onsubmit hors <form>, script interne en 4ème |
| CSS3 |
propriétés et valeurs de l'annexe, unités (px et % uniquement), sélecteurs (combinés, ::before, :nth-child…), Flexbox/Grid, dégradés, translateX, fonctions de rythme, @media, transition déclarée sur :hover, double transform, animation de left/top sans position |
| JavaScript |
méthodes de l'annexe, charAt, substr, Math.floor, ===, console.log, addEventListener, querySelector, textContent, fonctions fléchées, gabarits `…${x}`, style.* autorisés |
| PHP |
fonctions de l'annexe, mysqli procédural uniquement (new mysqli, PDO, -> signalés), foreach, switch, include, print_r, md5, sessions et cookies, requêtes SQL écrites dans les chaînes |
| SQL |
JOIN, LIMIT, AUTO_INCREMENT, CURDATE(), MODIFY, IF EXISTS, types hors annexe, != ; niveau 3ème : pas de LDD écrit, d'agrégats, de GROUP BY ni de sous-requêtes |
Chaque élément de l'annexe a un niveau d'introduction : en 3ème, un élément de 4ème est signalé « pas encore au programme ».
Trois gravités :
- Erreur : hors annexe ou niveau supérieur.
- Avertissement : valeur absente de l'annexe (
display: none…) ou convention STI.
- Conseil : bonne pratique (
getMonth() + 1, isNaN pour un champ « chiffres uniquement »).
Utilisation
- Niveau : cliquer sur
STI 3ème dans la barre d'état (en bas à gauche), ou commande STI : Choisir le niveau.
- Niveau d'un fichier : écrire un commentaire
sti-niveau: 4 dans les 20 premières lignes.
- Survol : passer la souris sur une balise, une propriété, une méthode ou une fonction affiche sa fiche de l'annexe (définition, valeurs, paramètres, exemple).
- Correction rapide (ampoule ou
Ctrl+.) : === → ==, charAt(i) → [i], Math.floor → Math.trunc, <button> → <input type="button">, translateX(a) → translate(a, 0px), CURDATE() → DATE(NOW()), textContent → innerHTML…
- Rapport d'un dossier : clic droit sur un dossier dans l'explorateur →
Rapport de conformité d'un dossier. Le rapport HTML liste chaque fichier, chaque écart et le code conforme ; il peut être enregistré. Pratique pour corriger un dossier de copies.
- Ignorer une ligne : ajouter un commentaire contenant
sti-ignorer sur la ligne.
- Autoriser un terme dans tout le projet : correction rapide « Autoriser … », ou réglage
sti.autoriser (ex. ["colspan", "clear"]).
Réglages
| Réglage |
Rôle |
Défaut |
sti.niveau |
2, 3 ou 4 |
3 |
sti.actif |
active la vérification |
true |
sti.conseils |
affiche les conseils |
true |
sti.analyserPendantFrappe |
analyse pendant la saisie |
true |
sti.survol |
fiches de l'annexe au survol |
true |
sti.autoriser |
termes à ne jamais signaler |
[] |
Installation hors ligne
- Copier le fichier
tn-sti-annexe-zouaghi-1.0.0.vsix sur le poste (clé USB, réseau du labo).
- Dans VS Code : vue Extensions (
Ctrl+Maj+X) → menu … en haut → Installer à partir de VSIX… → choisir le fichier.
- Ou en ligne de commande :
code --install-extension tn-sti-annexe-zouaghi-1.0.0.vsix
Pour plusieurs postes, la commande ci-dessus peut être lancée depuis un script. VS Code 1.60 ou plus récent est requis.
Vérification sans VS Code
Avec Node.js installé, le dossier de l'extension contient un outil en ligne de commande :
node cli.js chemin/du/dossier --niveau 3 --rapport rapport.html
Mettre à jour l'annexe
Les règles s'appuient sur les fichiers du dossier donnees/ (html5.json, css3.json, javascript.json, php.json, sql.json, hors-annexe.json), repris du dépôt annexe4STITN. Après une révision de l'annexe, il suffit de remplacer ces fichiers puis de reconstruire le paquet .vsix. Le fichier complements.json fixe le niveau de chaque type d'<input>.
Auteur
M. Zouaghi Mohamed — Lycée Oued Ellil. Tous droits réservés.
| |
