🐛 Invalid line/column calculating in Vue files

[maximal]

Environment information

CLI:
  Version:                      1.8.3
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v22.4.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "bun/1.1.18"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 false

Workspace:
  Open Documents:               0

What happened?

Hi!

I’m working on integrating Biome to my Code Quality Generator (@maximal/gitlab-code-quality#6) and faced an issue of invalid issue location calculating in Vue files when using --reporter=github.

Seems like Biome shows lines/columns relative to <script> position inside of the file, and not relative to the beginning of the file. Which makes almost impossible to highlight issues in GitLab CodeQuality widget and other similar instruments.

Expected result

Calculate lines and columns regarding to the beginning of the Vue file, and not regarding <script> section contents.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[dyc3]

Yeah, this is kind of a limitation of how we currently support HTML-ish template languages (see also: #1726) like vue, svelte, and others. Basically, we kinda regex for where the javascript code actually is in those files, and then just format/lint that code instead of the entire file. It's very hacky.

biome/crates/biome_service/src/file_handlers/vue.rs

Lines 28 to 30 in 08f0c8f

	pub static ref VUE_FENCE: Regex = Regex::new(
	r#"(?ixs)(?<opening><script(?:\s.*?)?>)\r?\n(?<script>(?U:.*))</script>"#
	)

Its technically possible to figure out the line offset of the script tag and then tweak the output based on that offset. IMO, whatever the short term solution for this is, it's going to be rendered unnecessary once we have proper support for HTML-ish languages, and I'm not sure if its worth the additional complexity to do that.

[Superpat]

I'd like to a least voice support for a short term solution, though I understand that dev time is always limited. Unless proper html-ish support is right around the corner, it's going to remain a pain point for whoever uses tools that allow jumping from a file:line:char to the proper location in the editor.

[ematipico]

We already fix this information inside our LSP, so I don't see why we shouldn't do it here:

We generate an offset in the case of astro/svelte/vue files:

biome/crates/biome_lsp/src/session.rs

Lines 340 to 344 in 48089ea

	let offset = match biome_path.extension().and_then(|s| s.to_str()) {
	Some("vue") => VueFileHandler::start(content.as_str()),
	Some("astro") => AstroFileHandler::start(content.as_str()),
	Some("svelte") => SvelteFileHandler::start(content.as_str()),
	_ => None,

And then we create a new TextRange is that offset was provided.

biome/crates/biome_lsp/src/utils.rs

Lines 187 to 197 in 48089ea

	let location = diagnostic.location();
	let span = location.span.context("diagnostic location has no span")?;
	let span = if let Some(offset) = offset {
	TextRange::new(
	span.start().add(TextSize::from(offset)),
	span.end().add(TextSize::from(offset)),
	)
	} else {
	span
	};

In the case of our reporters, we just need to provide them with a new Location that contains the new TextRange.

I am happy to help anyone that wants to help to fix the bug, or wait for me to fix it.

[dyc3]

Oh, then in that case this probably isn't too hard to fix. I'll have time next week to fix this, but if someone wants to tackle it earlier please do.

[maximal]

Had I known Rust, I would’ve helped with a pull request, for now I’ll just wait (even though your code looks very clean) :-)