Форматирование JavaScript

Загрузить

0 символов

Браузерный инструмент форматирования кода для JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON с детальной конфигурацией, совместимой с Prettier, сжатием и обфускацией Terser. Встроенный редактор CodeMirror с предпросмотром в реальном времени, горячими клавишами, загрузкой и скачиванием файлов.

Варианты использования

При вставке сжатого стороннего JS-кода во время frontend-разработки для быстрого украшения разметки и упрощения чтения и отладки
Перед командными ревью кода для единообразного форматирования JavaScript/TypeScript-кода, устранения различий стиля в отступах, кавычках и точках с запятой, чтобы сосредоточиться на проверке логики
При наследовании legacy-проектов для форматирования в один клик старого неряшливо размеченного JS-кода, чтобы быстро понять структуру кода и иерархию логики
Перед продакшен-деплоем для сжатия и обфускации JavaScript-кода с помощью Terser, уменьшения размера файлов и повышения скорости загрузки веб-страниц
При написании JS/JSX-демо онлайн для поддержания кода в чистоте с форматированием в реальном времени, упрощая обмен с коллегами или сообществом
При изучении эффектов различных опций конфигурации Prettier для мгновенного предпросмотра результатов форматирования при настройке опций, понимания назначения таких параметров, как tabWidth и trailingComma
При обработке фрагментов кода с платформ вроде Stack Overflow или GitHub для автоматического исправления проблем с отступами и переносами строк
При написании JSON-конфигурационных файлов для автоматического форматирования отступов и переносов строк, предотвращения ошибок парсинга из-за неправильных запятых или скобок
При разработке CSS/HTML-страниц для комплексного форматирования JS+CSS+HTML-кода в одном проекте с сохранением единого стиля
Перед техническими собеседованиями для быстрого приведения в порядок JS-кода алгоритмических задач и улучшения восприятия кода за счет стандартизированной разметки

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

Откройте страницу инструмента форматирования JavaScript. Можно вставить код напрямую в левую область редактора или нажать кнопку загрузки для выбора локального файла (поддерживаются форматы .js/.ts/.jsx/.tsx/.css/.html/.json)
Выберите соответствующий тип языка: инструмент обычно распознает язык автоматически. При неточном распознавании выберите вручную в выпадающем списке между JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON
Настройте опции форматирования: можно выбрать быстрые пресеты стиля (default/modern/classic) или вручную настроить опции Prettier (ширина отступов, табуляция/пробелы, ширина строки, точки с запятой, кавычки, конечные запятые, скобки у стрелок)
Если нужно сжать код, переключитесь в режим сжатия и настройте опции сжатия Terser (включать ли compress, обфусцировать ли имена переменных, сжимать ли переменные верхнего уровня), уровень оптимизации CSS и опции сжатия HTML
Инструмент обрабатывает код в реальном времени. Правая область редактора сразу отображает отформатированный или сжатый результат, а нижняя строка состояния в реальном времени показывает статистику по количеству символов, байтам и степени сжатия
Используйте горячие клавиши для повышения эффективности: Ctrl+Shift+B запускает форматирование, Ctrl+Shift+M переключает в режим сжатия, Ctrl+Shift+O открывает файл, Ctrl+Shift+D скачивает результат, Ctrl+Shift+K очищает редактор
Когда результат вас устроит, нажмите кнопку копирования, чтобы скопировать результат в буфер обмена, или кнопку скачивания, чтобы сохранить как локальный файл; также можно нажать кнопку поделиться, чтобы сгенерировать URL-ссылку с кодом и конфигурацией для обмена с другими

Функции

