Почему Prettier в VS Code не форматирует .ts файлы

Проблема с vs code форматирование в prettier vs code часто возникает из‑за локальной конфигурации .prettierrc с опциями "requirePragma": true и "insertPragma": true. Эти настройки требуют специальный комментарий /** @format */ в начале файла — без него prettier vscode завершает форматирование «успешно», но не меняет код, даже простой let a = 10;. Локальный конфиг имеет приоритет над settings.json VS Code, поэтому добавьте pragma вручную или отключите эти опции, чтобы vs code форматирование кода работало для всех .ts файлов.

Содержание

• Почему Prettier в VS Code не форматирует некоторые .ts файлы
• Локальная конфигурация Prettier и почему игнорируются настройки VS Code
• Что такое requirePragma и insertPragma в Prettier
• Как добавить pragma-комментарий и принудительно форматировать
• Пошаговая настройка Prettier в VS Code
• Горячие клавиши и команды для vs code форматирование кода
• Интеграция Prettier с ESLint и решение других проблем
• Источники
• Заключение

Почему Prettier в VS Code не форматирует некоторые .ts файлы

Представьте: вы пишете let a = 10; с лишними пробелами, жмете Format Document, и лог кричит «Formatting completed in 23ms», но ничего не меняется. Знакомо? Это классика с prettier vs code и prettier typescript. Два файла из одной папки работают, остальные — нет. Почему?

В вашем логе ключ: “Using local configuration (VS Code configuration will not be used)”. Prettier находит .prettierrc (или prettier.config.js в проекте) и следует ему слепо. А там "requirePragma": true — это значит, форматирование применяется только к файлам с pragma‑комментарием вроде /** @format */ или /** @prettier */ в самом верху.

Почему один файл работает? Вероятно, у него уже есть pragma (от предыдущего форматирования с "insertPragma": true). В /home/sergey/www/icod-elysia/src/index.ts его нет — вот и тишина. Локальный конфиг ищется рекурсивно от файла вверх по директориям, так что даже если в корне проекта есть .prettierrc, он рулит всем.

Это не баг VS Code или расширения esbenp.prettier-vscode. Это фича Prettier для командной работы: чтобы не переформатировать чужой код случайно. Но для solo‑разработки бесит.

Локальная конфигурация Prettier и почему игнорируются настройки VS Code

Prettier vs code настройка простая, но с подвохом. Ваш settings.json с "defaultFormatter": "esbenp.prettier-vscode" и "editor.formatOnSave": true — идеален. Но если в проекте есть локальный конфиг, он переопределяет всё.

Prettier ищет файлы по порядку:

• .prettierrc (JSON/YAML)
• prettier.config.js/cjs
• package.json с секцией "prettier"
• .prettierrc.toml

Находит — и игнорирует VS Code. В логе ваши опции: tabWidth: 4, printWidth: 120, semi: false — это из локального файла. Чтобы проверить: откройте терминал в VS Code, npx prettier --find-config /home/sergey/www/icod-elysia/src/index.ts. Покажет путь к конфигу.

Хотите глобальные настройки? В settings.json добавьте "prettier.requireConfig": false — тогда Prettier пропустит локал и возьмет VS Code. Или укажите "prettier.configPath": "none". Но осторожно: команда может ругаться на несоответствия.

А если конфига нет? Тогда VS Code рулит. Но у вас он есть — вот почему «local configuration».

Что такое requirePragma и insertPragma в Prettier

Давайте разберем эти опции по полочкам. Согласно документации Prettier, "requirePragma": true — барьер: без /** @format */ в первых строках форматирование скипается. Лог покажет «завершено», но delta нулевой.

"insertPragma": true — помощник: при первом форматировании Prettier сам впихнет pragma в начало. Поэтому один ваш .ts файл «поумнел» и теперь форматируется.

Почему это нужно? В больших командах pragma — сигнал «ок, форматируй меня». Без него Prettier не трогает legacy‑код. В вашем случае для prettier typescript это убивает workflow.

Отключить просто: в .prettierrc поставьте "requirePragma": false, "insertPragma": false. Сохраните, перезапустите Prettier (Developer: Reload Window). Теперь vs code форматирование заработает везде.

