Настройка красивой одинарной кавычки не соблюдается в файлах .tsx (код VS).

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

Проблема

Я пытаюсь использовать настройку одинарных кавычек в Prettier, однако форматирование сохраняет двойные кавычки. Что, черт возьми, происходит?!

Я создал файл .prettierrc с этой единственной настройкой:

{
  "singleQuote": true
}

Когда я форматирую документы (файлы .tsx), Prettier работает без проблем. Вы можете перепроверить это, взглянув на окно вывода в VSCode и выбрав «Prettier» в раскрывающемся списке справа:

Несмотря на то, что вывод ясно показывает, что для параметра singleQuote установлено значение true, я все еще вижу двойные кавычки в своих файлах при форматировании файлов.

На всякий случай я также перепроверил все остальные параметры singleQuote в конфигурации VS Code, и всем им было присвоено значение true.

Решение

В дополнение к настройке singleQuote существует также настройка под названием jsxSingleQuote. И, конечно же, значение по умолчанию для этого — false.

Решение состоит в том, чтобы также установить для параметра jsxSingleQuote значение true. Это заменит все двойные кавычки в ваших файлах .tsx на одинарные.

Обратите внимание, что вы также захотите сохранить настройку singleQuote, если хотите использовать одинарные кавычки в файле .ts. Для одинарных кавычек в файлах .tsx просто установите для параметра jsxSingleQuote значение true.

Вот «полный» .prettierrc :

{
  "singleQuote": true,
  "jsxSingleQuote": true
}