Многоязычная поддержка: одновременно форматирует JavaScript, TypeScript, JSX, TSX, CSS, HTML и JSON — 7 популярных frontend-языков в одном инструменте для унифицированной обработки frontend-кода
Точная конфигурация в стиле Prettier: поддерживает все ключевые опции, включая tabWidth (ширина отступа: 2/4/8 пробелов), useTabs (табуляция vs пробелы), printWidth (ширина строки), semi (точки с запятой), singleQuote (одинарные vs двойные кавычки), trailingComma (конечные запятые), arrowParens (скобки у стрелочных функций) и другие
Функция сжатия кода: встроенный движок сжатия Terser с опциями продакшен-уровня: compress (оптимизация кода), mangle (обфускация имен переменных), toplevel (сжатие переменных верхнего уровня)
Специфичная оптимизация CSS: настраиваемые уровни оптимизации CSS с поддержкой сжатия CSS, удаления комментариев и пробелов
Опции сжатия HTML: конфигурация HTML minify со сворачиванием пробелов, удалением комментариев и удалением кавычек у атрибутов
Обработка в реальном времени: мгновенный предпросмотр форматирования при вводе — не нужно нажимать кнопки, чтобы увидеть результат разметки
Редактор CodeMirror: встроенный профессиональный редактор CodeMirror с подсветкой синтаксиса, нумерацией строк, сопоставлением скобок, сворачиванием кода и другими профессиональными функциями редактирования
Загрузка и скачивание файлов: поддерживает прямую загрузку локальных файлов .js/.ts/.jsx/.tsx/.css/.html/.json и скачивание обработанных файлов в один клик после форматирования
Поделиться по ссылке: сохраняет код и конфигурацию через hash URL и генерирует ссылки для общего доступа, которые позволяют коллегам воспроизвести точно такую же ситуацию форматирования
История: автоматически сохраняет историю форматирования в localStorage, можно в любой момент вернуться к предыдущим версиям кода и конфигурациям
Горячие клавиши: поддерживает комбинации, такие как Ctrl+Shift+B (Форматировать), Ctrl+Shift+M (Сжать), Ctrl+Shift+O (Открыть файл), Ctrl+Shift+D (Скачать), Ctrl+Shift+K (Очистить) и другие
Быстрые пресеты: доступны три пресета — default (по умолчанию), modern (современный), classic (классический) — для переключения между популярными стилями в один клик
Статистика символов: в реальном времени отображает количество символов, размер в байтах и степень сжатия в сравнении между исходным кодом и обработанным кодом
Примеры кода: встроенные примеры кода для всех языков, которые можно загрузить в один клик для быстрого ознакомления с функциями

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

Изменится ли логика JavaScript-кода после форматирования?

Нет. Форматирование только корректирует связанные с »разметкой« аспекты: пробелы, отступы, переносы строк, положение скобок, стиль кавычек и т.д., основано на преобразовании AST (абстрактного синтаксического дерева), структура AST кода до и после форматирования полностью совпадает, логика выполнения 100% идентична. Пока сам код синтаксически корректен и нормально разбирается, форматирование не изменит никакого поведения выполнения, можно смело использовать. Но сжатие (mangle), хотя логика также не меняется, требует внимания к особым сценариям вроде eval и экспорта глобальных переменных во избежание неправильной конфигурации.

Что делать, если результат форматирования инструмента отличается от форматирования в моем локальном VS Code/Prettier?

Логика форматирования этого инструмента по возможности соответствует официальному поведению Prettier. Если результаты отличаются, проверьте элементы конфигурации: полностью ли совпадают с обеих сторон основные опции tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens. Также обратите внимание на различия версий Prettier — есть небольшие различия в конфигурации по умолчанию между Prettier 2/3 (v3 по умолчанию trailingComma: all, v2 по умолчанию es5; с v2 arrowParens по умолчанию always). Если в вашем локальном проекте есть конфигурационный файл .prettierrc, сверьте опции из него и настройте их на веб-странице одинаково, тогда результаты форматирования будут совпадать.

Можно ли восстановить сжатый код? Можно ли восстановить имена переменных после mangle?

Отформатированный код полностью обратим — так как изменилась только разметка, все идентификаторы, логика полностью сохранены, повторное форматирование вернет все как было. Но сжатый код: часть с удаленными пробелами и комментариями можно переформатировать для восстановления разметки, но mangle (обфускация имен переменных) необратим — исходные значащие имена переменных userName стали a, этот процесс односторонний, автоматически восстановить исходные имена невозможно. Если нужно отлаживать сжатый код в продакшен-среде, следует настроить генерацию файлов Source Map, через Source Map выполнять отображение на позиции исходного кода. Поэтому перед сжатием обязательно сохраняйте исходный несжатый код!

Какие браузеры поддерживаются? Можно ли использовать на мобильном телефоне?

