Resolve conflicts between VS Code automatic formatting (alt+shift+F) and VueJs default formatting (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 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:

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

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

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

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?

Answer 1

You need to set the default formatter in VS Code. The operation method is as follows:

1. InstallationESLintExtension
2. Go to Settings and search for "Default Formatter"
3. Select ESLint

VS Code will then automatically read the ESLint configuration from the project and format the code accordingly