Visual Studio Code not formatting css js code correctly?

Question

Character encoding

Good day. Visual Studio Code not formatting css js code correctly? set the format after saving and started (((
with js and css they will do wonders after formatting, errors come out
before the format

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;
}

after

.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; 
}

from js
to

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)})`,
    });
  });
}

after

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)})`
    }); 
  }); 
}

insert spaces where not needed

Answer 1

There was a formatting conflict!