Chaîne d'outils éditeurs, ligne de commande et automatisation

L'essentiel : choisissez l'éditeur selon le scénario — CodeMirror 6 pour les sites utilitaires et le mobile, Monaco seulement quand il faut l'expérience IDE complète ; laissez le travail par lots à jq plus trois vérifications CI pour syntaxe, structure et style, et passez toujours les arguments avec jq --arg.

L'époque de vérifier JSON à la main devrait être révolue : tout ce qu'une machine peut répéter, ne le laissez pas aux yeux humains.

1. Éditeurs dans le navigateur

1.1 Intégration minimale de CodeMirror 6

复制import { EditorView, basicSetup } from 'codemirror';
import { json, jsonParseLinter } from '@codemirror/lang-json';
import { linter, lintGutter } from '@codemirror/lint';

const view = new EditorView({
  parent: document.getElementById('editor')!,
  doc: '{"hello": "json"}',
  extensions: [
    basicSetup,
    json(),
    linter(jsonParseLinter()),
    lintGutter(),
    EditorView.updateListener.of((update) => {
      if (update.docChanged) {
        // Debounce before doing heavy work; do not format on every keystroke
        scheduleParse(update.state.doc.toString());
      }
    }),
  ],
});

Quatre points à noter :

1. json() fournit la coloration syntaxique et l'appariement des crochets — n'écrivez pas le vôtre ;
2. jsonParseLinter() produit des marqueurs d'erreur au niveau ligne/colonne ; associez-le à lintGutter() pour afficher des icônes à côté des numéros de ligne ;
3. Le updateListener doit être debouncé ; appeler JSON.parse sur cent mille lignes à chaque frappe produira un retard visible ;
4. Les grands documents ont besoin d'optimisations au-delà de EditorView.lineWrapping pour éviter de tout rendre d'un coup (CodeMirror 6 rend par fenêtre par défaut, ce qui est une amélioration par rapport aux versions plus anciennes).

1.2 Pliage et plans

CodeMirror 6 a le pliage intégré ; dans les scénarios JSON, on plie généralement par « objet/tableau » :

复制import { foldGutter, foldKeymap } from '@codemirror/language';
import { keymap } from '@codemirror/view';

Avec foldGutter() et keymap.of(foldKeymap), les utilisateurs peuvent replier de longs tableaux avec un raccourci clavier.

1.3 Choisir entre CodeMirror et Monaco

Sites utilitaires et mobile d'abord → CodeMirror ; expérience IDE complète (plusieurs fichiers, aller à la définition, complétion) → Monaco.

2. Ligne de commande : six recettes jq à haute fréquence

jq est à JSON ce que sed + awk sont au texte ; apprendre seulement une petite partie de sa syntaxe couvre quatre-vingts pour cent des besoins quotidiens.

复制# 1. Pick fields (the most common)
jq '.data.items[].name' response.json

# 2. Filter + reshape
jq '.data.items[] | select(.price < 10) | {id, price}' response.json

# 3. Aggregates (length, sum, max)
jq '[.items[] | .price] | {count: length, total: add, max: max}' response.json

# 4. Group and aggregate
jq '[.items[]] | group_by(.category) | map({category: .[0].category, count: length})' response.json

复制# 5. Merge multiple files into an array
jq -s '.' part-*.json > merged.json

# 6. Process JSON Lines line by line
jq -c 'select(.level == "error")' app.jsonl

# Common output switches
jq -r '.data.name'      # Strip the quotes so it pipes cleanly into the shell
jq -c '.'               # Compact output, one line
jq --arg id "$ID" '.id == $id'   # Pass arguments safely, avoiding injection through concatenation

--arg mérite une mention spéciale : concaténer une variable directement dans une expression casse dès que la valeur contient des guillemets, tandis que --arg laisse jq gérer l'échappement.

2.1 Autres outils en un coup d'œil

L'idée derrière gron mérite particulièrement d'être connue :

