프리티어 - 린트(Lint) | 김정환

3.Prettier

프리티어는 코드를 “더” 예쁘게 만든다. ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 프리티터는 좀 더 일관적인 스타일로 코드를 다듬는다. 반면 코드 품질과 관련된 기능은 하지 않는 것이 ESLint와 다른 점이다.

 

3-1. 설치 및 사용법

프리티어 패키지를 다운로드 하고

$ npm i -D prettier

 

코드를 아래 처럼 작성한다.

app.js : 

console.log('hello world')

Prettier로 검사해 보자.

$ npx prettier app.js --write

--write 옵션을 추가하면 파일을 재작성한다. 그렇지 않을 경우 결과를 터미널에 출력한다.

 

변경된 모습을 보면,

app.js : 

console.log("Hello world");

작은 따옴표를 큰 따옴표로 변경했다. 문장 뒤에 세미콜론도 추가했다. 프리티어는 ESLint와 달리 규칙이 미리 세팅되어 있기 때문에 설정 없이도 바로 사용할 수 있다.

 

3-2. 포맷팅(더 예쁘게)

다음 코드를 보자.

app.js : 

console.log('----------------매 우 긴 문 장 입 니 다 80자가 넘 는 코 드 입 니 다.----------------')

ESLint는 max-len 규칙을 이용해 위 코드를 검사하고 결과만 알려 줄 뿐 수정하는 것은 개발자의 몫이다. 반면 프리티어는 어떻게 수정해야할지 알고 있기 때문에 아래처럼 코드를 다시 작성한다.

 

app.js : 

console.log(
  "----------------매 우 긴 문 장 입 니 다 80자가 넘 는 코 드 입 니 다.----------------"
); 

아래 코드는 어떻게 변환할까?

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

프리티어는 코드를 문맥을 어느 정도 파악하고 상황에 따라 최적의 모습으로 스타일을 수정한다.

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

더 멋진 예제도 있는데 프리티어를 만든 James Long의 글을 참고하자. 이러한 포매팅 품질은 ESLint보다는 프리티어가 훨씬 좋은 결과를 만든다. 사람에게 더 친숙하도록 말이다.

 

3-3. 통합방법

여전히 ESLint를 사용해야 하는 이유는 남아 있다. 포맷팅은 프리티어에게 맡기더라도 코드 품질과 관련된 검사는 ESLint의 몫이기 때문이다. 따라서 이 둘을 같이 사용하는 것이 최선이다. 프리티어는 이러한 ESLint와 통합 방법을 제공한다. eslint-config-prettier 는 프리티어와 충돌하는 ESLint 규칙을 끄는 역할을 한다. 둘 다 사용하는 경우 규칙이 충돌하기 때문이다.

  

패키지를 설치한뒤,

$ npm i -D eslint-config-prettier

 

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

.eslintrc.js : 

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

예를 들어 ESLint는 중복 세미콜론 사용을 검사한다. 이것을 프리티어도 마찬가지다. 따라서 어느 한쪽에서는 규칙을 꺼야하는데 eslint-config-prettier를 extends 하면 중복되는 ESLint 규칙을 비활성화 한다.

var foo = '' // 사용하지 않은 변수. ESLint가 검사
console.log();;;;;;; // 중복 세미콜론 사용. 프리티어가 자동 수정

ESLint는 중복된 포매팅 규칙을 프리티어에게 맞기고 나머지 코드 품질에 관한 검사만 한다.

 

따라서 아래처럼 두 개를 동시에 실행해서 코드를 검사한다.

$ 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)

 

프리터에서 의해 코드가 아래과 같이 포매팅 되었고

var foo = "";
console.log();

ESlint에 의해 코드 품질과 관련된 오류(no-unused-vars)를 리포팅한다.

 

한편, eslint-plugin-prettier는 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행하면 된다.

 

패키지를 설치하고

$ npm i -D eslint-plugin-prettier

 

설정 파일에서 pulugins와 rules에 설정을 추가한다.

.eslintrc.js :

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

* "prettier/prettier" : "error" prettier 규칙을 위반하면 error를 반환

 

프리티어의 모든 규칙을 ESLint 규칙으로 가져온 설정이다.

 

이제는 ESLint만 실행해도 프리티어 포매팅 기능을 가져갈 수 있다.

$ npx eslint app.js --fix

 

프리티어는 이 두 패키지를 함께 사용하는 단순한 설정을 제공하는데 아래 설정을 추가하면 된다.

.eslintrc.js :

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

 

---

 

TODO

Prettier가 스타일을 수정합니다. eslint 설정에 프리티어 설정을 추가하세요.

$ npm i prettier prettier 설치

$ npm i eslint-config-prettier

$ npm i eslint-plugin-prettier

 

.eslintrc.js :

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

$ npx eslint ./src/app.js --fix