Prettier

김동현·2022년 2월 10일
2
post-thumbnail

Prettier

이전에 eslint의 역할 중에서 포맷핑을 하는데 이 포맷팅을 조금 더 일관적인 스타일로 코드를 다듬기 위해서 prettier을 사용합니다. 즉, prettier는 포맷팅 관련된 작업만 처리하며 eslint처럼 코드 품질과 관련된 작업은 처리하지 않는다는 차이점이 있습니다.

prettier을 설치하기 위해서 터미널에 아래 명령어를 입력합니다.

npm install prettier

그리고 prettier을 실행하기 위해서는 아래 명령어를 입력합니다.

npx prettier <파일경로>

옵션 중에서 --wirte를 사용하면 파일 자체를 수정해줍니다.
즉, npx prettier <파일경로> --write를 입력해줍니다.


위 app.js 파일로 prettier을 사용하는데 --wirte 옵션을 사용하면 코드가 자체적으로 수정되는 것을 볼 수 있습니다.


특히 prettier의 강점 중 하나로 eslint가 고칠 수 없는 ,즉 개발자가 직접 수정해야하는 코드도 prettier가 자동으로 수정해줍니다.

예를 들어, 위 코드처럼 긴 문자열이 있습니다. eslint에서는 max-len라는 규칙을 통해서 한줄에 표현할 수 있는 최대 문자열을 설정할 수 있습니다. maxlenght 규칙은 --fix 옵션을 사용하더라도 eslint에서는 코드를 검사하고, 검사한 이후에 개발자에게 알려주기만 합니다.

하지만 prettier의 경우 --write 옵션을 사용하면 자동적으로 코드가 수정되는 것을 볼 수 있습니다. 즉, eslint로 --fix 옵션으로도 수정되지 않는 것들을 prettier는 --wirte 옵션을 통해 코드를 수정하는 것이 가능합니다.


우리는 포맷팅을 위해서 eslint 뿐만 아니라 prettier를 사용하여 코드 스타일을 수정하는데 조금 더 보완을 할 수 있습니다. 즉, eslint를 통해서 코드 품질 관련된 검사를 실행하고 prettier을 통해서 포맷팅을 검사해야 합니다.

그러므로 eslint와 prettier을 둘 다 실행하기 위해서 하나로 통합하여 사용해야 합니다.

eslint-config-prettier

prettier에서는 eslint와 통합할 수 있는 방법을 제공합니다. "eslint-config-prettier"는 prettier와 충돌하는 eslint 규칙을 꺼버리는 역할을 합니다. 둘 다 사용하는 경우 규칙 충돌이 발생하기 때문입니다.

"eslint-config-prettier"을 설치하기 위해서 터미널에 아래 명령어를 작성해줍니다.

npm install eslint-config-prettier

"eslint-config-prettier"는 확장 가능한 설정이기 때문에 eslint 설정 파일인 .eslintrc.js 파일의 extends 부분에 추가할 수 있습니다.
이때 반드시 배열 마지막 요소로 작성해주어야 정상적으로 모든 규칙을 끄게 됩니다.

eslint-config-prettier을 추가함으로써 eslint:recommended의 규칙중 prettier와 "겹치는 규칙이 있다면 해당 설정을 해제"하도록 설정했습니다.

즉, eslint로는 코드 품질만을 관리하고 포맷팅 관련된 작업은 prettier가 하도록 설정이 되었습니다.


console.log();;;;;;;

위 코드와 같이 불필요한 세미콜론이 작성된 코드를 eslint로 검사해도 eslint-config-prettier로 인해 prettier와 겹치는 규칙이므로 해제되어 더이상 에러를 표시하지 않습니다. 하지만 prettier로 --wirte 옵션을 사용하게 된다면 자동적으로 불필요한 세미콜론을 제거한 코드로 수정을 해줍니다.

하지만 매번 eslint와 prettier를 각각 실행해야 하는 불편함이 남아있습니다. 우리는 eslint와 prettier을 한 번에 실행시기 위해서 "eslint-plugin-prettier"을 사용합니다.

eslint-plugin-prettier

"eslint-plugin-prettier"는 prettier 규칙들을 eslint 규칙으로 추가시켜주는 플러그인입니다. 즉, prettier의 모든 규칙이 eslint의 규칙으로 추가되기 때문에 우리는 eslint만을 실행하면 됩니다.

