ESLint, Prettier, and the Vue 3 Compiler: Tooling Upgrades That Feel Like Half the Migration

ESLint 9 deprecated the .eslintrc.* family in favor of eslint.config.js. For a Vue 3 codebase the migration is a real benefit: per-glob configs replace the brittle overrides stack, and parser/plugin wiring becomes explicit instead of implicit.

A minimal Vue 3 + TypeScript flat config that we ship to clients looks like:

// eslint.config.js
import js from "@eslint/js";
import vue from "eslint-plugin-vue";
import vueParser from "vue-eslint-parser";
import tsParser from "@typescript-eslint/parser";
import ts from "@typescript-eslint/eslint-plugin";
import prettier from "eslint-config-prettier";

export default [
  js.configs.recommended,
  ...vue.configs["flat/recommended"],
  {
    files: ["**/*.vue"],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: tsParser,
        ecmaVersion: "latest",
        sourceType: "module",
        extraFileExtensions: [".vue"],
      },
    },
    plugins: { "@typescript-eslint": ts },
    rules: {
      "vue/multi-word-component-names": "off",
      "vue/no-v-html": "warn",
    },
  },
  prettier, // must be last
];

Two things to notice: vue-eslint-parser wraps @typescript-eslint/parser so <script lang="ts"> blocks are linted with type-aware rules, and eslint-config-prettier is the very last entry so formatting rules from earlier presets are turned off.

Vetur was the Vue 2 default. Volar (now Vue Language Tools) is the Vue 3 default and the only path that supports <script setup> and full TS type-checking inside templates. Mid-migration, we have seen teams run both at once "just in case." That is the source of half the false positives in their inbox.

Switchover checklist

• Disable Vetur in every developer's VS Code, not just the lead's machine. Add a workspace .vscode/extensions.json with unwantedRecommendations for Vetur.
• Enable Volar's "Takeover Mode" so it handles all .ts, .js, and .vue files. Disable the built-in TS extension for the workspace.
• Pin the Vue Language Tools version in .vscode/extensions.json recommendations so the team is on the same minor.
• Verify vue-tsc --noEmit runs in CI to catch what the editor catches locally.

The Vue 3 SFC compiler is stricter than Vue 2's. A few patterns that compile silently in Vue 2 and fail (or warn) in Vue 3:

• Multiple root nodes. Allowed in Vue 3, but breaks $attrs fall-through if you don't bind them explicitly.
• Filters. Removed. {{ value | currency }} compiles to garbage. eslint-plugin-vue's vue/no-deprecated-filter rule catches them.
• v-model on components. Default prop changed from value to modelValue; default event from input to update:modelValue. Migrating these by hand is error-prone — let lint flag them.
• Functional components. The Vue 2 functional: true SFC syntax is gone. Convert to plain function components or full SFCs.
• Async setup without Suspense. A setup() that returns a Promise without a <Suspense> boundary will render nothing. Add the rule vue/no-async-in-computed-properties and audit.

Pair these with the migration blockers list for a fuller view of what slows teams down.

• Two parsers, one repo. A leftover Vue 2 vue-eslint-parser and a Vue 3 one in different workspaces of a monorepo will produce contradictory errors. Hoist the parser version to the root.
• Prettier fighting ESLint stylistic rules. If eslint-config-prettier is missing or not last, you get the classic "format on save undoes lint --fix" loop.
• Editor running a different TypeScript than CI. Pin typescript in the workspace and tell VS Code to use it ("Use Workspace Version").
• Disabling rules instead of fixing. A migration is a great moment to delete legacy // eslint-disable-next-line comments and fix the underlying code. Track the count as a metric.
• Treating formatting as a code review topic. If reviewers are still arguing about commas, your tooling is not finished.

• One command — pnpm lint — runs ESLint, Prettier check, and vue-tsc, and matches what CI runs.
• A new developer's first commit passes pre-commit hooks without manual intervention.
• Zero eslint-disable directives added during the last release cycle.
• The number of "lint failed in CI but green locally" tickets is zero.
• Volar takeover mode is on; nobody on the team has Vetur installed.

Conclusion

The Vue 3 compiler is strict in helpful ways. Lean into updated lint and format tooling early so human reviewers spend time on behavior, not on arguing about trailing commas in SFCs.