@babel/code-frame incorrectly marks lines containing tab characters

[jaydenseric]

Bug Report

• I would like to work on a fix!

Current behavior

The @babel/code-frame function codeFrameColumns incorrectly marks a location in a line that follows tab characters; the markers are not indented using the right mix of spaces and tab characters to indent enough to visually line up with the characters being marked.

Example:

"use strict";

const { codeFrameColumns } = require("@babel/code-frame");

console.log(
  codeFrameColumns(
    'x\t\tabc',
    {
      start: { line: 1, column: 3 },
      end: { line: 1, column: 6 },
    },
    { forceColor: true }
  )
);

Expected behavior

Code frame markers horizontally line up visually with the characters being marked.

Environment

• @babel/code-frame: v7.12.11

[babel-bot]

Hey @jaydenseric! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[nicolo-ribaudo]

There are two different questions:

1. Is @babel/code-frame doing the correct thing?
   Imo yes. A tab isn't 1-column-large, but it spawns multiple columns. If highlight "abc" in my editor, it says that it starts at column 9.
2. Is @babel/parser (or whoever is generating that line/column info) doing the correct thing?
   If it reports \t as one column probably not, but it would require a tabWidth option or similar.

[jaydenseric]

@nicolo-ribaudo

• Regarding (1), a column in a text editor is whatever the character is. 1 tab character = 1 column.
• Regarding (2), the columns numbers are correct as they are (as explained above).

It seems tabs and visual alignment of the markers have been accounted for in the past, but only for far-left indentation in lines:

#3464

I don't see the harm in making sure the markers line up correctly by indenting them with a combination of tabs and spaces, as required.

[nicolo-ribaudo]

a column in a text editor is whatever the character is. 1 tab character = 1 column

At least in vscode and gedit they are counted as multiple columns, while vim gives you both the number counting them as 1 and as multiple.

Anyway, this is probably easier to fix in @babel/generator as you suggest, so we can do it.

[jaydenseric]

Here is step-by-step example.

I'm using @babel/code-frame for JSDoc related error messages in jsdoc-md. One such error, is if the user references a JSDoc member that doesn’t exist in a namepath:

Notice in this example, the user has indent-aligned the JSDoc tag values using spaces.

The link to the start of the problem code location can be CMD+Clicked in VS Code, and you can see that it places the carrot at the right spot:

Now, lets try the same thing but with the JSDoc tag values indent-aligned using tabs instead of spaces:

As you can see, the start column number is correct how it is. What is incorrect is the way @babel/code-frame visually indents the column location markers. Hence this issue.

[liuxingbaoyu]

I re-investigated the issue and found that the problem came from the column parameter of @babel/code-frame being 1-based.
If I increase them by 1, it works fine.

const { codeFrameColumns } = require("@babel/code-frame");

const code = "x\t\tabc";

console.log(
  codeFrameColumns(
    code,
    {
      start: { line: 1, column: 4 },
      end: { line: 1, column: 7 },
    },
    { forceColor: true }
  )
);

console.log(
  codeFrameColumns(
    code.replace(/\t/g, " "),
    {
      start: { line: 1, column: 4 },
      end: { line: 1, column: 7 },
    },
    { forceColor: true }
  )
);