Как исправить конфликт prettier и vscode? Почему vscode ведет себя так странно?

Question

[lebedev112]

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

Очень странная ошибка, которая по какой-то причине воспроизводится на моей машине. С таким багом раньше не сталкивался.

В чем проблема: после установки prettier как расширения, я создаю конфигурационные файлы в корне проекта: папку .vscode (внутри файл settings.json) и файл .prettierrc (кроме prettier ничего не стоит, остальные настройки сброшены в дефолтные)
В них соответственно я задаю конфиг

settings.json

{
      "editor.codeActionsOnSave": {
          "source.fixAll": true
      },
      "editor.formatOnSave": true,
      "javascript.format.enable": false,
      "material-icon-theme.activeIconPack": "react_redux"
  }

.prettierrc

{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5"
  }

Теперь, когда я prettier и settings вступили в силу, prettier работает отлично как и должно. Однако через 10 минут стабильной работы сразу после сохранения очередного файла появляется странный баг, которого я раньше не видел .Примеры на скриншотах ниже
1) До сохранения файла:

2) После сохранения файла:


Куда копать? Как можно это пофиксить? Фиксится ли это вообще?

Answer 1

[Александр Викторович]

Попробуйте добавить в .prettierrc
jsxBracketSameLine: true

Comments

[lebedev112]

Увы, безрезультатно. Даже удаляя Prettier, такой баг остается. Как я потестировал, если оставить значение строчки editor.formatOnSave в false, баг пропадает. Но тогда prettier уже не работает

[Александр Викторович]

lebedev112, ну так форматируйте в ручную shift+alt+f (вроде), добавьте в settings.json

"editor.formatOnSave": false, // попробуйте с true, должно работать при сохранении 
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
 },

или можно назначить горячую клавишу, например alt+f. добавив в keybindings.json

{
    "key": "alt+f",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus && !editorReadonly"
 }

примерно будет так:



мои настройки .prettierrc (переносы строк и прочее уже под себя настройте):

{
	"printWidth": 80,
	"tabWidth": 4,
	"useTabs": true,
	"semi": true,
	"singleQuote": true,
	"quoteProps": "as-needed",
	"jsxSingleQuote": true,
	"trailingComma": "es5",
	"bracketSpacing": true,
	"jsxBracketSameLine": true,
	"arrowParens": "always",
	"proseWrap": "always",
	"htmlWhitespaceSensitivity": "css",
	"vueIndentScriptAndStyle": true,
	"endOfLine": "crlf",
	"requirePragma": false,
	"insertPragma": false
}

[lebedev112]

Спасибо, действительно работает