Résoudre les conflits entre les règles de formatage automatique de VS Code (alt+shift+F) et les règles de formatage par défaut de VueJ (npm run lint)

Question

Je viens d'initialiser un projet VueJs :

npm init vue@3 .
Besoin d'installer les packages suivants :
  créer-vue@3.3.2
Ok, je continue ?

Vue.js - Le framework JavaScript progressif

√ Nom du package : ...sans interruption
√ Ajouter TypeScript ?... Oui
√ Ajouter le support JSX ?... Oui
√ Ajouter Vue Router pour le développement d'applications à page unique... Oui ?
√ Ajouter Pinia pour la gestion de l'état... Oui
√ Ajouter Vitest pour les tests unitaires ?
√ Ajouter Cypress pour les tests unitaires et de bout en bout... Non ?
√ Ajouter ESLint pour la qualité du code... Oui
√ Ajouter Plus joli pour le formatage du code ? Oui

Mais maintenant, lorsque je formate mon code (alt+shift+f), plus joli met l'accent sur quelque chose. Si j'exécute npm run lint, les choses reviennent à la normale.

Par exemple, alt-shift-F semble essayer de conserver le premier attribut de l'élément html sur la première ligne :

où npm run lint a une ligne dédiée pour chaque propriété : 

C'est particulièrement problématique car le fichier est formaté lors de l'enregistrement. 
Je n'ai pas de préférence marquée, mais si possible j'aimerais garder celle proposée par npm run lint 
Mon eslintrc.cjs contient le contenu suivant : 
/* nœud eslint-env */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  racine : vrai,
  étend : [
    "plugin:vue/vue3-essential",
    "eslint : recommandé",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions : {
    ecmaVersion : "dernière",
  },
};
Que dois-je faire pour que la commande alt-shift-f formate correctement mon code ? 
            

Answer 1

Vous devez définir un formateur par défaut dans VS Code. Voici comment procéder :

1. Installer ESLintExtension
2. Allez dans Paramètres et recherchez "Formateur par défaut"
3. Choisissez ESLint

VS Code lira alors automatiquement la configuration ESLint du projet et formatera le code en conséquence