"eslint-plugin-prettier"을 설치하기 위해서 아래 명령어를 터미널에 입력해줍니다.

npm install eslint-config-prettier

설치한 "eslint-plugin-prettier"은 .eslintrc.js 파일에 plugins라는 배열에 추가해줍니다. plugins 배열의 요소로 "prettier"을 추가하고, rules 객체에는 "prettier/prettier"을 키로, "error"를 값으로 작성하여 prettier의 규칙을 위반하면 에러를 반환하도록 설정**해줍니다.

이제 eslint만을 실행하여 prettier의 포맷팅과 eslint의 코드 품질 검사를 한 번에 실행할 수 있습니다.


"eslint-config-prettier"와 "eslint-plugin-prettier" 패키지를 한 번에 설정하는 방법도 있습니다.

.eslintrc.js 파일의 extends 부분에 "plugin:prettier/recommended"
를 추가하여 두 패키지를 한 번에 설정
할 수 있습니다.

자동화

eslint를 실행하기 위해서 우리는 npm run lint 명령어를 매번 입력해야 합니다. 매번 명령어를 입력하는 것은 비효율적이므로 이를 자동화하여 사용하는 방법에 대해서 알아보겠습니다.

총 두 가지 방법이 있으며 "깃 훅을 사용하는 방법""에디터 확장 도구를 사용하는 방법" 이렇게 두 가지가 존재합니다.

깃 훅을 사용하는 방법

소스 트래킹 도구로 Git을 사용한다면 깃 훅을 사용하는 것이 좋습니다. 이는 커밋 전, 푸시 전 등 명령어 실행 시점에 끼어들 수 있는 훅을 제공합니다. "husky"라는 깃 훅을 사용하는데 이는 커밋 메세지 작성전에 끼어들어 자동적으로 원하는 작업을 실행해줍니다.

우리는 husky 훅을 사용하여 커밋이 되기 전에 eslint를 실행하는 작업을 설정하여 eslint 검사를 통과하는 경우에만 커밋을 허용하고, 통과하지 못한다면 커밋을 막아주도록 설정할 수 있습니다.


"husky" 패키지를 먼저 설치합니다.

npm install husky

설치한 husky 패키지는 package.json 파일에 추가해줍니다.

// packge.json
{
    ,,,
    "husky": {
        "hooks": {
            "pre-commit": "커밋 전 실행할 쉘 스크립트"
        }
    }
}

그리고 hooks 객체에 pre-commit에 실행할 명령어를 작성해줍니다.

우리는 커밋전에 eslint를 실행하기 위해서 pre-commit에 eslint src --fix을 작성해줍니다.

// packge.json
{
    ,,,
    "husky": {
        "hooks": {
            "pre-commit": "eslint src --fix"
        }
    }
}

만약 관리하는 소스 파일이 많아진다면 eslint 실행이 느려지게 됩니다. 이를 최적화하기 위해서 커밋한 소스 파일중 변경된 파일만을 eslint 실행을 하도록 설정합니다.

깃이 트래킹하는 파일중 변경된 파일만을 eslint 실행되도록 도와주는 패키지로 "lint-staged"가 있습니다.

"lint-staged" 패키지를 설치하기 위해서 아래 명령어를 작성합니다.

npm install lint-staged

설치한 이후 package.json 파일에 lint-sataged 설정을 추가해줍니다. 그리고 husky의 hooks 객체에 pre-commit 부분을 lint-staged로 수정해줍니다.

// package.json
module.exports = {
    ,,,
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.js": "eslint --fix"
    }
}

커밋한 모든 .js 확장자 파일중 변경된 파일만을 eslint 실행하도록 설정했습니다.

에디터 확장 도구를 사용하는 방법

에디터를 통해 코딩하는 도중 실시간으로 eslint를 실행하는 방법도 존재합니다. vscode의 eslint와 prettier 확장 도구가 이러한 기능을 제공해줍니다. 앞에서 우리는 prettier 규칙들을 모두 eslint에 적용했으므로 ESlint 확장 도구를 사용해여 eslint 검사를 자동화해보겠습니다.

먼저 ESLint 확장 도구부터 설치해보겠습니다.

설치를 한 뒤에 vscode 설정에서 enable에 true를 설정해줍니다.

그리고 파일을 저장할 때마다 자동 포맷팅을 위해서 해당 옵션의 값을 all로 설정해줍니다.

profile
Frontend Dev

0개의 댓글