React

[2장 JSX] ESLint와 Prettier 적용 하기

일등하이 2020. 11. 26. 17:06
반응형

ESLint

ESLint는 문법 검사 도구이고 Prettier는 코드 스타일 자동 정리 도구다 

ESLint는 쿠도를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code에디터에서 바로 확인할 수 있게 해 준다

예를 들어 주석을 잘못 입력해서 입력한 내용이 화면에 그대로 나오고 있는 상황이라면 다음과 같이 에디터에서 확인할 수 있다 

 

ESLint가 작동하지 않으면 

Problems에서 우클릭해서 Allow Everywhere를 선택한다 

문제 탭은 vs code의 상단 메뉴 보기>문제를 클릭해서 열어 볼 수 있다 

 

초록색 줄이 그어진 코드는 고치기 싫다면 그냥 무시해도 된다 

하지만 빨간색 줄이 그어진 코드는 반드시 고쳐야 한다 

예를 들어 감싸인 요소 규칙을 어기면 다음과 같이 에러가 나타난다 

이런 오류는 고치지 않으면 페이지 브라우저에 나타나지 않는 치명적인 오류이므로 반드시 고쳐줘야 한다 

 

 

 

Prettier

JSX코드를 작성할 때는 코드의 가독성을 위해 들여 쓰기를 사용합니다 

들여 쓰기가 제대로 되어 있지 않은 코드는 읽기가 매우 힘들기 때문이다 

다음 코드를 살펴보자 

import React from 'react';
import './App.css';

function App() {
  const name = '리액트';
  return(
    <div>
    <div className="react">{
      name
    }</div>
              <h1>들여쓰기가 이상한</h1>
            <h2>코드</h2>
        <p>입니다.</p>
            </div>
  );
}

export default App;

 

코드가 굉장히 난잡하다 

이 코드를 정리해본다 

F1을 누르고 format이라고 검색한다 

Prettier를 사용하여 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론(;)이 빠진 곳에는 세미콜론이 자동으로 추가되고 기존에 사용하던 작은따옴표는 모두 큰따옴표로 바뀐다 

자바스크립트에서 문자열을 표현할 때는 작은따옴표나 큰따옴표 어느 것을 사용해도 무방하다 

세미콜론 또한 있어도 되고 없어도 된다 하지만 이는 협업 과정에서 정하는 규칙이고 사람들마다 다른 방식을 사용한다

Prettier의 장점은 이러한 스타일을 쉽게 커스터마이징 할수 있다는 것이다 

현재 열려 있는 프로젝트의 루트 디렉터리 (src, public)에서 .prettierrc라는 파일을 생성한후 다음 내용을 입력해보자 

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2
}

이 파일에서는 들여쓰기를 할때 탭 대신 공백을 두칸 사용하도록 한다 

큰따옴표대신 작은 따옴표를 사용하기로 했다 

세미콜론은 언제나 붙이도록 했다 

Prettier에서는 이외에 다양한 코드 스타일을 사전 설정 할수 있다 

자세한 내용은 Prettier Options페이지를 참고 하자 

prettier.io/docs/en/options.html

 

Prettier · Opinionated Code Formatter

Opinionated Code Formatter

prettier.io

 

 

저장할때 자동으로 코드 정리 하기 

코드 스타일을 정리 할 필요가 있을때마다 F1을 누른후 format을 입력 하는것은 귀찮은 일이다 

코드 정리를 수작업으로 하고 싶다면 이설정은 생략해도 무방하다 

저장할때마다 자동으로 코드를 정리 할수 있게끔 설정하는 방법을 알아본다 

VS Code설정은 파일 > 기본설정 > 설정 메뉴를 클릭해 열수 있다 

상단 텍스트 박스에서 format on save를 검색하고 체크박스에 체크 하자 

이제부터 저장할때 마다 코드가 자동으로 정리 될것이다 

 

 

정리 

JSX는 HTML과 비슷하지만 완전 똑같지 않다

코드로 보면 XML형식이지만 실제로는 자바스크립트 객체이다 

용도도 다르고 문법도 차이가 난다

 

반응형