FSD CLI

CLI утилита для быстрого создания структуры компонентов по методологии Feature-Sliced Design (FSD).

Установка

Глобальная установка (рекомендуется)

Используйте npm для глобальной установки:

npm install -g fsd-generator

Проверка установки:

fsd
# Должна показаться справка

Примечание: Для глобальной установки рекомендуется использовать npm, а не yarn global, так как npm корректно настраивает PATH и бинарники работают сразу после установки.

Локальная установка в проект

npm install --save-dev fsd-generator
# или
yarn add -D fsd-generator

После установки используйте через npx или yarn:

npx fsd -t widget -n calendar
# или
yarn fsd -t widget -n calendar

Использование

Инициализация FSD структуры

fsd init

Автоматически определяет тип проекта и создаёт структуру папок:

• Next.js: src/_shared/, src/_widgets/, src/_features/, src/_entities/ (с подчеркиванием)
• React: src/shared/, src/widgets/, src/features/, src/entities/ (без подчеркивания)

Создание компонентов

fsd -t <тип> -n <имя>

Создание нескольких компонентов за раз

Вариант 1: Отдельные папки (как раньше)

fsd -t widget -n calendar,button,header

Создаст три отдельные папки: calendar/, button/, header/

Вариант 2: Несколько компонентов в одной папке

fsd -t widget -n form -c Button,Input,Select

Создаст папку form/ui/ с компонентами Button.tsx, Input.tsx, Select.tsx

Вариант 3: Плоская структура (без папки ui)

fsd -t shared -n icons --flat CloseIcon,ArrowIcon

Создаст компоненты напрямую в src/_shared/icons/ без папки ui

Вариант 4: Добавить в существующую папку

fsd -t widget -n header/ui Checkbox

Добавит Checkbox.tsx в существующую папку src/_widgets/header/ui/

Параметры

• -t, --type - Тип компонента (обязательно):

  • widget - создаст в src/_widgets/ (Next.js) или src/widgets/ (React)
  • feature - создаст в src/_features/ (Next.js) или src/features/ (React)
  • entity - создаст в src/_entities/ (Next.js) или src/entities/ (React)
  • shared - создаст в src/_shared/ (Next.js) или src/shared/ (React)

  Стиль определяется автоматически по типу проекта или существующим папкам.

• -n, --name - Имя компонента или папки (обязательно)

• -c, --components - Список компонентов через запятую для создания в одной папке

• --flat - Создать плоскую структуру без папки ui

Примеры

# Инициализация структуры FSD
fsd init

# Создать один виджет
fsd -t widget -n calendar

# Создать несколько виджетов в отдельных папках
fsd -t widget -n calendar,button,header

# Создать несколько компонентов в одной папке
fsd -t widget -n form -c Button,Input,Select,Textarea
fsd -t shared -n ui/icons -c CloseIcon,ArrowIcon,BurgerIcon

# Создать плоскую структуру (без ui папки)
fsd -t shared -n icons --flat CloseIcon,ArrowIcon
fsd -t widget -n header/ui Button --flat

# Добавить компонент в существующую папку
fsd -t widget -n header/ui Checkbox
fsd -t shared -n ui/icons NewIcon

# Создать фичу user-profile
fsd -t feature -n user-profile

# Создать сущность blog-post
fsd -t entity -n blog-post

Что создаётся

При инициализации (fsd init)

Next.js проект - создаётся структура с подчеркиванием:

src/
  ├── _shared/
  │   └── index.ts
  ├── _widgets/
  │   └── index.ts
  ├── _features/
  │   └── index.ts
  ├── _entities/
  │   └── index.ts
  └── index.ts

React проект - создаётся структура без подчеркивания:

src/
  ├── shared/
  │   └── index.ts
  ├── widgets/
  │   └── index.ts
  ├── features/
  │   └── index.ts
  ├── entities/
  │   └── index.ts
  └── index.ts

Также автоматически настраивается tsconfig.json с путями для FSD:

Next.js (с подчеркиванием):

{
  "compilerOptions": {
    "paths": {
      "@shared/*": ["./src/_shared/*"],
      "@widgets/*": ["./src/_widgets/*"],
      "@features/*": ["./src/_features/*"],
      "@entities/*": ["./src/_entities/*"]
    }
  }
}

React (без подчеркивания):

{
  "compilerOptions": {
    "paths": {
      "@shared/*": ["./src/shared/*"],
      "@widgets/*": ["./src/widgets/*"],
      "@features/*": ["./src/features/*"],
      "@entities/*": ["./src/entities/*"]
    }
  }
}

Теперь можно использовать импорты:

import { Button } from "@shared/ui";
import { Header } from "@widgets/header";
import { UserProfile } from "@features/user-profile";

При создании компонента (fsd -t widget -n calendar)

Для команды fsd -t widget -n calendar создаётся следующая структура:

Next.js (с подчеркиванием):

src/_widgets/calendar/
  ├── ui/
  │   ├── Calendar.tsx
  │   └── index.ts
  └── index.ts

React (без подчеркивания):

src/widgets/calendar/
  ├── ui/
  │   ├── Calendar.tsx
  │   └── index.ts
  └── index.ts

Также автоматически добавляется экспорт в соответствующий index.ts:

export * from "./calendar";

Стиль определяется автоматически по существующим папкам в проекте.

При создании нескольких компонентов

Вариант 1: Отдельные папки

fsd -t widget -n calendar,button,header

Создаст все три компонента в отдельных папках с проверками на существование.

Вариант 2: В одной папке

fsd -t widget -n form -c Button,Input,Select

Создаст структуру:

src/_widgets/form/
  ├── ui/
  │   ├── Button.tsx
  │   ├── Input.tsx
  │   ├── Select.tsx
  │   └── index.ts  # export * from "./Button"; export * from "./Input"; ...
  └── index.ts         # export * from "./ui";

Вариант 3: Плоская структура

fsd -t shared -n icons --flat CloseIcon,ArrowIcon

Создаст структуру:

src/_shared/icons/
  ├── CloseIcon.tsx
  ├── ArrowIcon.tsx
  └── index.ts  # export * from "./CloseIcon"; export * from "./ArrowIcon";

Calendar.tsx

import React from "react";

interface CalendarProps {

}

export function Calendar({}: CalendarProps) {
  return (
    <div className="calendar">

    </div>
  );
}

Требования

• Node.js >= 12.0.0
• npm (для глобальной установки)
• Проект должен иметь папку src в корне

Решение проблем

Если при установке возникают проблемы, см. TROUBLESHOOTING.md

Важно: Для глобальной установки используйте npm install -g, а не yarn global add. Yarn global может вызывать проблемы с PATH.

Лицензия

MIT