Git Blame

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

Git Blame

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

Usage

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

import { Editor20 } from "@/components/beste/piece/editor20";

<Editor20
  lines={[
    {
      "line": 40,
      "author": "Ayşe",
      "time": "3d ago",
      "hash": "a1b2c3d",
      "code": "const greet = (name: string) =>"
    },
    {
      "line": 41,
      "author": "Merve",
      "time": "today",
      "hash": "9f0e4c2",
      "code": "  `Merhaba, ${name}!`;"
    },
    {
      "line": 42,
      "author": "Ayşe",
      "time": "3d ago",
      "hash": "a1b2c3d",
      "code": ""
    }
  ]}
/>

More Editor pieces

View all Editor
import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

Git Gutter

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

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.

Dashboardrender()if (isReady)
    // hidden lines…
    const ready = useReady();
    if (!ready) return null;

Sticky Header

Scope breadcrumb pinned above a code snippet, showing the current class, method, and block.

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.

Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F

Keymap List

Panel listing editor actions with their kbd shortcut combinations on the right.