prettier는 ESLint보다 코드를 더 예쁘게 만들어준다
ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 프리티어는 좀 더 일관적인 스타일로 코드를 다듬는다
하지만 ESLint와는 다르게 코드 품질과 관련된 기능은 하지 않는다
프리티어 설치 및 사용
$ npm install -D prettierprettier를 설치하고 app.js를 아래와 같이 수정해보자
console.log()코드 후미에 세미콜론을 붙히지 않고 prettier를 통해 app.js를 실행시켜보자
$ npx prettier app.js
// 실행 결과
console.log();코드 후미에 세미콜론을 붙혀서 반환해준다
--write 옵션을 주면 파일 자체를 수정해준다
$ npx prettier app.js --writeapp.js
// 프리티어 실행 결과
console.log();이외에도 prettier는 여러가지를 포매팅 해준다
// 프리티어 사용 전 코드
console.log();;;;;;;;;;;
console.log('---------------- 매 우 긴 문 장 입 니 다 80자가 넘 는 코 드 입 니 다 ----------------');
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
// 프리티어 사용 후 코드
console.log();
console.log(
"---------------- 매 우 긴 문 장 입 니 다 80자가 넘 는 코 드 입 니 다 ----------------"
);
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);prettier가 포매팅을 더 잘해주더라도 코드 품질 검사는 하지 않기 때문에 ESLint와 prettier를 같이 쓰는 것이 좋다
같이 사용하기 위해서는 ESLint와 prettier를 통합해야 한다
ESLint와 Prettier 통합하기
prettier는 ESLint와의 통합 방법을 제공한다
eslint-config-prettier는 prettier와 충돌하는 ESLint 규칙을 이끄는 역할을 한다
둘 다 사용하는 경우 규칙이 충돌하기 때문이다
$ npm install -D eslint-config-prettiereslint-config-prettier는 확장 가능한 설정이기 때문에 .eslintrc.js에서 extends 배열에 추가해준다
.eslintrc.js
module.exports = {
"env": {
"node": true,
"browser": true,
"es2021": true
},
"extends": ["eslint:recommended", "eslint-config-prettier"],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
}
}
extends 배열에 eslint-config-prettier를 추가해주면 eslint:recommended 설정중에 프리티어와 겹치는 설정이 있으면 disable로 해준다
app.js
const foo = 10;
console.log();;;;;;;;;예시로 app.js를 위와 같이 수정해보자
foo 변수는 선언만 하고 사용하지 않고 있기 때문에 ESLint에서 에러를 던질 것이다
console.log()에는 세미콜론이 여러개 붙어 있는데 이는 eslint:recommended 설정과 prettier 설정이 겹치므로 ESLint에서는 disable이 적용된다
위 코드를 우선 ESLint를 사용해서 실행해보자
$ npx eslint app.js --fix
// 실행 결과
1:7 error 'foo' is assigned a value but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)app.js
const foo = 10;
console.log();;;;;;;;;
console.log()의 세미콜론이 수정되지 않고 foo가 사용되지 않은 변수라는 에러만 던지고 있다
이번에는 prettier를 통해 실행해보자
$ npx prettier app.js --writeapp.js
const foo = 10;
console.log();
코드 품질은 검사하지 않고 console.log()의 여러개 붙은 세미콜론이 수정되었다.
하지만 ESLint와 prettier를 따로 실행하는 것은 매우 귀찮은 일이다..
따라서 이를 한번에 실행시키는 방법이 있다
eslint-plugin-prettier는 prettier에 있는 모든 규칙들을 ESLint 룰로 넣어버리는 것이다
그렇기 때문에 ESLint만 실행해도 prettier까지 같이 실행되는 효과를 얻을 수 있다
$ npm install -D eslint-plugin-prettier.eslintrc.js
module.exports = {
env: {
node: true,
browser: true,
es2021: true,
},
extends: ["eslint:recommended", "eslint-config-prettier"],
overrides: [],
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["prettier"], // prettier 추가
rules: {
"prettier/prettier": "error", // prettier 규칙을 위반하면 에러를 발생
},
};
eslint-plugin-prettier는 플러그인 형식으로 제공되기 때문에 .eslintrc.js의 plugins 프로퍼티에 배열 형태로 prettier를 추가한다
rules 객체에 위와 같은 코드를 추가하면 prettier 규칙을 위반했을 때 에러를 발생시켜준다
그럼 다시 app.js에서 아래와 같은 코드를 입력하고 ESLint를 실행해보자
app.js
const foo = 10;
console.log();;;;;;;
prettier의 규칙을 모두 ESLint로 넣었기 때문에 ESLint 하나만 실행시켜도 코드가 모두 수정이 될 것이다
$ npx eslint app.js --fix
// 실행 결과
1:7 error 'foo' is assigned a value but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)app.js
const foo = 10;
console.log();사용하지 않은 변수 foo에 대한 에러와 console.log()의 중복 세미콜론에 대한 포매팅까지 모두 처리가 되는 것을 확인할 수 있다
위 방법 말고 간단하게 ESLint와 prettier를 통합할 수 있다
앞서 말한 두개의 패키지를 먼저 설치하고 .eslintrc.js를 아래와 같이 수정하면 된다
.eslintrc.js
{
...
extends: ["eslint:recommended", "plugin:prettier/recommended"],
...
}