Реклама мешает? Идти Без рекламы Сегодня 

Форматтер кода TypeScript

Разработчик

РЕКЛАМА · УДАЛЯТЬ?

ВХОД

Автоматический процесс

Или

Исходный код TypeScript

Отступ

Точки с запятой

Стиль цитаты

Запятые в конце строк

Ширина строки

Сортировать импорты

ВЫХОД

Клиентская сторона

РЕКЛАМА · УДАЛЯТЬ?

Гид

Форматтер кода TypeScript

TypeScript-проекты живут и умирают благодаря последовательному форматированию. Независимо от того, использует ли ваша команда точки с запятой или пропускает их, предпочитает одинарные или двойные кавычки, отступы в два или четыре пробела — форматировщик должен последовательно применять эти правила ко всем файлам. Этот инструмент форматирует ваш TypeScript-код на стороне клиента с настраиваемыми параметрами стиля, чтобы вы могли соответствовать соглашениям вашего проекта, ничего не устанавливая.

Вставьте ваш .ts или .tsx код, выберите ваши предпочтения по стилю и мгновенно получите отформатированный вывод. Все выполняется в вашем браузере — код не загружается и не сохраняется.

Как использовать

Вставьте ваш TypeScript-код в поле ввода или попробуйте встроенный пример. Настройте предпочитаемый стиль: тип и ширину отступов, точки с запятой, стиль кавычек, запятые в конце строк и ширину строки. Отформатированный вывод появляется с примененными выбранными вами соглашениями. Скопируйте результат или загрузите его как .ts файл.

РЕКЛАМА · УДАЛЯТЬ?

Функции

Настраиваемый отступ – Выберите 2 пробела, 4 пробела или табуляции, чтобы соответствовать стилю вашего проекта
Управление точками с запятой – Добавляйте или удаляйте точки с запятой в соответствии с предпочтениями вашей команды
Стиль цитаты – Нормализуйте до одинарных или двойных кавычек во всех строковых литералах
Параметры запятых в конце строк – Нет, совместимые с ES5 или все запятые в конце строк
Ширина строки – Установите ширину строки на 80, 100 или 120 символов
Сортировка импортов – Автоматически сортируйте и организуйте импорты
Форматирование аннотаций типов – Последовательные пробелы вокруг двоеточий, дженериков и параметрических типов
Проверка синтаксиса – Обнаруживает распространенные ошибки с указанием номеров строк
Контекстно-зависимый парсинг – Учитывает строки, комментарии и шаблонные литералы при форматировании
Только на стороне клиента – Ваш код никогда не покидает ваш браузер

Когда использовать этот инструмент

Используйте его, когда вам нужно быстро переформатировать фрагменты TypeScript перед вставкой в документацию, очистить код из учебных пособий или Stack Overflow, нормализовать форматирование перед обзорами кода или применить последовательный стиль к коду, который не был написан в соответствии с соглашениями вашего проекта. Он также удобен для преобразования между предпочтениями стиля — переключения с точек с запятой на отсутствие точек с запятой или с одинарных кавычек на двойные.

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

Какова разница между форматированием TypeScript и JavaScript?

TypeScript расширяет JavaScript аннотациями типов, интерфейсами, дженериками, перечислениями и другими функциями системы типов. Форматировщик TypeScript должен обрабатывать все стандартное форматирование JavaScript, а также синтаксис, специфичный для типов, такой как двоеточия в аннотациях типов (const x: string), угловые скобки в дженериках (Array), объявления интерфейсов и псевдонимов типов, а также форматирование перечислений. Стандартные форматировщики JavaScript могут нарушить или проигнорировать эти специфические для TypeScript конструкции.
Должны ли проекты TypeScript использовать точки с запятой или нет?

Оба подхода являются допустимыми и широко используемыми. TypeScript (как и JavaScript) имеет автоматическое добавление точек с запятой (ASI), которое добавляет точки с запятой во время разбора, поэтому их пропуск работает в большинстве случаев. Команды, которые пропускают точки с запятой, ссылаются на более чистый код и меньшее количество нажатий клавиш. Команды, которые их включают, ссылаются на явность и избегание редких граничных случаев ASI. Ключ в последовательности — выберите один стиль и применяйте его ко всему проекту. Большинство основных руководств по стилю (Airbnb, Google) включают точки с запятой, в то время как StandardJS их опускает.
Почему порядок импорта важен в TypeScript?

Последовательный порядок импорта улучшает читаемость кода и уменьшает конфликты слияния. Когда импорты отсортированы по алфавиту и логически сгруппированы (сначала сторонние пакеты, затем внутренние модули), разработчики могут быстро находить конкретные импорты и избегать дубликатов. Неупорядоченные импорты также вызывают ненужные изменения git — два разработчика, добавляющие импорты в разных положениях, создают конфликт слияния, даже если фактическое изменение кода идентично.
Что такое запятые в конце строк и почему их следует использовать в TypeScript?

Запятые в конце строк — это запятые, размещенные после последнего элемента в массивах, объектах, параметрах функций и параметрах типов. Использование запятых в конце строк дает более чистые изменения git, поскольку добавление нового элемента изменяет только одну строку, а не две (новую строку плюс добавление запятой к предыдущей последней строке). Они также упрощают изменение порядка элементов. ES5 разрешает запятые в конце строк в массивах и объектах; ES2017 и TypeScript разрешают их и в параметрах функций.
Какую ширину строки следует использовать проектам TypeScript?

Наиболее распространенные варианты — 80, 100 и 120 символов. 80 символов — это традиционный стандарт, возникший из-за ограничений ширины терминала, и остается значением по умолчанию в Prettier. 100 символов — популярный современный компромисс, который позволяет разместить многословные аннотации типов TypeScript без чрезмерного переноса строк. 120 символов хорошо работают на широких мониторах, но могут снизить читаемость на меньших экранах или в представлениях сравнения бок о бок. Выбирайте в зависимости от типичной конфигурации экрана вашей команды и рабочего процесса обзора кода.