Этот инструмент поддерживает все современные браузеры: последние версии Chrome, Firefox, Safari, Edge работают нормально. Браузер IE не поддерживается (да и никто сейчас не использует IE для разработки). Адаптивная разметка адаптирована под экраны мобильных телефонов, но редактирование кода на маленьких экранах оставляет желать лучшего, рекомендуется все же использовать в десктопном браузере, на большом экране эффективность выше. Все вычисления форматирования и сжатия выполняются локально в браузере, не требуют загрузки кода на сервер, код не покидает ваш браузер, безопасно и надежно.

Почему некоторый код не форматируется, выдается ошибка разбора?

Инструмент форматирования сначала должен разобрать код в AST для работы, если в коде есть синтаксические ошибки (несоответствие скобок, незакрытые строки, неправильные ключевые слова, лишние запятые и т.д.), парсер не может понять структуру кода и выдаст ошибку. Сначала проверьте синтаксические ошибки в самом коде: посмотрите, есть ли сообщения об ошибках в консоли, есть ли в редакторе красные волнистые линии, указывающие на положение ошибки, после исправления синтаксических ошибок форматирование будет работать нормально. Также убедитесь, что выбран правильный языковой режим, код JSX/TSX не должен быть выбран как обычный JS.

Будет ли мой код загружен на сервер? Безопасен ли код?

Нет. Все форматирование, сжатие, подсветка синтаксиса полностью выполняются локально в вашем браузере через JavaScript, код не отправляется ни на какой сервер, полностью обрабатывается на вашем устройстве. Можно протестировать при отключенной сети: после отключения сети инструмент все равно нормально работает. Функция обмена ссылками кодирует код и конфигурацию в hash URL, нажатие поделиться только генерирует URL, код не загружается — но если вы отправите ссылку другим, другие при открытии ссылки увидят ваш код, поэтому не делитесь чувствительным кодом через ссылки.

Можно ли форматировать однофайловые компоненты Vue (.vue-файлы)? А Svelte?

В настоящее время многоязычная поддержка этого инструмента включает JS/TS/JSX/TSX/CSS/HTML/JSON, однофайловые компоненты Vue (SFC) с <template>/<script>/<style> и компоненты Svelte пока не поддерживают прямое целостное форматирование, но вы можете отдельно скопировать часть script (JS/TS), часть style (CSS), часть template (HTML), выбрать соответствующий язык и форматировать по отдельности. В дальнейшем планируется добавить поддержку форматирования Vue/Svelte SFC.

Как настроить единые правила форматирования для команды?

Для единых правил в команде рекомендуется трехуровневое взаимодействие: ① поместить .editorconfig в корневой каталог проекта для унификации базовых настроек редактора (отступы, символы переноса строки, кодировка); ② использовать Prettier и поместить конфигурационный файл .prettierrc в проект, все люди и CI форматируют с этой конфигурацией, в этом инструменте также можно выбрать соответствующие опции для соответствия конфигурации; ③ использовать ESLint + eslint-config-prettier для отключения стилевых правил ESLint, оставить только проверку качества кода. Настроить автоматическое форматирование в редакторе при сохранении (установить расширение Prettier для VS Code, задать editor.formatOnSave: true), добавить шаг lint в CI для проверки формата, гарантируя, что отправляемый код соответствует правилам.

В чем преимущества конечных запятых (trailingComma)? Стоит ли включать?

Настоятельно рекомендуется включать конечные запятые (хотя бы уровень es5, рекомендуется уровень all). Преимущества конечных запятых: ① Более чистые Git diff: при добавлении последнего элемента не нужно изменять предыдущую строку для добавления запятой, только diff добавленной строки, загрязнение diff предыдущей строки из-за добавления запятой не происходит; ② удобнее при переупорядочивании элементов, не нужно обрабатывать проблему конечной запятой; ③ современные браузеры и Node.js полностью поддерживают конечные запятые, старый IE не поддерживает, но сейчас не нужно учитывать IE. Единственный недостаток — одна лишняя запятая, но по сравнению с приносимым удобством это полностью оправдано. Prettier v3 по умолчанию использует all.

Нужно ли включать mangle при сжатии? В чем разница между compress и mangle?

