FSD Explorer is a VS Code extension for projects using Feature-Sliced Design architecture. This extension helps you visualize your project's FSD structure and enforce architectural rules through real-time violation detection.
Features
FSD Structure Visualization
Tree view display of FSD layers (app, pages, widgets, features, entities, shared)
Visual indicators for rule violations (warning icons)
Parent folder violation status propagation
Rule Violation Detection
Detects imports from higher layers to lower layers
Detects cross-slice imports within the same layer
Excludes commented-out imports from violation checks
Real-time progress tracking during scans
Cancellable scan operations
Project Management
Initialize FSD structure with customizable layers
Create new slices across multiple layers
Quick file and folder creation within the FSD structure
Rename and delete operations with safety checks
Installation
Search for "FSD Explorer" in VS Code Marketplace
Usage
Open a project in VS Code
Click the FSD Explorer icon in the Activity Bar
Initialize FSD structure or open existing one
Use the tree view to navigate your FSD structure
Run violation checks through the command palette or context menu
Click on violation warnings to view and fix issues
Requirements
VS Code version 1.91.0 or higher
Project must have a root or src folder for FSD structure
Notes
Commented imports are excluded from rule violation checks
For absolute path imports, only two alias formats are supported: '@/[layer]' and '@[layer]' (e.g., '@/pages', '@pages')
가이드
소개
FSD Explorer는 Feature-Sliced Design 아키텍처를 사용하는 프로젝트를 위한 VS Code 확장 프로그램입니다. 이 확장은 프로젝트의 FSD 구조를 시각화하고 실시간 위반 감지를 통해 아키텍처 규칙을 준수하도록 돕습니다.