Но если команда требует pragma — добавляйте вручную. Или скриптом: find src -name "*.ts" -exec sed -i '1i /** @format */' {} +.

Как добавить pragma-комментарий и принудительно форматировать

Быстрое решение для /home/sergey/www/icod-elysia/src/index.ts: откройте файл, вставьте в самую первую строку:

/** @format */

let a = 10;

Сохраните, Format Document (Shift+Alt+F). Бум — пробелы улетели. Почему? Pragma есть, prettier vs code доволен.

Для всех файлов разом: используйте команду Format Document (Forced) из палитры (Ctrl+Shift+P). Она игнорирует requirePragma и .prettierignore, как указано в репозитории prettier-vscode. Идеально для теста.

Автоматически? В settings.json:

{
 "prettier.insertPragma": true,
 "prettier.requirePragma": false
}

Но если локальный конфиг перебивает — сначала "prettier.requireConfig": false.

Проверили на пустом файле? Pragma спасет даже let a = 10; .

Пошаговая настройка Prettier в VS Code

Как настроить prettier vs code с нуля или пофиксить вашу проблему:

1. Установите расширение esbenp.prettier-vscode (если нет).
2. В settings.json (Ctrl+, → Open Settings JSON):

{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
 "editor.formatOnPaste": false,
 "[typescript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true
 },
 "prettier.requireConfig": false, // Игнор локала
 "prettier.configPath": "none" // Или явно none
}

3. Удалите/отредактируйте .prettierrc: "requirePragma": false.

4. Перезагрузите: Ctrl+Shift+P → Developer: Reload Window.

5. Тест: создайте .ts, набросайте кривой код, Shift+Alt+F.

Если prettier скачать заново — через marketplace. Для npm: npm i -D prettier. Но расширение самодостаточно.

Теперь prettier vs code настройка вечна.

Горячие клавиши и команды для vs code форматирование кода

Горячая клавиша форматирования vs code — Shift+Alt+F (Format Document). Работает с Prettier по умолчанию.

Другие:

• Ctrl+Shift+P → Format Document (Forced) — обходит pragma.
• Ctrl+S с formatOnSave — авто на сохранении.
• Ctrl+Shift+P → Prettier: Format Selection — только выделенное.

Перенастройте: Ctrl+K Ctrl+S → search “format”. Назначьте на F2 или что угодно.

В логе “parser: typescript” — хорошо, Prettier угадал. Если нет — укажите explicitly в конфиге.

Shortcuts спасут от рутины.

Интеграция Prettier с ESLint и решение других проблем

Vs code eslint prettier — частая связка. ESLint лLintит, Prettier форматирует. Конфликт? Установите eslint-config-prettier и eslint-plugin-prettier.

В .eslintrc:

{
 "extends": ["prettier"],
 "plugins": ["prettier"],
 "rules": { "prettier/prettier": "error" }
}

В VS Code: расширения ESLint + Prettier. settings.json:

"eslint.format.enable": true,
"editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
}

Проблемы:

• .prettierignore блокирует? Forced format.
• Несовпадение опций? "prettier.resolveGlobalModules": true.
• Медленно? Кэш: Ctrl+Shift+P → Prettier: Clear Cache.

Для vs code eslint prettier — порядок: ESLint fix, потом Prettier.

Источники

1. Prettier in VS Code does not format some of the files — Обсуждение проблемы с pragma в локальной конфигурации: https://stackoverflow.com/questions/79875813/prettier-in-vs-code-does-not-format-some-of-the-files
2. prettier/prettier-vscode — Документация по расширению, forced format и приоритету конфигов: https://github.com/prettier/prettier-vscode
3. Options — Описание requirePragma и insertPragma в Prettier: https://prettier.io/docs/options
4. Configuration File — Порядок поиска локальных конфигураций Prettier: https://prettier.io/docs/configuration

Заключение

В итоге, vs code форматирование с prettier vs code ломается на requirePragma: true без pragma — добавьте /** @format */ или отключите в .prettierrc. Локал всегда босс, но "prettier.requireConfig": false вернет контроль VS Code. Настройте formatOnSave, hotkeys вроде Shift+Alt+F — и код всегда чистый. Для prettier typescript и команд — pragma must‑have. Тестируйте на index.ts, и проблема уйдет навсегда.