How to solve a formating conflicts between VS Code auto-format(alt+shift+F) and VueJs default formating(npm run lint) rules?

Question

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 do format my code(alt+shift+f), prettier is underlining some things. If I run npm run lint , things go back to normal.

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

<img alt="Vue logo"
     class="logo"
     src="@/assets/logo.svg"
     width="125"
     height="125" />

Where npm run lint have a dedicated line for each attribute:

<img
  alt="Vue logo"
  class="logo"
  src="@/assets/logo.svg"
  width="125"
  height="125"
/>

It's especially an issue because the file is formated on save.

I've not a strong preference, but if possible I would like to keep the one proposed by npm run lint .

my eslintrc.cjs contains the following:

/* 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 to have the alt-shift-f command formating properly my code?

Answer 1

You need to set your default formatter in VS Code. Here is how to do it:

1. Install the ESLint extension
2. Go to settings and search for "Default formatter"
3. Select ESLint

VS Code then automatically reads your ESLint configuration from your project and formats the code accordingly