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)
<p>Je viens d'initialiser un projet VueJs : </p>
<pre class="brush:php;toolbar:false;">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</pre>
<p>Mais maintenant, lorsque je formate mon code (alt+shift+f), plus joli met l'accent sur quelque chose. Si j'exécute <code>npm run lint</code>, les choses reviennent à la normale. </p>
<p>Par exemple, alt-shift-F semble essayer de conserver le premier attribut de l'élément html sur la première ligne : </p>
<pre class="brush:php;toolbar:false;"><img alt="Logo Vue"
classe = "logo"
src="@/assets/logo.svg"
largeur = "125"
hauteur = "125" /></pré>
<p>où npm run lint a une ligne dédiée pour chaque propriété : </p>
<pre class="brush:php;toolbar:false;"><img
alt="Logo Vue"
classe = "logo"
src="@/assets/logo.svg"
largeur = "125"
hauteur = "125"
/></pré>
<p>C'est particulièrement problématique car le fichier est formaté lors de l'enregistrement. </p>
<p>Je n'ai pas de préférence marquée, mais si possible j'aimerais garder celle proposée par <code>npm run lint</code> </p>
<p>Mon <code>eslintrc.cjs</code> contient le contenu suivant : </p>
<pre class="brush:php;toolbar:false;">/* 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",
},
};</pré>
<p>Que dois-je faire pour que la commande <code>alt-shift-f</code> formate correctement mon code ? </p>