Для продакшен-сжатия рекомендуется включать и compress, и mangle, это две независимые опции сжатия: compress — оптимизация кода (сворачивание констант, удаление мертвого кода, упрощение выражений и т.д.), изменяет структуру кода только когда это упрощает, не изменяет имена переменных; mangle — сокращение имен локальных переменных, замена длинных имен переменных на односимвольные, это один из самых крупных источников уменьшения объема. Пока ваш код не предназначен для использования как библиотека, где внешний код напрямую вызывает переменные по именам, или не использует eval для динамического доступа к именам переменных, mangle безопасен и может значительно уменьшить объем. Если это открытая библиотека, в которой нужно сохранить имена API, настройте mangle.reserved для сохранения экспортируемых имен.

Почему при форматировании JSON автоматически экранируются некоторые символы?

Спецификация JSON имеет строгие синтаксические требования: строки должны быть в двойных кавычках, не должно быть конечных запятых, специальные символы должны быть экранированы (перенос строки → \n, кавычки → \", обратная косая черта → \\, Tab → \t и т.д.). Если в вашей JSON-строке есть неэкранированные специальные символы, при форматировании они будут автоматически экранированы в соответствии со спецификацией JSON, это правильное поведение. Обратите внимание: JSON — это не JavaScript, в JSON нельзя писать комментарии, использовать одинарные кавычки, использовать undefined, все это приведет к неудаче разбора JSON.

Как сделать, чтобы параметры стрелочных функций всегда были в скобках? Или без скобок?

Настройте опцию arrowParens: always — всегда добавлять скобки ((x) => x), это значение по умолчанию в Prettier v2+, преимущество в том, что при добавлении/удалении параметров не нужно добавлять/удалять скобки, diff чище; avoid — опускать скобки при одном параметре (x => x), код лаконичнее. Выбирайте в соответствии с командным стилем, оба стиля не имеют правильных или неправильных, главное — единообразие. Примечание: аннотации типов параметров, параметры по умолчанию, деструктурированные параметры при любой конфигурации будут в скобках.

Может ли форматирование автоматически исправить стилевые проблемы, о которых сообщает ESLint?

Этот инструмент — форматирование в стиле Prettier, он может исправлять только стилевые проблемы, за которые отвечает Prettier (отступы, кавычки, точки с запятой, конечные запятые, ширина строки, пробелы и т.д.). Проблемы качества кода, о которых сообщает ESLint (например, неиспользуемые переменные, отсутствие return, проблема с ===), являются логическими проблемами, инструмент форматирования не может автоматически их исправить, требуется ручное изменение. Если в вашем ESLint настроен eslint-config-prettier, то после форматирования Prettier ESLint больше не будет сообщать об ошибках, связанных со стилем, оставшиеся проблемы качества исправьте вручную.

Каков максимальный размер поддерживаемого файла кода? Будет ли тормозить при форматировании больших файлов?

Поскольку форматирование выполняется локально в браузере, поддерживаемый размер файла зависит от производительности вашего устройства, обычно JS-файлы от нескольких десятков КБ до нескольких МБ обрабатываются нормально, отдельные JS-файлы обычных проектов полностью покрываются. Если это особенно большие упакованные JS-файлы (десятки МБ), возможно подтормаживание или даже нехватка памяти, такие сверхбольшие файлы рекомендуется локально обрабатывать через командную строку Node.js+Prettier/Terser. Размер отдельных исходных файлов при повседневной разработке обычно находится в пределах обрабатываемого диапазона.

Почему при нажатии Ctrl+Shift+B в Chrome открывается менеджер закладок?

Это конфликт горячих клавиш по умолчанию в браузере Chrome: Ctrl+Shift+B — это сочетание Chrome для показа/скрытия панели закладок, приоритет горячих клавиш браузера выше, чем горячих клавиш веб-страницы JS, поэтому они перехватываются Chrome. Решение: ① выполнять операцию через кнопку форматирования; ② если вы пользователь Mac, сочетание Cmd+Shift+B не конфликтует с Chrome; ③ можно изменить горячие клавиши браузера в настройках Chrome; ④ можно сначала сфокусироваться внутри редактора, в некоторых случаях фокус редактора может перехватить горячую клавишу. Если в других браузерах также есть конфликты горячих клавиш, всегда можно выполнять операции через кнопки.

Устранение неполадок

При форматировании возникает »ошибка синтаксического разбора«, форматирование невозможно

В коде есть синтаксические ошибки: несоответствие скобок, незакрытые строки, отсутствующие ключевые слова, лишние запятые и т.д. Синтаксические ошибки приводят к неудаче парсинга AST, что делает форматирование невозможным. Сначала исправьте синтаксические ошибки Неправильно выбран языковой режим: например, код JSX/TSX выбран как JavaScript, обобщенный синтаксис ошибочно принимается за JSX-теги, или наоборот. Вручную выберите правильный тип языка Содержит экспериментальный синтаксис: код использует слишком новые предложения синтаксиса JavaScript, которые еще не стали стандартом (например, декораторы, оператор конвейера), парсер не поддерживает их Файл имеет BOM-заголовок: три байта UTF-8 BOM (EF BB BF) в начале, некоторые парсеры могут не обработать, попробуйте сохранить как UTF-8 без BOM Смешанный код других языков: например, шаблонные языки, встроенные в HTML (EJS, Handlebars, директивы шаблонов Vue) — это не чистый JS/HTML, парсер не может распознать В коде есть незакрытый блочный комментарий: /* без соответствующего */, незакрытый комментарий приводит к тому, что весь последующий код рассматривается как комментарий Неоднозначность регулярных выражений: некоторые места, выглядящие как деление/операторы, на самом деле являются литералами регулярных выражений, парсер ошибочно распознает. Можно добавить точку с запятой перед регулярным выражением для устранения неоднозначности

Ошибка при сжатии (Minify), сжатие невозможно

Синтаксические ошибки в коде: как и форматирование, сжатие основано на AST, код должен быть синтаксически корректным для сжатия, сначала исправьте синтаксические ошибки Используются import/export ES Module, но тип модуля не помечен правильно, или конфигурация сжатия не соответствует типу модуля Проблемы при mangle имен свойств: если включен mangle имен свойств (по умолчанию выключен), динамический доступ к свойствам obj['key'] приведет к ненахождению свойств, не включайте property mangle без необходимости В коде есть eval() или инструкции with: Terser при встрече eval/with может ошибаться в mangle, так как eval может динамически обращаться к именам переменных в области видимости, избегайте eval в продакшен-коде Ошибка в конфигурации сохраняемых имен: если настроено mangle.reserved, но с опечатками или пропущены обязательные сохраняемые имена (например, глобальные библиотеки вроде jQuery, $), это может привести к ошибкам во время выполнения Проблема конфигурации toplevel-сжатия: если ваш код работает в глобальной области видимости, а не упакован в IIFE/модуль, включение compress.toplevel: true может нарушить ссылки на глобальные переменные Целевая версия браузера настроена слишком старой: при сжатии Terser может использовать синтаксис, не поддерживаемый целевыми браузерами, можно настроить версию ecma для указания версии синтаксиса выходного JS

Китайский текст/китайские комментарии отображаются с кракозябрами при форматировании

Кодировка файла не UTF-8: загруженный локальный файл имеет китайскую кодировку GBK/GB2312 и т.д., инструмент по умолчанию парсит как UTF-8, что приводит к кракозябрам. Пересохраните файл в кодировке UTF-8 в редакторе перед загрузкой Кодировка страницы браузера случайно изменена: хотя сейчас браузеры по умолчанию используют UTF-8, некоторые старые браузеры или специальные настройки могут иметь неправильную кодировку, проверьте в меню браузера, что кодировка страницы установлена как UTF-8 Файл имеет UTF-8 BOM-заголовок: хотя BOM обычно не вызывает кракозябры, некоторые парсеры обрабатывают BOM некорректно, можно удалить BOM в редакторе и сохранить как UTF-8 без BOM Проблема преобразования кодировки при копировании-вставке: при копировании кода из некоторых старых программ (например, старый Блокнот, Word) специальные символы (например, китайские кавычки, полноширинные пробелы) могут быть неправильно преобразованы, старайтесь копировать из современных редакторов вроде VS Code Проблема со шрифтом: некоторые моноширинные шрифты плохо поддерживают китайский язык, что приводит к аномальному отображению, это не проблема кодировки, а только проблема отображения шрифта, просто смените моноширинный шрифт с поддержкой китайского Специальные Unicode-символы: код содержит emoji, пробелы нулевой ширины, управляющие символы и другие специальные невидимые символы, которые могут вызывать аномалии отображения или ошибки форматирования, можно включить отображение невидимых символов в редакторе для проверки Проблема gzip-сжатия или прокси: если кракозябры появляются при доступе после развертывания, проверьте, правильно ли сервер установил заголовок ответа Content-Type: application/javascript; charset=utf-8

Форматирование кода JSX/TSX не удается или ошибка разбора

Языковой режим выбран как JavaScript, а не JSX/TSX: обычный JS-парсер не распознает синтаксис <тегов> и будет ошибочно принимать JSX-теги за операторы сравнения, вручную выберите язык JSX или TSX Неоднозначность обобщенного синтаксиса в TSX: обобщенный параметр <T> в TSX может быть ошибочно принят за JSX-тег, например const f = <T>(x: T) => x, можно добавить запятую после <T> <T,> для устранения неоднозначности (это общепринятый синтаксис в TSX) Незакрытые JSX-теги: JSX требует, чтобы все теги были правильно закрыты, самозакрывающиеся теги должны иметь />, в отличие от HTML, <img> нужно писать как <img/> Проблема со скобками JS-выражений в JSX: JS-выражения в {} должны быть правильно закрыты, {obj.prop} без } приведет к путанице в последующем разборе Проблема с коротким синтаксисом Fragment: <></> пустые теги требуют поддержки React 16+ и должны быть правильно закрыты; при использовании <Fragment> требуется правильный импорт Проблема с кавычками значений атрибутов JSX: значения атрибутов JSX, если это строки, должны быть в кавычках (двойных), если выражения — в {}, не смешивайте Расширение TSX-файла — .ts, а не .tsx: TypeScript-парсер включает разбор JSX только при расширении .tsx, написание JSX с расширением .ts вызовет ошибку, используйте правильное расширение

