Visual Studio Code не правильно форматирует код css js?

Question

[Царёв Вадим]

Доброго времени суток. Visual Studio Code не правильно форматирует код css js? установил формат после сохранения и началось (((
с js и css вытворят чудеса после форматирования вылезают ошибки
до формат

html, body {
	height: 100%;
}

body {
	overflow: hidden;
}

.box {
	max-width: 70vw;
	padding: 30px;
	margin: 0 auto;
	position: relative;
	top: 50%;
	font-size: 30px;
	line-height: 1.5;
	transform: translateY(-50%);
	perspective: 400px;
}

.text div {
  position: relative;
  display: inline-block;
  transition: all 1.5s;
}

после

.box {
	max - width: 70vw; 
	padding: 30px; 
	margin: 0 auto; 
	position: relative; 
	top: 50 % ; 

	
	font - size: 30px; 
	line - height: 1.5; 
	transform: translateY(-50 % ); 
	perspective: 400px; 
}

.text div {
  position: relative; 
  display: inline - block; 
  transition: all 1.5s; 
}

с js
до

const text = document.querySelector('.text');

text.innerHTML = [...text.textContent]
  .map(n => `<div>${n.trim() ? n : '&nbsp;'}</div>`)
  .join('');

document.querySelector('input').addEventListener('change', function() {
  (this.checked ? hideText : showText)();
});

function rand(x) {
  return `${Math.random() * x - x * 0.5}px`;
}

function showText() {
  [...text.querySelectorAll('div')].forEach((n, i) => {
    Object.assign(n.style, {
      opacity: 1,
      transform: `translate3d(0, 0, 0)`,
    });
  });
}

function hideText() {
  [...text.querySelectorAll('div')].forEach((n, i) => {
    Object.assign(n.style, {
      opacity: 0,
      transform: `translate3d(${rand(400)}, ${rand(400)}, ${rand(60)})`,
    });
  });
}

после

const text = document.querySelector(".text"); 

text.innerHTML = [...text.textContent]
  .map(n => ` < div > $ {n.trim()?n:"&nbsp;"} </div > `)
  .join(""); 

document.querySelector("input").addEventListener("change", function() {
  (this.checked?hideText:showText)(); 
}); 

function rand(x) {
  return `$ {Math.random() * x - x * 0.5}px`; 
}

function showText() {
  [...text.querySelectorAll("div")].forEach((n, i) =>  {
    Object.assign(n.style,  {
      opacity:1, 
      transform:`translate3d(0, 0, 0)`
    }); 
  }); 
}

function hideText() {
  [...text.querySelectorAll("div")].forEach((n, i) =>  {
    Object.assign(n.style,  {
      opacity:0, 
      transform:`translate3d($ {rand(400)}, $ {rand(400)}, $ {rand(60)})`
    }); 
  }); 
}

вставляет пробелы где не нужно(((

Answer 1

[Царёв Вадим]

Был конфликт дополнений по форматированию!

Answer 2

[vada]

Скажите - какие плагины для автоформата стояли и конфликтовали, и какой в итоге оставили?

Comments

[Царёв Вадим]

не помню какие стояли ,что сейчас