0

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?

J4N
  • 19,480
  • 39
  • 187
  • 340
  • Give a try to that one: https://stackoverflow.com/a/68880413/8816585 – kissu Aug 29 '22 at 08:44
  • @kissu Any idea what would be the affected property in the config file? Mine is 9181 line long, so not sure what to look for? Also, Since I dev for other stacks, how to make those change persists only in this project? – J4N Aug 29 '22 at 12:11

1 Answers1

0

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

stanko
  • 71
  • 3
  • eslint is already installed. I tried to set the "default formatter" for the workspace to be eslint, but it doesn't seems to improve anything – J4N Aug 28 '22 at 19:49