ESlint & Prettier : 코드의 퀄리티와 스타일

"eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다."
https://helloinyong.tistory.com/325

라고 하더라. 사실상 뭔소린지 모르겠다. 

1. 코드 퀄리티

함수를 작성할 때, 여러 방식이 있다. 그러나 앵간해서는 상황에 맞춰 통일된 방식으로 함수를 작성하는 것이 코드의 퀄리티를 높여준다. 여러 내장 메소드들도 그렇다 단순하게 for문을 돌릴 수 도 있고, for..of 나 for..in, 혹은 내장 forEach() 를 쓰는 경우도 있을 것이다. 방법은 많지만, 역시나 적은 가짓수로 통일하는 것이 가장 좋은 방법이다. 일관적인 코드를 작성하는 것이다. 

ESlint는 코드의 퀄리티를 일관되게 관리한다

2. 코드 스타일

그리고 코드를 쓰는 스타일이 있다. 모든 작성 마지막에 성실하게 세미콜론을 붙일 수도 있고, 공백과 탭은 4칸으로 할수도, 공백은 2칸으로 할수도 있다. 줄은 어디서 바꿀지, 괄호 안에 작성되는 것이 양옆으로 공백을 가질지 등등. 왠만하면 팀원간에 통일하는 것이 좋겠다. 스네이크케이스나, 카멜케이스, 기타 등등 

Prettier는 코드의 스타일을 유지시켜준다

그럼 어떻게 쓰나

.eslintrc : eslint의 룰을 정해준다.

프로젝트마다 만들어서 코드가 전체적 일관성을 유지되게 도와준다. 그리고 확장프로그램에서뿐만 아니라, 라이브러리에서도 다운받아 설치한다. 

https://eslint.org/docs/user-guide/getting-started

Getting Started with ESLint

뭐든지 일단 공식문서를 봐야하는 법이다. 뭔가를 옮겨 적는 순간 그것은 구버젼이기 때문이다.

package.json

그렇다. 버젼관리 안에 eslint 와 prettier를 라이브러리로 다운받아 설정하고, 적용한채로 프로젝트를 구성하게 되면, 나 뿐만 아니라 다른 사람들이 프로젝트를 활성화 시켰을 때에도 일관되게 보여주고, 일관되게 수정할 수 있도록 한다. 단순히 IDE에서 쓰는 테마 장식용 툴이라고 생각했는데! 놀라워!

우선순위는 어떨까

일단 ESlint를 사용하고, 그 위에서 prettier가 보기좋게 다듬고, 겹치는 기능영역은 eslint가 우선시 되도록 eslint-config-prettier 를 설치한다. 

https://github.com/prettier/eslint-config-prettier

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

.prettierrc : vscode 바깥에서도 룰을 지키게 하는 법

그리고 나서 prettier의 .prettierrc 파일에서 설정을 하여 잘 예쁘게 나오게 잘 하면 잘 되는 것이다. 

https://prettier.io/docs/en/install.html

Prettier · Opinionated Code Formatter

역시나 공식문서가 있다. 입아프게 설정법 써봤자 바뀌면 그만이야 ^^

필수인가? 

모른다. 근데 안쓰는 사람은 거의 없을 것이고, 그 와중에 제대로 쓰는 사람 또한 별로 없을 것 같긴 하다.