an-cli

English | Español | العربية | Français | Русский | 日本語 | 简体中文

Описание

an-cli - это инструмент командной строки для фронтенд-разработки, включающий следующие две команды:

Команда anl type: Инструмент командной строки для автоматической генерации определений типов TypeScript и функций запросов API на основе Swagger JSON.

Команда anl lint: Генерирует конфигурации eslint, stylelint, prettier, commitLint и VSCode для проектов React или Vue.

Инструмент Командной Строки для Frontend

Инструмент командной строки, который автоматически генерирует определения типов TypeScript и функции запросов API на основе Swagger JSON.

Особенности

• anl type

  • 🚀 Автоматический разбор документации Swagger JSON
  • 📦 Генерация файлов определения типов TypeScript
  • 🔄 Генерация типобезопасных функций запросов API
  • 🎯 Поддержка параметров пути, запроса и тела запроса
  • 📝 Автоматическая генерация определений перечислений
  • 🎨 Поддержка форматирования кода
  • ⚡️ Поддержка загрузки файлов
  • 🛠 Настраиваемые параметры генерации кода

• anl lint

  • 🔍 Настройка всех инструментов линтинга одной командой
  • 🎨 Автоматическая конфигурация ESLint
  • 🎯 Конфигурация форматирования Prettier
  • 🔄 Стандарты коммитов с CommitLint
  • 📦 Настройка редактора VSCode

Установка

$ npm install anl -g

$ yarn global add anl

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

1. Выполните команду

$ anl type

2. Настройте конфигурацию

• При первом выполнении команды anl type в корневой директории проекта автоматически создается файл конфигурации an.config.json (также можно создать вручную)
• Подробное описание параметров смотрите в разделе конфигурации
• Имя файла конфигурации изменять нельзя

{
	"saveTypeFolderPath": "apps/types",
	"saveApiListFolderPath": "apps/api/",
	"saveEnumFolderPath": "apps/enums",
	"importEnumPath": "../../enums",
	"swaggerJsonUrl": "https://generator3.swagger.io/openapi.json",
	"requestMethodsImportPath": "./fetch",
	"dataLevel": "serve",
	"formatting": {
		"indentation": "\t",
		"lineEnding": "\n"
	},
	"headers": {}
}

3. Сгенерируйте определения типов TypeScript и функции запросов API, выполнив команду еще раз

$ anl type

Параметры конфигурации

| Параметр | Тип | Обязательный | Описание | | ------------------------ | ---------------------------- | ------------ | ---------------------------------------- | | saveTypeFolderPath | string | Да | Путь сохранения файлов определения типов | | saveApiListFolderPath | string | Да | Путь сохранения файлов функций API | | saveEnumFolderPath | string | Да | Путь сохранения файлов перечислений | | importEnumPath | string | Да | Путь импорта перечислений | | swaggerJsonUrl | string | Да | URL документации Swagger JSON | | requestMethodsImportPath | string | Да | Путь импорта методов запроса | | dataLevel | 'data' | 'serve' | 'axios' | Да | Уровень возвращаемых данных | | formatting | object | Нет | Настройки форматирования кода | | headers | object | Нет | Настройки заголовков запроса |

Структура генерируемых файлов

├── apps/ │ ├── types/ │ │ ├── models/ # Все определения типов (кроме перечислений) │ │ ├── connectors/ # Определения типов API │ │ └── enums/ # Определения перечислений │ └── api/ │ ├── fetch.ts # Реализация методов запроса │ └── index.ts # Функции запросов API

Примеры генерируемого кода

Файл определения типов

declare namespace UserDetail_GET {
	interface Query {
		userId: string;
	}

	interface Response {
		id: string;
		name: string;
		age: number;
		role: UserRole;
	}
}

Функции запросов API

import { GET } from './fetch';

/**
 * Получить детали пользователя
 */
export const userDetailGet = (params: UserDetail_GET.Query) => GET<UserDetail_GET.Response>('/user/detail', params);

Описание функциональности

Анализ типов

• Поддержка всех типов данных спецификации OpenAPI 3.0
• Автоматическая обработка сложных вложенных типов
• Поддержка массивов, объектов, перечислений
• Автоматическая генерация комментариев интерфейсов

Загрузка файлов

При обнаружении типа загрузки файлов автоматически добавляются соответствующие заголовки:

export const uploadFile = (params: UploadFile.Body) =>
	POST<UploadFile.Response>('/upload', params, {
		headers: { 'Content-Type': 'multipart/form-data' },
	});

Обработка ошибок

Инструмент имеет встроенный механизм обработки ошибок:

• Уведомления об ошибках разбора
• Предупреждения о неудачной генерации типов
• Обработка исключений при записи файлов

Разработка

# Установка зависимостей
npm install

# Режим разработки
Нажмите F5 для отладки

# Сборка
npm run build

# Локальная отладка
npm run blink

Важные замечания

1. Убедитесь, что URL документации Swagger JSON доступен
2. Пути в файле конфигурации должны быть относительно корневой директории проекта
3. Генерируемые файлы перезапишут существующие файлы с тем же именем
4. Рекомендуется добавить генерируемые файлы в систему контроля версий

Часто задаваемые вопросы

1. Не удается отформатировать сгенерированные файлы типов

   • Проверьте, установлен ли prettier
   • Убедитесь, что в корневой директории проекта есть файл конфигурации prettier

2. Ошибка в пути импорта функций запроса

   • Проверьте правильность настройки requestMethodsImportPath
   • Убедитесь, что файл с методами запроса существует

Руководство по содействию

Приветствуются Issue и Pull Request!

Лицензия

ISC License

Команда anl lint

Обзор функциональности

Предоставляет возможность настройки различных инструментов линтинга для фронтенд-проекта одной командой, включая:

• Проверка кода с ESLint
• Форматирование кода с Prettier
• Стандартизация сообщений коммитов с CommitLint
• Настройка редактора VSCode

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

$ anl lint

Подробности конфигурации

1. Конфигурация ESLint

• Автоматическая установка необходимых зависимостей
• Поддержка фреймворков React/Vue
• Автоматическая генерация .eslintrc.js и .eslintignore
• Интеграция с TypeScript

2. Конфигурация Prettier

• Автоматическая установка зависимостей prettier
• Генерация файла конфигурации .prettierrc.js
• Стандартные настройки включают:
  • Ширина строки: 80
  • Отступы табуляцией
  • Использование одинарных кавычек
  • Скобки для стрелочных функций
  • Другие правила форматирования кода

3. Конфигурация CommitLint

• Установка зависимостей commitlint
• Настройка git hooks с помощью husky
• Генерация commitlint.config.js
• Стандартизация сообщений git commit

4. Конфигурация VSCode

• Создание .vscode/settings.json
• Настройка автоматического форматирования
• Установка инструмента форматирования по умолчанию
• Поддержка обновления существующих конфигураций