^{ts-code-frame}

ts-code-frame is a visual terminal code frame pointer generator.

---

• Installation
• Usage
• Documentation
• Contributing
• License

📦 Installation

pnpm add @se-oss/code-frame

Install using your favorite package manager

npm

npm install @se-oss/code-frame

yarn

yarn add @se-oss/code-frame

📖 Usage

Basic Usage

Use createCodeFrame to generate a pointer at a specific string index.

import { createCodeFrame } from '@se-oss/code-frame';

const code = 'const a = 1;\nconst b = 2;\nconst c = 3;';
const result = createCodeFrame(code, 15);
console.log(result);

Advanced Code Frame

Use codeFrameColumns to specify exact line and column ranges.

import { codeFrameColumns } from '@se-oss/code-frame';

const code = 'const a = 1;\nconst b = 2;\nconst c = 3;';
const result = codeFrameColumns(code, {
  start: { line: 2, column: 7 },
  end: { line: 2, column: 8 },
});
console.log(result);

Inline Messages

Add custom messages pointing to the error location.

const result = codeFrameColumns(
  code,
  { start: { line: 2, column: 7 } },
  { message: 'Unexpected token' }
);

Syntax Highlighting

Enable colored output using native node utility styling.

const result = codeFrameColumns(
  code,
  { start: { line: 2, column: 7 } },
  { highlightCode: true }
);

Custom Line Boundaries

Control context windows above and below the error.

const result = codeFrameColumns(
  code,
  { start: { line: 2, column: 7 } },
  {
    linesAbove: 1,
    linesBelow: 1,
  }
);

Highlight Utility

Manually syntax highlight code snippets.

import { highlight } from '@se-oss/code-frame';

const colored = highlight('const x = 42;');

📚 Documentation

For all configuration options, please see the API docs.

🤝 Contributing

Want to contribute? Awesome! To show your support is to star the project, or to raise issues on GitHub.

Thanks again for your support, it is much appreciated! 🙏

License

MIT © Shahrad Elahi and contributors.