vue/html-indent conflicting with prettier (Expected indentation of xx spaces but found xx spaces)

[AuthorProxy]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: ^8
• eslint-plugin-vue version: ^9
• Vue version: ^3.4
• Node version: ^20
• Operating System: macos

Please show your full configuration:

module.exports = {
  root: true,
  plugins: ["eslint-plugin-vue"],
  extends: [
    "plugin:@typescript-eslint/recommended",
    "@vue/typescript/recommended",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
    "@vue/eslint-config-prettier/skip-formatting",
  ],
  env: {
    browser: true,
    es6: true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module",
  },
}

module.exports = {
  extends: ["plugin:vue/vue3-recommended"]
};

What did you do?
Trying to rid off the warning: Expected indentation of 32 spaces but found 30 spaces.eslint[vue/html-indent](https://eslint.vuejs.org/rules/html-indent.html)

VSCode + Prettier version

<a
                          :href="
                            !currentAccount && currentVenue.device_id
                              ? '/' + currentVenue.device_id
                              : !currentAccount && currentVenue.display_device_id
                              ? '/' + currentVenue.display_device_id
                              : '/' + currentVenue.venue_id
                          "
                        >

ESLint + vue/html-indent version:

<a
                          :href="
                            !currentAccount && currentVenue.device_id
                              ? '/' + currentVenue.device_id
                              : !currentAccount && currentVenue.display_device_id
                                ? '/' + currentVenue.display_device_id
                                : '/' + currentVenue.venue_id
                          "
                        >

Another Sample:

Prettier:

<span
            v-if="
              newClipForm?.approved_log.user_id &&
              newClipForm.clip_status === TVClipStatus.TVClipStatusApproved
            "
          >

vs ESLint

<span
            v-if="
              newClipForm?.approved_log.user_id &&
                newClipForm.clip_status === TVClipStatus.TVClipStatusApproved
            "
          >

What did you expect to happen?

1. add option to force them work the same way
2. add this useCase to documentation of this rule and describe how to fix it or go around
3. remove from recommended rules, since everybody uses prettier today

And two additional questions:

1. If I need to choose for prettier vs html-indent - which you advise me?
2. What is the best to make them work together? I don;t know how to partially disable prettier without inlint-comments

[FloEdelmann]

Please see https://prettier.io/docs/en/install#eslint-and-other-linters:

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier.

Regarding @vue/eslint-config-prettier and @vue/eslint-config-typescript, please see https://github.com/vuejs/eslint-config-prettier and https://github.com/vuejs/eslint-config-typescript:

This config is specifically designed to be used by @vue/cli & create-vue setups and is not meant for outside use