I just initialized a VueJs project:

npm init vue@3 . Need to install the following packages: create-vue@3.3.2 Ok to proceed? (y) y Vue.js - The Progressive JavaScript Framework √ Package name: ...no-interrupts √ Add TypeScript? ... Yes √ Add JSX Support? ... Yes √ Add Vue Router for Single Page Application development? ... Yes √ Add Pinia for state management? ... Yes √ Add Vitest for Unit Testing? ...No √ Add Cypress for both Unit and End-to-End testing? ... No √ Add ESLint for code quality? ... Yes √ Add Prettier for code formatting? ... Yes

But now when I format my code (alt shift f), prettier emphasizes something. If I run npm run lint, things go back to normal.

For example, alt-shift-F seems to try to keep the first attribute of the html element on the first line:

where npm run lint has a dedicated line for each property:

This is especially a problem because the file is formatted on save.

I don't have a strong preference, but if possible I'd like to keep the one proposed by npm run lint.

My eslintrc.cjs contains the following content:

/* eslint-env node */ require("@rushstack/eslint-patch/modern-module-resolution"); module.exports = { root: true, extends: [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/eslint-config-typescript/recommended", "@vue/eslint-config-prettier", ], parserOptions: { ecmaVersion: "latest", }, };

What should I do so that the alt-shift-f command formats my code correctly?