How do you allow this prettier formatting in eslint-plugin-vue (long attribute formatting), or change the prettier option?

Question

When I use prettier, the formatting is giving me this for v-if,

<action-button
    v-if="
        hasWriteAccess &&
        getArchiveUnarchiveDeleteAllowed(redirection.manual_state, redirection.displayed_status).unArchivedAllowed
    "
/>

But eslint-plugin-vue would like this:

<action-button
    v-if="
        hasWriteAccess &&
            getArchiveUnarchiveDeleteAllowed(redirection.manual_state, redirection.displayed_status).unArchivedAllowed
    "
/>

[0]   113:1  error  Expected indentation of 32 spaces but found 28 spaces  vue/html-indent
[0]
[0] ✖ 1 problem (1 error, 0 warnings)
[0]   1 error and 0 warnings potentially fixable with the `--fix` option.
[0]
[0]
[0] webpack compiled with 1 error

I tried changing eslint options and prettier options with no success, any suggestions ?

I am using

    "prettier": "^2.6.2", and 
    "eslint-plugin-vue": "^8.6.0"

With the current following config:

    "vue/html-indent": [
      "error",
      4,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: false,
        ignores: []
      }
    ],

How do you allow this prettier formatting in eslint-plugin-vue (long attribute formatting), or change the prettier option?

0 Answers0