Prettier
프리티어는 코드를 "더" 예쁘게 만든다. ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 프리티터는 좀 더 일관적인 스타일로 코드를 다듬는다.
반면 코드 품질과 관련된 기능은 하지 않는 것이 ESLint와 다른 점이다.
설치 및 사용법
프리티어 패키지를 다운로드 하고
1
npm i -D prettier
코드를 아래 처럼 작성한다.
- app.js
1
console.log('hello world')
Prettier로 검사해 보자.
1
npx prettier app.js --write
--write 옵션을 추가하면 파일을 재작성한다. 그렇지 않을 경우 결과를 터미널에 출력한다. 변경된 모습을 보면,
- app.js
1
console.log("Hello world");
작은 따옴표를 큰 따옴표로 변경했다. 문장 뒤에 세미콜론도 추가했다. 프리티어는 ESLint와 달리 규칙이 미리 세팅되어 있기 때문에 설정 없이도 바로 사용할 수 있다.
포매팅(더 예쁘게)
다음 코드를 보자.
- app.js
1
2
3
console.log(
"----------------매 우 긴 문 장 입 니 다 80자가 넘 는 코 드 입 니 다.----------------"
)
ESLint는 max-len 규칙을 이용해 위 코드를 검사하고 결과만 알려 줄 뿐 수정하는 것은 개발자의 몫이다. 반면 프리티어는 어떻게 수정해야할지 알고 있기 때문에 아래처럼 코드를 다시 작성한다.
- app.js
1
2
3
console.log(
"----------------매 우 긴 문 장 입 니 다 80자가 넘 는 코 드 입 니 다.----------------"
)
아래 코드는 어떻게 변환할까?
1
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne())
프리티어는 코드를 문맥을 어느 정도 파악하고 상황에 따라 최적의 모습으로 스타일을 수정한다.
1
2
3
4
5
6
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
)
더 멋진 예제도 있는데 프리티어를 만든 James Long의 글을 참고하자. 이러한 포매팅 품질은 ESLint보다는 프리티어가 훨씬 좋은 결과를 만든다. 사람에게 더 친숙하도록 말이다.
통합방법
여전히 ESLint를 사용해야 하는 이유는 남아 있다. 포맷팅은 프리티어에게 맡기더라도 코드 품질과 관련된 검사는 ESLint의 몫이기 때문이다. 따라서 이 둘을 같이 사용하는 것이 최선이다.
프리티어는 이러한 ESLint와 통합 방법을 제공한다. eslint-config-prettier 는 프리티어와 충돌하는 ESLint 규칙을 끄는 역할을 한다. 둘 다 사용하는 경우 규칙이 충돌하기 때문이다.
패키지를 설치한뒤,
1
npm i -D eslint-config-prettier
설정파일의 extends 배열에 추가한다.
- .eslintrc.js
1
2
3
4
5
6
{
extends: [
"eslint:recommended",
"eslint-config-prettier"
]
}
예를 들어 ESLint는 중복 세미콜론 사용을 검사한다. 이것을 프리티어도 마찬가지다. 따라서 어느 한쪽에서는 규칙을 꺼야하는데 eslint-config-prettier를 extends 하면 중복되는 ESLint 규칙을 비활성화 한다.
1
2
var foo = "" // 사용하지 않은 변수. ESLint가 검사
console.log() // 중복 세미콜론 사용. 프리티어가 자동 수정
ESLint는 중복된 포매팅 규칙을 프리티어에게 맞기고 나머지 코드 품질에 관한 검사만 한다. 따라서 아래처럼 두 개를 동시에 실행해서 코드를 검사한다.
1
2
3
4
5
npx prettier app.js --write && npx eslint app.js --fix
1:5 error 'foo' is assigned a value but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)
프리터에서 의해 코드가 아래과 같이 포매팅 되었고
1
2
var foo = ""; // 사용하지 않은 변수. ESLint가 검사
console.log();
ESlint에 의해 코드 품질과 관련된 오류(no-unused-vars)를 리포팅한다.
한편, eslint-plugin-prettier는 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행하면 된다.
패키지를 설치하고
1
npm i -D eslint-plugin-prettier
설정 파일에서 pulugins와 rules에 설정을 추가한다.
- .eslintrc.js
1
2
3
4
5
6
7
8
{
plugins: [
"prettier"
],
rules: {
"prettier/prettier": "error"
},
}
프리티어의 모든 규칙을 ESLint 규칙으로 가져온 설정이다. 이제는 ESLint만 실행해도 프리티어 포매팅 기능을 가져갈 수 있다.
1
npx eslint app.js --fix
프리티어는 이 두 패키지를 함께 사용하는 단순한 설정을 제공하는데 아래 설정을 추가하면 된다.
- .eslintrc.js
1
2
3
4
5
6
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
]
}