Git Gutter

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 
About this piece

Git Gutter

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

Usage

The import and the props worth knowing about, in one place.

import { Editor30 } from "@/components/beste/piece/editor30";

<Editor30
  lines={[
    {
      "line": 10,
      "code": "import { greet } from './greet';",
      "kind": "unchanged"
    },
    {
      "line": 11,
      "code": "",
      "kind": "unchanged"
    },
    {
      "line": 12,
      "code": "const user = { name: 'Ayşe' };",
      "kind": "added"
    },
    {
      "line": 13,
      "code": "const msg = greet(user.name);",
      "kind": "modified"
    },
    {
      "line": 14,
      "code": "console.log(msg);",
      "kind": "unchanged"
    },
    {
      "line": 15,
      "code": "",
      "kind": "removed"
    }
  ]}
/>

More Editor pieces

View all Editor
const users = load();
for (const user of users) {12×
  render(user);
}

Breakpoint Gutter

Gutter with rose breakpoint dots, an amber-highlighted current line, and a hit-count chip.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

TODO Comment

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.

const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line

Quick Fix

Code line with a lightbulb quick-fix tile and a dropdown of fix options. Preferred fix gets an amber tag.

const greet = (name: string) =>Ayşe·3d ago·a1b2c3d
  `Merhaba, ${name}!`;Merve·today·9f0e4c2
 Ayşe·3d ago·a1b2c3d

Git Blame

Code lines with inline blame showing author, relative time, and short commit hash to the right.

const name = user.prfile.name;Property 'prfile' does not exist on type 'User'.

Error Lens

Code line where the offending token gets a colored wavy underline and the diagnostic message renders inline beside it.

1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}

Whitespace Markers

Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.