feat: introduce Vue language by auvred · Pull Request #2316 · flint-fyi/flint

auvred · 2026-02-14T07:14:37Z

PR Checklist

Addresses an existing open issue: fixes 🚀 Feature: introduce Vue language #1113
That issue was marked as status: accepting prs
Steps in CONTRIBUTING.md were taken

Overview

changeset-bot · 2026-02-14T07:14:41Z

🦋 Changeset detected

Latest commit: 3be92f3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@flint.fyi/vue-language	Minor
@flint.fyi/vue	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-02-14T07:14:42Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flint	Ready	Preview, Comment	Mar 18, 2026 11:03am

.changeset/seven-hornets-jump.md

auvred · 2026-03-10T19:28:03Z

knip.json

 			]
+		},
+		"packages/vue": {
+			"ignoreDependencies": ["vue"]


It's required for tests (virtual code for .vue files contains vue package imports)

JoshuaKGoldberg

🔥 great!!

I left a few small things but they are either too small to block or too big to block. This is really lovely to see.

JoshuaKGoldberg · 2026-03-10T23:57:25Z

packages/vue-language/src/language.ts

+export interface VueServices {
+	vueServices: {


[Naming] 🤔 this nesting of two things both called "Vue services" is odd. I think it'll be confusing to people trying to read & understand them. Especially folks coming into linting/Flint anew from the Vue side.

I also can't quickly think of a better property name than vueServices for the nested object containing Vue services. Maybe that's a sign that these all make sense as direct properties of VueServices, not nested underneath an object? That would simplify the overall structure of things.

Though, given the comment about Partial<FileServices>, maybe that's not doable? If so - how about calling this vue instead of vueServices? That would signal that it's the "Vue" area of "services".

WDYT?

[Naming] 🤔 this nesting of two things both called "Vue services" is odd. I think it'll be confusing to people trying to read & understand them. Especially folks coming into linting/Flint anew from the Vue side.

+1 on renaming. Just plain vue property would make more sense

Maybe that's a sign that these all make sense as direct properties of VueServices, not nested underneath an object? That would simplify the overall structure of things.

Though, given the comment about Partial<FileServices>, maybe that's not doable?

Yeah, answered in #2316 (comment)

If we make these properties top-level, then rule authors will have to do null checks for every individual property rather than just context.vue != null

JoshuaKGoldberg · 2026-03-10T23:57:56Z

packages/vue-language/src/language.ts

+}
+
+type VueCodegen =
+	typeof tsCodegen extends WeakMap<WeakKey, infer V> ? V : never;


[Aside] I cannot wait for the blog post explaining this architecture 😂 it's going to cause a lot of conversations around tooling folks.

packages/vue-language/src/language.ts

JoshuaKGoldberg · 2026-03-11T00:04:29Z

packages/vue-language/src/language.ts

+			typeof configFilePath === "string"
+				? createVueParsedCommandLine(
+						ts,
+						ts.sys,


[Question] Shouldn't this also be using options.host in some way? (and the one too)

I believe (and @auvred pls correct me if I'm wrong) that the ts.sys that we have at this point is running in the LinterHost...

EDIT: though if that's the case not sure what's going on below with the options.host ?? ts.sys. Which also probably doesn't work anymore post-#2200 anyway??

Ohh, nice catch!!

Even though options.host is wrapped like 5 times in TS internals, its FS-related methods still end up in our LinterHost, I updated this place to prefer options.host when it's non-null (always)

JoshuaKGoldberg · 2026-03-11T00:09:08Z

packages/vue/src/rules/vForKeys.ts

+					if (vueServices == null) {
+						return;
+					}


[Refactor] I now see the disadvantage of the Partial<FileServices> in createVolarBasedLanguage... is this really necessary? Can we just say:

export function createVolarBasedLanguage<FileServices extends object>( initializer: VolarLanguagePluginInitializer<FileServices>, ): Language< TypeScriptNodesByName, - Partial<FileServices> & TypeScriptFileServices + FileServices & TypeScriptFileServices > {

?

Ah, the problem is that we want Vue rules to lint both .vue and .ts files!

If we remove Partial from there, we will basically limit rules created from vueLanguage to lint only .vue files since Vue services are available only there.

So I'm hearing this is a #1253 (comment) problem?

Almost yes, but no. Currently, Vue is like a superset of TS. Both TS and Vue rules can lint the generated virtual TypeScript code, but only Vue rules can access Vue services (Vue AST) when they're linting .vue files (they can't access them when they're linting .ts files). 1253 is more about cross-language/cross-file linting

Ok, after a few read-thrus of your comment, do Vue rules also run on .ts files? If not I don't know how to understand that comment. (so #1253 (comment) but the future is sorta now)

Ok, after a few read-thrus of your comment, do Vue rules also run on .ts files?

Yes, exactly! .ts files can also contain Vue-specific code, for example asyncComputed rule - https://github.com/auvred/flint/blob/5fee75d714f36bce5363a46c9c9d53cf8251da17/packages/vue/src/rules/asyncComputed.test.ts

Ooooh, cool! Yeah I didn't get that. I'll go re-read and see where I missed that.

Ok, it's still a little fuzzy around the edges but I think I get the general idea, maybe?

I'll write a bit more detailed explanation tomorrow 🤝

So, how this works:

First, we have TS rules (from @flint.fyi/ts). These rules can lint pure TypeScript code only. Thanks to Volar, .vue files, when imported into TS program, are converted to virtual generated TypeScript code.

So:

when TS rule lints .ts everything works as before

when TS rule lints .vue, it lints the virtual generated code, reports errors on it, and our linter engine maps these errors back to their original locations in Vue SFC

What happens when we create a new rule using language from createVolarBasedLanguage:

when Vue rule lints .ts, it lints it with the same context/services as TS rule, everything works exactly the same here

when Vue rule lints .vue file, similar to the TS rule, it can report errors on the virtual generated code (reports then mapped to the original locations), or it can access vue services from the context. In this case, Vue rule can visit the original AST of the Vue SFC, optionally map its location to the generated code (to get some type information), and report the errors with the original Vue SFC locations, in this case these locations are not mapped back since they're already valid.

Hope this helps!

JoshuaKGoldberg · 2026-03-11T00:12:07Z

packages/vue/src/rules/vForKeys.ts

+					const toGeneratedLocation = (sourceLocation: number) => {
+						for (const [loc] of vueServices.map.toGeneratedLocation(
+							sourceLocation,
+						)) {
+							return loc;
+						}
+						return undefined;
+					};
+
+					const toGeneratedLocationOrThrow = (sourceLocation: number) => {
+						return nullThrows(
+							toGeneratedLocation(sourceLocation),
+							"Unable to map source location to generated location",
+						);
+					};


[Refactor] This strikes me as utilities that most-to-all Vue rules will need. I'm guessing they'll end up in a utils directory sooner or later.

For sure! But I think we need to write several more rules, so that we can better understand the appropriate shape for these utilities

JoshuaKGoldberg · 2026-03-11T01:33:18Z

packages/vue/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@flint.fyi/vue",


Oh, and: should this be split into the language & rules plugin the way others are too?

Suggested change

"name": "@flint.fyi/vue",

"name": "@flint.fyi/vue-language",

It is! I missed that as well my first readthru 😂

🤔 But this PR already has both @flint.fyi/vue-language and @flint.fyi/vue? Or am I missing something?

lishaduck

LGTM 🙃

packages/vue-language/package.json

lishaduck · 2026-03-11T01:08:57Z

packages/vue-language/src/language.ts

+			typeof configFilePath === "string"
+				? createVueParsedCommandLine(
+						ts,
+						ts.sys,


I believe (and @auvred pls correct me if I'm wrong) that the ts.sys that we have at this point is running in the LinterHost...

EDIT: though if that's the case not sure what's going on below with the options.host ?? ts.sys. Which also probably doesn't work anymore post-#2200 anyway??

packages/vue-language/src/language.ts

packages/vue/src/rules/vForKeys.ts

lishaduck · 2026-03-11T01:42:21Z

packages/vue/src/rules/vForKeys.ts

+						}
+					};
+
+					// TODO: add vue: listeners to the language


I don't know what this means but cool. (aka what's vue:. Can I get like a 2-second vue crash-course? I think that might help)

Oops, sorry bad phrasing... I meant this - #1163 (comment)

The unclear part is: is it OK to call all TS listeners before and then all vue: listeners after? Probably yes, because we don't have any other options. I'll file the followup issue

Ooooh, that makes sense. 👍🏻

auvred · 2026-03-11T07:02:12Z

Okay I think I addressed almost everything!

I also want to say thank you both for diving into this and catching so many things here! I know how much brain hurts after trying to understand how all this Volar/Vue stuff works (I spent like several months digging in this, so that's no longer the case for me, but I remember that a few years ago I tried to implement all this as an ESLint plugin and I gave up after two days in a complete desperation because my brain melted 🫠)

kovsu · 2026-03-11T08:27:18Z

Off topic: sensei, please teach me. 🫨

auvred · 2026-03-11T10:48:03Z

Even though I'm bad at writing, I'll try to explain everything in details in #2297

lishaduck

🚀

lishaduck · 2026-03-11T13:46:20Z

packages/vue-language/package.json

 		"test": "vitest --project vue-language"
 	},
 	"dependencies": {
+		"@flint.fyi/core": "workspace:^",


This can just be a devDependency, it's type-only and not exposed (oh how I want a good public/private types detector...).

Oh wow! What a catch... I can't even imagine how you noticed this

auvred · 2026-03-18T11:14:56Z

Okay, the time has come...

auvred mentioned this pull request Feb 14, 2026

feat: introduce Volar.js meta-language #2315

Merged

3 tasks

vercel bot deployed to Preview February 14, 2026 07:15 View deployment

vercel bot deployed to Preview February 14, 2026 07:21 View deployment

michaelfaith reviewed Feb 15, 2026

View reviewed changes

.changeset/seven-hornets-jump.md Outdated Show resolved Hide resolved

vercel bot deployed to Preview March 8, 2026 07:14 View deployment

Base automatically changed from volar-language to main March 10, 2026 18:34

rebase

5c1541b

auvred force-pushed the vue-language branch from 24ef6b5 to 5c1541b Compare March 10, 2026 18:44

vercel bot deployed to Preview March 10, 2026 18:48 View deployment

auvred added 4 commits March 10, 2026 21:48

pnpm dedupe

e2789c5

make linters happy

252527f

ok

168c445

okokok

ed34905

vercel bot deployed to Preview March 10, 2026 19:21 View deployment

okokokokokokokokok

fbffc8c

auvred commented Mar 10, 2026

View reviewed changes

vercel bot deployed to Preview March 10, 2026 19:29 View deployment

auvred marked this pull request as ready for review March 10, 2026 19:32

JoshuaKGoldberg approved these changes Mar 11, 2026

View reviewed changes

JoshuaKGoldberg reviewed Mar 11, 2026

View reviewed changes

lishaduck approved these changes Mar 11, 2026

View reviewed changes

JoshuaKGoldberg added the status: waiting for author Needs an action taken by the original poster label Mar 11, 2026

address reviews

ebac147

auvred requested review from JoshuaKGoldberg and lishaduck March 11, 2026 06:57

github-actions bot removed the status: waiting for author Needs an action taken by the original poster label Mar 11, 2026

vercel bot deployed to Preview March 11, 2026 06:59 View deployment

auvred added 2 commits March 11, 2026 10:05

silence flint errors

9f0fe6e

Merge branch 'main' into vue-language

83f95b4

vercel bot deployed to Preview March 11, 2026 07:10 View deployment

lishaduck approved these changes Mar 11, 2026

View reviewed changes

@flint.fyi/core to devDeps

5f992cf

vercel bot deployed to Preview March 11, 2026 14:17 View deployment

lishaduck mentioned this pull request Mar 11, 2026

style: prefer nullThrows a bit more #2417

Merged

3 tasks

auvred mentioned this pull request Mar 14, 2026

docs: add The State of Flint - Spring 2026 blog post #2433

Merged

3 tasks

Merge branch 'main' into vue-language

a50693f

vercel bot deployed to Preview March 16, 2026 12:57 View deployment

auvred added 3 commits March 18, 2026 13:33

tweaks

2284b13

Merge branch 'main' into vue-language

cb599d6

lockfile

b091327

vercel bot deployed to Preview March 18, 2026 10:40 View deployment

eslint --fix

9301732

vercel bot deployed to Preview March 18, 2026 10:47 View deployment

plugin name

fe7269f

vercel bot deployed to Preview March 18, 2026 10:55 View deployment

references in root tsconfig

3be92f3

vercel bot deployed to Preview March 18, 2026 11:03 View deployment

auvred merged commit d5c59ec into main Mar 18, 2026
8 checks passed

auvred deleted the vue-language branch March 18, 2026 11:15

auvred mentioned this pull request Mar 18, 2026

RFC: Vue.js SFC linting support #835

Closed

lishaduck mentioned this pull request Mar 22, 2026

docs: add Fully type-aware linting for Astro, Svelte, and Vue blog post #2456

Merged

3 tasks

auvred mentioned this pull request Mar 22, 2026

🚀 Feature: Add AST visit listeners for custom Volar-based language ASTs #2480

Open

2 tasks

Conversation

auvred commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

Overview

Uh oh!

changeset-bot bot commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JoshuaKGoldberg left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

auvred Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lishaduck left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

auvred commented Feb 14, 2026 •

edited

Loading

changeset-bot bot commented Feb 14, 2026 •

edited

Loading

vercel bot commented Feb 14, 2026 •

edited

Loading

JoshuaKGoldberg left a comment •

edited

Loading

auvred Mar 11, 2026 •

edited

Loading