React 사용시 사용 툴 1 Prettier

1. Prettier

    코드 포맷터로 javascript, CSS, JSON 등을 지원

    미리 약속한 코드 스타일에 맞춰 자동으로 코드의 형식을 수정해 주는 도구로, 협업시 여러 개발자들의 코드 스타일을 맞추는 데 도움을 준다.

    (프로젝트 내에서)

    npx install --save-dev prettier

    

    (Prettier 설정)

    프로젝트 루트 폴더에서 .Prettierrc.js 파일을 생성

    module.export = {

        singleQuote: true,

        trailingComma: 'all',

        printWidth: 100,

    };

 

    설정한 내용은

     singleQuote : 싱글쿼트(')를 주로 사용하도록 설정

     trailingComma : 콤마(,)를 추가할수 있다면, 콤마를 추가

     printWidth : 한 줄에 작성할 수 있는 최대 코드 문자 수를 설정

 

    Prettier 실행

     package.json 파일을 열고 script 항목에 추가

    {

        ...

        "script" : {

            ...

            "format" : "prettier --check ./src",

            "format:fix" : "prettier --write ./src"

        },

        ...

    }

 

    사용시는 터미널에서 npm run format을 사용해서 체크를 하고

    npm run format:fix 를 사용하여 자동 수정 후 다시 확인하면 변경된것을 볼수 있다.