How to correctly setup linter and prettier in fresh Vue3 project

[AnJ-Github]

So I initialized fresh Vue 3 project using npm create vue@latest. I selected everything that I want typescript, eslint, prettier etc.

And I installed corresponding VS Code extensions:

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• https://marketplace.visualstudio.com/items?itemName=Vue.volar

The project was initialized with the following VS Code config:

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "tsconfig.json": "tsconfig.*.json, env.d.ts",
    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

With .prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

And eslint.config.ts

import pluginVue from 'eslint-plugin-vue'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVitest from '@vitest/eslint-plugin'
import pluginPlaywright from 'eslint-plugin-playwright'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  
  {
    ...pluginVitest.configs.recommended,
    files: ['src/**/__tests__/*'],
  },
  
  {
    ...pluginPlaywright.configs['flat/recommended'],
    files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
  },
  skipFormatting,
)

And I would expect this config work out of the box, but it does not. And what do I mean by that? Mostly formatting of Vue files.
For example if I will remove a closing slash from a component:

<template>
  <RouterView>
</template>

I will get error in VS Code saying Element is missing end tag.vue(24). But there no automatic process to fix it. Saving the file does not fix it. Running command for linting does not change it, and formatting just throws an syntax error src/App.vue: SyntaxError: Unexpected closing tag "template".. There isn't even a quick fix under the VS Code tool tip. I have to manually add the slash.
I only managed to get it to work when I commented out skipFormatting in the eslint config. And it correctly added the slash after save, but I don't think it is a proper solution?

Other example is for example semicolons or single quotes. They are not fixed after file is saved, even though VS Code settings suggests it should be.
I can change the line:

import { RouterView } from 'vue-router'

into

import { RouterView } from "vue-router";

And I don't get any warning in the IDE and saving the file does not change anything. Only manually running formatting command fixes it.

Formatting of TS files works better. For example if I will add semicolon at the end of the line, saving the file removes the semicolon automatically.

So the question is - what am I doing wrong? Why it does not work out of the box? 7 years ago when I first touched Vue I felt better developer experience than currently.

[Wei-Ba]

检查一下eslint插件的输出日志