После форматирования отступы неправильные, не соответствуют ожидаемым

Неправильная конфигурация tabWidth: проверьте, настроена ширина отступа 2 или 4, в командах обычно 2 пробела, если ожидается 4 пробела, нужно вручную настроить опцию tabWidth Неправильная конфигурация useTabs: если в команде используется Tab для отступов, а у вас настроены пробелы, или наоборот, проверьте правильность опции useTabs В коде есть синтаксические ошибки: синтаксические ошибки приводят к аномальной структуре AST, отступы при форматировании получаются неупорядоченными, сначала исправьте синтаксические ошибки, на которые указывают красные волнистые линии Смешанные Tab и пробелы: в исходном коде в некоторых местах отступы сделаны Tab, в некоторых пробелами, форматирование унифицирует до настроенного стиля, но если исходный код слишком запутан, может потребоваться несколько форматирований Слишком маленькое значение printWidth: если ширина строки установлена слишком маленькой (например, 40), код будет часто переноситься, отступы выглядят неупорядоченно, установка 80 или 100 более подходящая Настройки параметров разметки вроде bracketSameLine/arrowParens не соответствуют ожидаемым: положение фигурных скобок, скобки стрелочных функций и другие стили определяются конфигурацией, это не проблема отступов, просто настройте соответствующие опции Конфликт EditorConfig с конфигурацией локального редактора: если в локальном редакторе используется .editorconfig для автоматической настройки отступов, и опции, настроенные на веб-странице, отличаются, результаты форматирования с двух сторон будут несовпадать, просто унифицируйте конфигурацию