复制$ echo '{"a":{"b":[1,2]}}' | gron
json = {};
json.a = {};
json.a.b = [];
json.a.b[0] = 1;
json.a.b[1] = 2;

Une fois aplati, grep peut localiser le chemin, ce qui est bien plus rapide que d'étendre niveau par niveau dans un éditeur.

3. Trois couches de validation en CI

复制# Syntax: batch-validate every json file in the repository
find . -name '*.json' -not -path './node_modules/*' -print0 \
  | xargs -0 -n1 jq empty

# Structure: validate against a schema
npx ajv-cli validate -s schemas/order.json -d 'fixtures/orders/*.json' --strict=false

# Style: check only, do not modify
npx prettier --check "**/*.json"

Il faut les trois couches, car leurs messages d'erreur sont complètement différents : jq empty dit seulement « quelle ligne est cassée », ajv dit « quel champ viole quel mot-clé », et Prettier dit seulement « le formatage est incohérent ».

4. Hooks pre-commit

复制# .husky/pre-commit example (excerpt)
npx lint-staged

复制{
  "lint-staged": {
    "*.json": ["prettier --write", "jq empty"]
  }
}

Faites attention aux fichiers de configuration d'outils comme package.json et tsconfig.json ; ne laissez pas Prettier les réindenter à la légère — certains outils sont sensibles au formatage (du JSON valide ne devrait pas l'être, mais en pratique cela a causé des problèmes). Vous pouvez les exclure individuellement.

5. Astuces de débogage

1. Utilisez jq -e comme assertion : le code de sortie vaut 1 quand le résultat de l'expression est false ou null, donc il peut aller directement dans des scripts comme vérification ;
2. jq 'paths' liste tous les chemins, donnant un aperçu rapide de la structure d'un document inconnu ;
3. jq '.. | objects | keys' trouve chaque nom de clé qui n'est jamais apparu, ce qui est pratique pour traquer une orthographe incohérente ;
4. Formatez avant de comparer dans l'éditeur : un diff non formaté est du bruit pur ; une comparaison structurelle comme /diff est plus exacte.

6. Liste de vérification

• [ ] Les marqueurs d'erreur de l'éditeur sont précis à la ligne et à la colonne, et le parsing est debouncé ;
• [ ] Les scripts d'équipe passent les arguments avec jq --arg au lieu de concaténer des chaînes ;
• [ ] La CI a les trois couches de validation (syntaxe/structure/style) ;
• [ ] pre-commit ne traite que les fichiers indexés, pour qu'un scan complet ne ralentisse pas les commits ;
• [ ] Les versions d'outils sont épinglées dans package.json ou .tool-versions.

FAQ

Comment choisir entre CodeMirror 6 et Monaco ?

Pour les sites utilitaires et le mobile, préférez CodeMirror 6 : il est petit, modulaire et bien pris en charge sur mobile, et la coloration syntaxique, l'appariement des crochets et le pliage peuvent se composer au besoin. Ne recourez à Monaco que lorsqu'il faut l'expérience IDE complète avec plusieurs fichiers, l'aller à la définition et la complétion — au prix d'un bundle de plusieurs mégaoctets et d'un effort de personnalisation plus élevé.

Pourquoi la CI a-t-elle besoin de vérifications de syntaxe, de structure et de style ensemble ?

Les trois couches rapportent des erreurs complètement différentes : jq empty dit quelle ligne est cassée, ajv dit quel champ viole quel mot-clé, et Prettier dit seulement que le formatage est incohérent. Supprimer une couche rend les erreurs des autres faciles à mal lire, donc gardez les trois et arrêtez-vous dès qu'une couche échoue.

Faut-il compter sur pre-commit au lieu de valider en CI ?

Non. Les hooks ne traitent que les fichiers indexés, ce qui donne un retour en une minute mais ne peut pas couvrir tout le dépôt ni les changements qui contournent le commit. La CI est responsable de la complétude : gardez pre-commit sur les fichiers indexés et laissez les scans complets à la CI.