pre 요소?

지섭님 PR 결과를 보니 textarea에서 pre로 요소를 변경해 간격을 조정한 것이 있었다. pre 요소란 뭘까?

	</label-certification>
	</header>
	<section class="objection-history__admin">
	  ~~<textarea~~
	  <pre
	    class="objection-history__desc scroll-bar"
	    readonly="readonly"
	    :value="objectionHistory.admin_description"
	  />
  <p class="date-creation">

pre 요소는 HTML에 작성한 내용 그대로 표현하는 요소를 이야기한다. Pre의 의미는, 미리 서식을 지정한 텍스트라는 의미이다.

<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>

만약 html 코드에 다음과 같이 작성했다면, 아웃풋도 다음과 같다.

  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire

eslint auto fix 설정

만약 vscode에서 eslint fix를 사용하고 싶다면, eslint 플러그인을 설치한 다음 쉘에서 다음 명령어를 실행하면 된다.

npx eslint --fix 고치고 싶은 파일 경로

하지만 매번 이 명령어를 계속할 수는 없는 노릇이다.

이에 대한 설정은 settings.json에서 해 주어야 한다.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

이를 통해 저장 버튼을 누르면 포맷이 eslint에 맞추어서 코드 수정이 일어나는 것을 알 수 있다.