Горячие клавиши не работают, нажатие не дает реакции

Фокус не на редакторе: горячие клавиши срабатывают только когда редактор находится в фокусе, если фокус на кнопке, в поле ввода или в другом месте страницы, горячие клавиши не сработают, сначала кликните по области редактора для фокусировки Конфликт горячих клавиш браузера: некоторые сочетания (например Ctrl+Shift+B в Chrome открывает панель закладок, Ctrl+Shift+O в Firefox открывает журнал) заняты браузером, можно выполнять операции по кнопкам, или попробовать использовать Cmd вместо Ctrl (Mac) Проблема с методом ввода: в режиме китайского метода ввода некоторые горячие клавиши могут быть перехвачены, переключитесь на английский метод ввода и попробуйте горячие клавиши снова Заняты другими расширениями/плагинами: установленные в браузере расширения горячих клавиш, скрипты Tampermonkey, прокси-плагины могли занять горячие клавиши, попробуйте открыть страницу в режиме инкогнито Конфликт системных горячих клавиш: глобальные горячие клавиши операционной системы или другого запущенного ПО (например, программы для скриншотов, методы ввода, IDE) заняли соответствующие комбинации, можно изменить горячие клавиши в другом ПО или использовать кнопки этого инструмента Различия клавиатур Mac/Windows: обратите внимание, на Mac используется клавиша Cmd (⌘), на Windows/Linux — клавиша Ctrl, не смешивайте; Option на Mac соответствует Alt на Windows Ограничения безопасности браузера: некоторые горячие клавиши, связанные с доступом к файлам, могут быть ограничены политикой безопасности браузера и не могут быть полностью смоделированы через JS, при необходимости напрямую кликайте по соответствующим кнопкам для операций

