# ionic

Правило задаёт практики для Ionic-приложений на TypeScript: структуру компонентов, типизацию, асинхронные вызовы и работу с UI.

- правило · `type=rule` · Cursor · ★ 3580
- Автор: sanjeed5
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/ionic.mdc
- Обновлён: 2026-05-19
- HTML: https://affpapa.org/nevibecode/rules/ionic

## Что делает

Правило подсказывает, как организовать Ionic-компоненты: хранить каждый компонент в отдельной папке, давать тегам noun-based имена с префиксом и располагать поля и методы класса в заданном порядке. Оно также требует документировать публичные `@Prop()`, `@Event()` и `@Method()` через JSDoc.

Для TypeScript правило рекомендует включить `noImplicitAny` и `strictNullChecks`, а внутренние свойства и методы помечать как `private`. В примерах также разобраны `await` для вызовов Capacitor/Cordova, Ionic-компоненты вместо самописного UI и CSS-переменные для темизации. Без `noImplicitAny` и `strictNullChecks` проект нарушает один из базовых пунктов этого правила.

Файл применяется к `**/*.{js,jsx,ts,tsx}`. Положите его в `.cursor/rules/ionic.mdc`, чтобы Cursor учитывал рекомендации при работе с JavaScript, JSX, TypeScript и TSX.

## Установка

### Cursor (родная платформа)

**Вручную: положить файлы**
- Файл: `.cursor/rules/ionic.mdc` — Во frontmatter: description, globs, alwaysApply

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/ionic.md` — Поле paths во frontmatter ограничивает файлы: globs из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/instructions/ionic.instructions.md` — Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/ionic.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/ionic.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/ionic.mdc

## Когда брать
- разложить Ionic-компоненты по отдельным папкам
- задать строгую типизацию в `tsconfig.json`
- документировать публичные API-компонентов
- дождаться результата вызова Capacitor или Cordova
- заменить самописный UI на Ionic-компоненты

## Примеры запросов агенту
- Проверь этот компонент по правилу Ionic и предложи исправления в структуре файлов.
- Приведи TypeScript-код к требованиям `noImplicitAny` и `strictNullChecks`.
- Проверь, что вызов `@capacitor/camera` ожидается через `await`, а публичные API имеют JSDoc.

## Похожие
- [ionic-react](https://affpapa.org/nevibecode/skills/ionic-react.md) — скилл · 717 установок
- [ionic-vue](https://affpapa.org/nevibecode/skills/ionic-vue.md) — скилл · 697 установок
- [cordova-to-capacitor](https://affpapa.org/nevibecode/skills/cordova-to-capacitor.md) — скилл · 768 установок
- [ionic-design](https://affpapa.org/nevibecode/skills/ionic-design.md) — скилл · 1600 установок
- [expo-react-native-typescript](https://affpapa.org/nevibecode/skills/expo-react-native-typescript.md) — скилл · 2200 установок
- [react-native-cursor-rules](https://affpapa.org/nevibecode/skills/react-native-cursor-rules.md) — скилл · 670 установок

Из того же набора: [sanjeed5/awesome-cursor-rules-mdc](https://affpapa.org/nevibecode/by/sanjeed5/awesome-cursor-rules-mdc.md) — 240 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md