web-dev-qa-db-fra.com

Impossible d'obtenir un format automatique correct lors de l'enregistrement dans Visual Studio Code avec ESLint et Prettier

dans Visual Studio Code avec ESLint et Prettier lorsque vous travaillez sur des fichiers .vue, il semble que je ne parvienne pas à corriger correctement vue/max-attributs-par-ligne.

Par exemple, avec vue/max-attributs-par-ligne défini sur "off", et j'essaie d'ajouter des sauts de ligne manuellement, il le corrige pour que chaque élément soit toujours placé sur une seule ligne, peu importe qu'il s'agisse de 81, 120 , 200 ou plus de caractères. Comment puis-je savoir ce qui force le forçage de mes éléments de balisage sur exactement une ligne?

J'utilise ESLint version 5.1.0 et le code Visual Studio (sans l'extension Prettier), avec Prettier 1.14.2. 

Voici l'exemple dans un fichier .vue - je ne peux pas le faire sur plusieurs lignes, peu importe ce que je fais, quand 'vue/max-attributes-per-line': 'off'. Chaque fois que je sauvegarde, cela force la longue ligne de balisage sur une seule ligne.

<template>
  <font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>

Si je règle 'vue/max-attributes-per-line': 2, le formatage est le même, avec un saut de ligne (ce qui est tout aussi faux).

      <font-awesome-icon v-if="statusOptions.icon" 
:icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />

Si j'essaie de le reformater manuellement, il revient simplement à ce qui précède lorsque je sauvegarde.

De plus, il semble reformater deux fois lorsque je frappe Ctrl + S: tout d'abord, il reformate pour tout mettre sur une ligne, puis une demi-seconde plus tard, le formatage ci-dessus donne les résultats. Des idées ? Qu'est-ce qui cause cette étrangeté - y a-t-il plusieurs reformateurs en cours d'exécution? Comment puis-je savoir ce que le premier consiste à désactiver?

Paramètres de l'espace de travail VS Code:

{
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[vue]": {
    "editor.tabSize": 2
  },
  "[csharp]": {
    "editor.tabSize": 4
  },
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.referencesCodeLens.enabled": true,
  "vetur.validation.script": false,
  "vetur.validation.template": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx"
    ]
  },
  "eslint.validate": [
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    "vue-html",
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "editor.rulers": [
    80,
    100
  ]
}

.eslintrc.js: 

module.exports = {
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    node: true,
    jest: true
  },
  globals: {
    expect: true
  },
  extends: [
    'prettier',
    'plugin:vue/recommended',        // /base, /essential, /strongly-recommended, /recommended
    'plugin:prettier/recommended',   // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier. 
    'eslint:recommended'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': [            // customizing prettier rules (not many of them are customizable)
      'error',
      {
        singleQuote: true,
        semi: false,
        tabWidth: 2
      },
    ],
    'no-console': 'off'
  }
}

Sans modifier aucun paramètre, ESLint --fix formate en effet correctement - divisant correctement tous les éléments de modèle .vue en plusieurs lignes. Alors des idées comment je fouets VS Code dans la forme? Les réglages ci-dessus n'ont pas aidé, mais je ne sais pas comment savoir même ce qui interfère. Des idées?

Pour souligner, lors de l'enregistrement dans VS Code, un élément HTML long sera réduit à une ligne, puis à deux lignes une demi-seconde plus tard, le tout à partir d'une opération de sauvegarde. Je m'attends plutôt à ce qu'il soit divisé en plusieurs lignes. Si plusieurs sauvegardes étaient nécessaires, la première sauvegarde montre ce comportement ainsi que toutes les sauvegardes suivantes.

vue.jsvisual-studio-codeeslintprettier
8
Patrick Szalapski

Réponse courte: j'avais besoin de: "editor.formatOnSave": false, "javascript.format.enable": false.

J'ai enfin trouvé la combinaison magique de paramètres, grâce à ce fil de Wes Bos sur Twitter . J'avais raison de penser qu'il semble y avoir plusieurs formateurs en conflit. Bien que je ne sois pas sûr de ce qu’ils sont réellement, j’ai pu désactiver tout ce qui se passe comme suit:

Dans les paramètres du code VS, il me faut:

  "editor.formatOnSave": false,
  "javascript.format.enable": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [ ".html", ".js", ".vue", ".jsx" ]
  },
  "eslint.validate": [
    { "language": "html", "autoFix": true },
    { "language": "vue", "autoFix": true },
    { "language": "javascript", "autoFix": true },
    { "language": "javascriptreact", "autoFix": true }
  ]

Dans .eslintrc.js, je peux utiliser les paramètres de mon message d’origine et modifier également "vue/max-attributs-par-ligne" selon les besoins. Ensuite, le plug-in ESLint de VS Code formatera le code pas à pas à chaque sauvegarde, à l'instar de kenjiru. Un dernier accroc: HMR ne prendra pas ces modifications, alors reconstruisez à partir de zéro.

20
Patrick Szalapski

Avec 'vue/max-attributes-per-line': 'off', la règle est désactivée afin que VSCode n'essaye pas de corriger la longue ligne lors de l'enregistrement automatique. Les autres correctifs eslint sont appliqués, comme prévu.

Avec 'vue/max-attributes-per-line': 1, VSCode corrige une seule erreur par sauvegarde. Il s'agit d'une limitation connue de vscode-eslint 

vscode-eslint n'effectue qu'un seul passage afin de limiter au minimum le nombre de modifications générées par le plug-in. Le but est de conserver autant que possible les marqueurs (comme les points de rupture) dans le fichier.

VSCode a une limite de temps d'une seconde pour que tous les plugins calculent le changement défini lors de l'enregistrement. Si l'un des plugins empêche les autres plugins de s'exécuter 3 fois de suite, il sera désactivé.

eslint --fix exécute toutes les règles d'une boucle jusqu'à ce qu'il n'y ait plus d'erreurs de peluchage. Je pense qu'il y a une limite de 10 itérations maximum.

Voir ces liens pour plus de détails:

J'ai créé une configuration minimale pour illustrer ce problème:

2
kenjiru