Глоссарий

Prettier: Самый популярный на сегодняшний день инструмент форматирования frontend-кода с философией opinionated. Поддерживает несколько языков, включая JS/TS/CSS/HTML/Markdown, принудительно унифицирует стиль кода и прекращает споры о стиле в команде.
Terser: Современный инструмент сжатия JavaScript, ES6+-совместимый форк UglifyJS. Поддерживает сжатие и обфускацию синтаксиса ES6+ и является компрессором по умолчанию в современных инструментах сборки, таких как Webpack, Rollup и Vite.
UglifyJS: Классический инструмент сжатия JavaScript, предшественник Terser. Однако поддерживает только синтаксис ES5 и более ранний без новых возможностей ES6+; в новых проектах обычно используется Terser в качестве замены.
AST (Abstract Syntax Tree): Абстрактное синтаксическое дерево, древовидное представление синтаксической структуры исходного кода, где каждый узел представляет синтаксическую структуру в коде. Инструменты вроде Babel, Prettier, Terser и ESLint все основаны на AST.
ESLint: Самый популярный инструмент инспекции кода (Linter) в экосистеме JavaScript/TypeScript. Служит для поиска проблем качества кода и унификации стиля кода, может использоваться вместе с Prettier.
EditorConfig: Межредакторный конфигурационный файл для унификации стиля кода. Определяет базовые настройки, такие как стиль отступов, размер отступов, символы переноса строки и кодировка, обеспечивая согласованное открытие одного проекта разными редакторами.
CodeMirror: Браузерный компонент редактора кода с профессиональными функциями редактирования: подсветка синтаксиса, нумерация строк, сопоставление скобок, сворачивание кода и несколько курсоров. Один из основных вариантов для веб-редакторов кода.
minify: Процесс минимизации объема кода без изменения логики путем удаления пробелов, комментариев, сокращения имен переменных и оптимизаций кода. Используется в продакшене для повышения скорости загрузки.
mangle: Шаг во время сжатия, при котором имена переменных, функций и параметров сокращаются до односимвольных. Значительно уменьшает объем кода, одновременно делая его сложнее для чтения — также известен как обфускация имен переменных.
beautify: Также называемый форматированием кода: сжатый или неопрятный код переразмечается с отступами, переносами строк и пробелами для улучшения читаемости — противоположность minify.
trailing comma: Запятая после последнего элемента в объектах, массивах или параметрах функций. Облегчает добавление новых элементов благодаря более чистым Git diff и поддерживается в средах ES5+.
arrow parens: Указывает, должны ли параметры стрелочных функций с одним параметром заключаться в скобки, например x => x (без скобок) vs. (x) => x (со скобками).
printWidth: Количество символов в строке, при превышении которого форматирование автоматически переносит строку. Prettier по умолчанию использует 80 символов, команды могут настроить на 100 или 120 в зависимости от размера монитора.
semicolons: Указывает, ставить ли точку с запятой в конце инструкций JavaScript. JS имеет механизм ASI автоматической вставки точки с запятой, но в большинстве сценариев все же рекомендуется использовать точки с запятой во избежание неожиданностей.
single quote: Использование одинарных кавычек вместо двойных для строк. В JS функциональность полностью эквивалентна, это только стилевое предпочтение. Спецификация JSON требует двойные кавычки.
double quote: Использование двойных кавычек для оборачивания строк. Стиль по умолчанию многих языков и формат строк, требуемый спецификацией JSON.
tab width: Количество пробелов на каждый уровень отступа. В frontend-сообществе распространены 2 пробела, в backend-языках 4 пробела.
BOM (Byte Order Mark): Byte Order Mark, три байта EF BB BF в начале файлов с кодировкой UTF-8 для маркировки кодировки. В некоторых сценариях может вызывать ошибки парсинга JS.
UTF-8: Unicode Transformation Format 8 бит, стандартная кодировка файлов для веб- и frontend-проектов. Поддерживает все символы Unicode и является рекомендуемой кодировкой по умолчанию.
source map: Файл, который отображает сжатый/транспилированный код на исходные позиции в исходном коде. Используется для отладки в продакшене для локализации номеров строк исходного кода при возникновении ошибок в сжатом коде.

