VSCode неправильно вставляет точки с запятой в проект React Typescript при форматировании при сохранении с помощью Prettier

Я работаю с React и Typescript в VSCode, используя Prettier в качестве средства форматирования по умолчанию. Внутри моего ~/.vscode/settings.json я установил форматирование документа при сохранении:

{
  "typescript.tsdk": "node_modules\\typescript\\lib",
  "cmake.configureOnOpen": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "modifications",

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
    "source.sortMembers": true
  }
}

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

  • Исходный формат
const myCallback = useCallback(() => {
  return myDependency1 + myDependency2 + myDependency3 + myDependency4 > 0;
},[myDependency1, myDependency2, myDependency3, myDependency4])
  • После одного сохранения
const myCallback = useCallback(() => {
  return myDependency1 + myDependency2 + myDependency3 + myDependency4 > 0;
},
[myDependency1, myDependency2, myDependency3, myDependency4]) 
  • После второго сохранения
const myCallback = useCallback(() => {
  return myDependency1 + myDependency2 + myDependency3 + myDependency4 > 0;
};,
[myDependency1, myDependency2, myDependency3, myDependency4]) 

Это нарушает код, поскольку это недопустимый символ, поэтому мне нужно установить "editor.formatOnSave": false, чтобы предотвратить это, что не идеально.

Что странно, так это то, что я могу Ctrl+Shift+P > Форматировать документ или Форматировать документ с помощью... затем выбрать Prettier - и файл исправлен без добавления проблемных точек с запятой.

Я также пытался использовать // prettier-ignore и //eslint-disable-next-line, но это не меняет поведение.

Возможно, это ошибка, вызванная расширением Prettier, VSCode или другим расширением или библиотекой (возможно, ESLint?) — хотя я не могу найти проблему, указанную ни в одном из этих проектов на GitHub. Поэтому мой реальный вопрос заключается в том, что я могу сделать, чтобы выяснить, что вызывает это, чтобы я мог сообщить об этом правильному проекту или, возможно, просто исправить любую неправильную конфигурацию, которую я сделал?

Просто FWIW, я не могу это воспроизвести. Не похоже, что расширение обновлялось более двух месяцев. Какие версии вы используете? Я использую esbenp.prettier-vscode. v9.9.0, Prettier v2.8.0 и VS Code v1.73.1. О: Версия 1.73.1⏎ Коммит: 6261075646f055b99068d3688932416f2346dd3b⏎ Дата: 2022-11-09T03:54:53.913Z⏎ Электрон: 19.0.17⏎ Хром: 102.0.5005.167 ⏎ Node.js: 16.14.2⏎ V8: 10.2.154.15- электрон.0⏎ ОС: Linux x64 5.8.0-29-generic⏎ Песочница: Нет

T.J. Crowder 24.11.2022 14:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
1
182
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это баг в Prettier.

Либо измените formatOnSaveMode на "file", либо обновитесь до версии Prettier выше или равной 2.8.

Другие вопросы по теме