TS Knife: TSX Component Splitter

Turn sprawling React TSX pages into smaller, reviewable components without guessing at architecture. TS Knife is a VS Code extension for analyzing existing React code, previewing safe extraction candidates, and applying changes only after you approve them.

Extract clear boundaries, keep ambiguous logic where it belongs, and review every change before it touches your files.

How it works

Open a React project and right-click a local .tsx file.
Choose Split TSX Components (also available from the Command Palette).
Analyze with Large areas or Small areas. The extension identifies candidates automatically.
Inspect the proposed files, source locations, moved and retained logic, formatting, and type-check results.
Use Compare source changes, then select Approve & split if you agree with the preview. Save the edited source and verify the running app.

By default, generated components are placed in a directory named after the source file:

BoardPage.tsx                 ← original file, now composing extracted components
BoardPage/
  BoardHeader.tsx             ← illustrative names; actual suggestions depend on source
  BoardList.tsx

Existing files are never overwritten. When necessary, names receive suffixes such as -2 or -3.

Key features

Feature	What it does
Automatic analysis	Examines JSX areas, existing components and functions, and supported repeated patterns.
Extraction granularity	Prioritizes larger visual areas or smaller functional boundaries. This does not automatically determine FSD layers.
State and function handling	Moves supported region-local logic together with its component. Shared or lifecycle-sensitive logic can remain in the parent.
Before/after preview	Shows original source locations, generated code, and reasons why certain areas are retained.
Validation	Formats code and checks for newly introduced TypeScript errors before applying changes.
FSD learning guide	Includes offline walkthroughs, concepts, discussion-board examples, and folder organization principles.
English and Korean	English is the default. Change language from the preview's Language selector or the TS Knife: Change Language command.

For trusted workspaces, TS Knife uses the project's Prettier and available ESLint configuration. When project tools are unavailable it can use its bundled Prettier or explain why a check was skipped. It does not claim to have run ESLint when no ESLint configuration is available.

Learn FSD without leaving the editor

Open Learn FSD in the split preview. The guide has four topics:

Walkthrough: Generate a practice TSX file, compare large/small extraction, then review before approving.
Core concepts: Understand Pages, Widgets, Features, Entities, and Shared.
Board example: See how a post list, Like button, search, and comments may be grouped.
Folders & rules: Learn dependency direction, slices, and segments with realistic code structures.

This is architectural guidance, not an automatic FSD folder generator. Choosing component boundaries and choosing FSD layers are separate decisions.

Requirements and limitations

VS Code 1.92 or later, operating on local React .tsx files in an open workspace.
React typings, dependencies, and tsconfig.json should be configured to support type analysis.
Analysis runs locally. No Figma connection or AI API key is required; TS Knife does not convert Figma designs into code.
Complex hooks, shared state, key/ref/spread props, dynamic imports, and certain other patterns may be retained rather than extracted.
A passing type check is not proof of identical runtime behavior. Test events, state updates, and UI flows after applying changes.

Install from VSIX

Copy the tsx-splitter-0.1.1.vsix package to the target computer.
In VS Code, run Extensions: Install from VSIX... from the Command Palette.
Select the package, then use Developer: Reload Window if necessary.

The extension ID remains DawChae.tsx-splitter for compatibility with existing installations. Marketplace publishing is not required for local VSIX installation.

Local development

pnpm install
pnpm check
pnpm test
pnpm package

Run pnpm test:host to verify activation, commands, and preview opening in a VS Code Extension Host.

한국어 안내

TS Knife는 큰 React TSX 화면을 작은 컴포넌트로 안전하게 나누기 위한 VS Code 확장입니다. 확실한 영역만 추출하고 애매한 로직은 원본에 남겨 두며, 변경 사항을 승인 전에 확인할 수 있습니다.

사용 방법

React 프로젝트의 .tsx 파일을 우클릭하고 Split TSX Components를 실행합니다.
Large areas(큰 영역 우선) 또는 **Small areas(작은 영역 우선)**를 선택합니다.
분리 전후 코드, 이동할 로직과 유지할 로직, 타입 검사 결과를 확인합니다.
**Approve & split(승인하고 분리)**로 적용하고 저장한 후 실제 화면 동작을 검사합니다.

미리보기 상단의 Language → 한국어에서 언어를 변경할 수 있으며, 명령 팔레트의 TS Knife: Change Language에서도 변경할 수 있습니다.

주요 기능

자동 분석, 큰/작은 영역 분리, 소스 코드 비교, 안전한 파일 생성, TypeScript 타입 검사, 오프라인 FSD 학습 가이드를 지원합니다. 완전한 FSD 구조를 자동 생성하는 기능은 아니며, 실제 프로젝트의 공유 상태와 의존성에 따라 일부 로직은 원본에 유지됩니다.

TS Knife — TSX Component Splitter

Daw Chae