Таблица соответствия ключевых опций Prettier

Имя опции	Назначение	Возможные значения	Значение по умолчанию	Описание
`tabWidth`	Ширина отступа (количество пробелов)	`2, 4, 8`	`2`	Действует когда useTabs=false, 2 пробела распространены во frontend
`useTabs`	Отступ символами Tab	`true/false`	`false`	true = отступ табуляцией, false = отступ пробелами
`printWidth`	Ограничение ширины строки (количество символов)	`80, 100, 120`	`80`	При превышении ширины автоматический перенос, не жесткое ограничение
`semi`	Добавление точки с запятой в конце инструкций	`true/false`	`true`	При false точки с запятой добавляются только где ASI может отказать
`singleQuote`	Использование одинарных кавычек	`true/false`	`false`	true = одинарные, false = двойные, атрибуты JSX всегда двойные
`trailingComma`	Режим конечных запятых	`none, es5, all`	`all (v3+)`	none без запятых, es5 для объектов/массивов, all включая параметры функций
`arrowParens`	Скобки у одно-параметрических стрелочных функций	`avoid, always`	`always (v2+)`	avoid — без скобок при одном параметре, always — всегда со скобками
`bracketSpacing`	Пробелы внутри фигурных скобок объектов	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	Позиция закрывающей скобки HTML/JSX	`true/false`	`false`	true — закрывающая скобка в конце последней строки, false — отдельной строкой
`vueIndentScriptAndStyle`	Отступы внутри script/style в Vue-файлах	`true/false`	`false`	Нужно ли отступать код внутри тегов script и style в Vue SFC

Пример сравнения кода JavaScript до и после сжатия

Оптимизация	Код после форматирования (версия для разработки)	Код после сжатия (продакшен-версия)	Процент уменьшения объема
Пробелы и переносы	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
Удаление комментариев	`// Вычисляет сумму двух чисел function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
Mangle локальных переменных	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	~40%
Сворачивание констант	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
Упрощение булевых выражений	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
Полный пример (с несколькими оптимизациями)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

Шпаргалка по горячим клавишам

Сочетание (Win/Linux)	Сочетание (Mac)	Назначение	Частота использования
`Ctrl+Shift+B`	`Cmd+Shift+B`	Выполнить форматирование/украшение	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	Переключить режим форматирования/сжатия	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	Открыть локальный файл	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	Скачать обработанный файл	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	Очистить содержимое редактора	★★★
`Ctrl+S`	`Cmd+S`	Скачать (сохранить) файл	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	Поиск / Поиск и замена	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	Отмена / Повтор	★★★★★
`Ctrl+/`	`Cmd+/`	Переключить строчный комментарий	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	Увеличить отступ / Уменьшить отступ (при выборе)	★★★★
`Alt+Клик`	`Option+Клик`	Добавить несколько курсоров	★★★
`Ctrl+D`	`Cmd+D`	Выделить следующее одинаковое слово	★★★
`Home / End`	`Cmd+← / Cmd+→`	Начало строки / Конец строки	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	Начало файла / Конец файла	★★★