[인프런] 프론트엔드 개발환경의 이해와 실습 (프리티어 Prettier)

ESLint와 유사한 Prettier에 대해 알아보고 적용해보자.

프리티어(Prettier)

프리티어는 ESLint의 역할 중 포맷팅과 비슷하다. 코드 품질과 관련된 기능은 하지 않고, ESLint 보다 조금 더 일관적인 스타일로 코드를 다듬는다.

 

프리티어 패키지를 설치해보자.

npm install -D prettier

 

프리티어를 적용할 코드를 작성하자.

app.js

console.log('hi');;;;;;

 

Prettier로 검사해보자.

npx prettier app.js --write

 

—write 옵션을 추가하면 자동으로 파일을 수정해준다.

app.js

console.log("hi");

prettier는 ESLint와 달리 규칙이 미리 세팅되어 있어 설정 없이도 바로 사용할 수 있다.

 

그러나, 여전히 ESLint를 사용해야 하는 이유가 있다. 포맷팅은 프리티어가 하더라도 코드 품질과 관련된 검사는 ESLint가 해주기 때문이다. 따라서, 이 둘을 같이 사용하는 것이 베스트다.

 

그러기 위해 두가지를 좀 더 편리하기 쉽게 사용하는 방법이 있다. 프리티어는 다음과 같은 ESLint와 통합할 수 있는 방법을 제공한다.

• eslint-config-prettier
• eslint-plugin-prettier

 

프리티어와 충돌하는 ESLint 규칙을 끄는 eslint-config-prettier를 설치해보자.

npm install -D eslint-config-prettier

 

설정파일의 extends 배열에 추가한다.

.eslintrc.js

...

{
  extends: [
    "eslint:recommended",
    "eslint-config-prettier"
  ]
}

eslint-config-prettier로 중복되는 규칙을 비활성화하여 충돌을 예방할 수 있다.

 

그리고 프리티어 규칙을 ESLint 규칙으로 추가하여, ESLint만 실행해도 모두 실행되도록 하는 eslint-plugin-prettier를 설치해보자.

npm install -D eslint-plugin-prettier

 

설정 파일에서 plugins와 rules에 설정을 추가해준다.

.eslintrc.js

...

{
  plugins: [
    "prettier"
  ],
  rules: {
    "prettier/prettier": "error"
  },
}

프리티어의 모든 규칙을 ESLint 규칙으로 가져오게 된 것이다. 이제 ESLint만 실행해도 프리티어 포맷팅까지 적용된다.

 

eslint-config-prettier와 eslint-plugin-prettier를 단순히 설정하는 방법도 있다.

.eslintrc.js

...

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

plugins와 rules에 설정해줄 필요 없이 extends에 한번에 설정해주면 된다.

 

이 상태로 eslint를 실행하기 위해 package.json scripts에 lint라는 명령어를 정의해준 후 명령어를 실행시켜보자.

npm run lint

오류 없이 잘 진행되었다면 app.js가 자동으로 수정되어 있을 것이다.

 

그런데 나는 Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function 라는 오류가 났다. 검색해보니 eslint 버전이 맞지 않아 발생한 오류라고 한다. 아래의 문서를 참고하여 버전을 업데이트 시켜주었다.

Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function

 

 

 

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습