Как автоматически добавить точки с запятой в JavaScript-файлах

В JavaScript точки с запятой часто можно не писать вручную из-за механизма ASI — automatic semicolon insertion. Но если в проекте нужен единый стиль, точки с запятой обычно добавляют автоматически через форматтер Prettier или правило ESLint semi

Практичный вариант:

Prettier -> форматирует код
ESLint -> проверяет правила
ASI -> механизм языка, но не инструмент форматирования файлов

Что такое ASI

ASI — это автоматическая вставка точек с запятой на этапе разбора кода. JavaScript может понять многие строки без явного ;

Например:

const name = "Anna"
console.log(name)

Такой код часто выполнится. Но это не значит, что формат проекта должен быть случайным. Лучше выбрать стиль и применять его автоматически

Опасный пример с return

ASI может удивить:

function getUser() {
  return
  {
    name: "Anna"
  }
}

JavaScript воспримет это как:

return;

Функция вернет undefined, а не объект. Правильно:

function getUser() {
  return {
    name: "Anna"
  };
}

Поэтому автоматическое форматирование полезно: оно делает такие места заметнее

Prettier

Prettier умеет автоматически форматировать JavaScript и добавлять точки с запятой, если включена опция semi

Пример настройки .prettierrc:

{
  "semi": true,
  "singleQuote": false
}

После этого форматтер будет приводить код к выбранному стилю

Команда для проекта:

npx prettier . --write

Перед массовым форматированием лучше сделать резервную копию или проверить изменения через Git

ESLint

ESLint может требовать точки с запятой правилом semi:

{
  "rules": {
    "semi": ["error", "always"]
  }
}

ESLint больше про проверку и качество кода, Prettier — про форматирование. В проектах их часто используют вместе

Если нет npm-проекта

Если у вас один учебный файл script.js, не обязательно сразу ставить инструменты. Можно включить форматирование в редакторе или аккуратно поставить точки вручную

Но если файлов много, автоматизация экономит время:

один файл -> можно вручную
папка проекта -> Prettier
командная работа -> Prettier + ESLint

Настройка в редакторе

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

Типичный рабочий процесс:

1. Установить Prettier
2. Создать .prettierrc
3. Включить Format on Save
4. Сохранить script.js
5. Проверить, что стиль применился

Если работаете в команде, настройку лучше хранить в проекте, а не только в личном редакторе. Тогда все участники будут получать одинаковый результат

Что делать со старым проектом

В старом проекте не форматируйте весь код в один коммит вместе с логическими правками. Сначала отдельное форматирование, потом отдельные изменения поведения. Так проще проверять diff и понимать, где реальная правка, а где просто добавились точки с запятой

Частые ошибки

Думать, что ASI исправляет стиль

ASI помогает интерпретатору, но не форматирует ваши файлы

Запускать форматтер без проверки

Команда --write меняет файлы. Перед массовым запуском смотрите diff

Смешивать стили

В одном проекте лучше не писать половину файлов с ;, половину без. Выберите правило

Мини-задание

Создайте файл с несколькими строками без точек с запятой, настройте Prettier с "semi": true и выполните форматирование. Затем сравните файл до и после

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

• append JS: как добавить элемент или текст на страницу
• Как добавить справочник к полю в JavaScript
• A JavaScript error occurred in the main process: как исправить
• A JavaScript error occurred in the main process: причины и исправление