[JS] Prettier, ESLint

주제 선정 이유

자바스크립트 수업을 듣던 중 화살표 함수에서 매개변수가 하나일 때 ()을 생략가능한데 생략하는 것이 더 좋은가하는 질문을 받았다. 동시에 Prettier와 ESLint의 화살표 함수의 괄호 기본 설정이 다르다는 말을 해주셨다.
화살표 함수의 매개변수 외에 Prettier와 ESLint 이러한 설정 출동이 더 있을지, 있다면 무엇이고, 어떻게 해결할 지 궁금해졌다.

Prettier

Code Formatter

Prettier는 Code Foramtter다. Format은 형식, 서식, 체제, 형 등을 가리킨다. 즉, CSS처럼 배치, 효과만 적용하고 내용은 수정하지 않는다.

const x= 1;
const person ={
  name : 'yeonseong ',
  age :11
}

보기만 해도 숨막히는 위의 코드를 Prettier를 적용하면

const x = 1;
const person = {
  name: 'yeonseong ',
  age: 11,
};

이렇게 바꿔준다. 하지만, 내용이나 문법은 확인하지 않는다.

const x = 1;
const x = 1;

이렇게 써도 Prettier는 아무런 수정도 해주지 않는다.

이점

Prettier는 여러 이점이 있다.

• 자동으로 코드를 포맷팅해준다.
• 여러 사람이 작성한 코드의 스타일을 동일하게 맞춰준다.
• 실수를 방지해준다.

포맷팅을 개발자가 직접하지 않기 때문에 시간을 줄여준다. 개발자는 코드 작성에만 신경 쓸 수 있다.

스티브 잡스가 같은 옷만 입는 이유

• 주의를 기울여야 할 일을 줄여 다른 일에 집중할 수 있게 해준다.

ESLint

ESLint는 ES(EcmaScript) + Lint로 자바스크립트에서 사용하는 문법 검사 툴이다. 단순히 문법 오류만 잡아주는 것이 아니라 안티 패턴 또한 잡아준다.

ESLint 공식 사이트에서는 ESLint를 이렇게 소개한다.

Find and fix problem in your JavaScript code.
problem은 문법 오류 뿐 아니라 안티 패턴 등 다양한 문제를 포함한다.

자바스크립트는 동적 타입 언어고 오류에 관대한 언어라 개발자가 실수할 확률이 높다. ESLint를 사용하면 이러한 문제를 사전에 인지하고 예방할 수 있다.

Prettier 기본 설정

현재 poiemaweb에서 권장하는 방식으로 ESLint와 Prettier를 쓰고 있다. 해당 웹 사이트에서 Prettier 설정 파일을 어떻게 작성하였는지 보고 내 코드가 어떻게 포맷팅 되고 있는지 보려고 한다.

{
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "printWidth": 120,
  "endOfLine": "lf"
}

1. "tabWidth": 2 (Default: 2)
   tab width는 아주 오랜 논쟁이기 때문에 어떤 tab width가 좋은지는 정답은 없지만 JavaScript를 작성할 때는 2를 쓰는 것이 일반적이다.

2. "singleQuote": true (Default: false)
   기본 설정과 다르게 사용하는 속성이다. "singleQuote": true가 되면 모든 따옴표를 홑따옴표로 만들어준다.
   자바스크립트에서 홑따옴표가 유리한 이유는 [JS] '' vs "" vs `` 무엇을 쓸까?
   에서 확인할 수 있다.

3. "bracketSpacing": true (Default: true)
   객체 리터럴 {} 사이에 공간을 만들지 말지 결정한다.

const person = { name: 'yeonseong' }; // "bracketSpacing": true
const person = {name: 'yeonseong'}; // "bracketSpacing": false

4. "semi": true (Default: true)
   문장 끝에 세미콜론을 자동으로 삽입해준다. 굉장히 유용하다. Prettier를 쓰다보면 점점 세미콜론을 안 찍고 저장을 하고 있는 나를 발견할 수 있다.
   주의 할 점은 줄 단위로 동작한다는 것이다. 아래의 코드가 자동으로 줄 바꿈이 되면서 세미콜론이 삽입되지는 않는다.

const name = 'yeonseong' const age = 11

5. "arrowParens": "avoid" (Default: "always")
   이 글을 쓰게 만든 그 속성이다. 화살표 함수의 파라미터가 1개일 때 해당 파라미터를 괄호로 감쌀지 결정한다.

• always: 항상 감싼다.
• avoid: 생략할 수 있으면 생략한다.

const foo = (x) => x**2; // "arrowParens": "always"
const bar = x => x**2; // "arrowParens": "avoid"

마무리

ESLint는 자주 안 써봤지만 Prettier는 꽤 자주 써봤는데 항상 누군가 만들어둔 설정 파일만 가져다 쓰다가 많지 않더라도 어떤 속성인지 직접 볼 수 있어 만족스럽다.
앞으로도 기본 포맷은 내가 직접 안 쓰는 경우가 많겠지만 경우에 따라 어떤 속성이 더 필요하고 덜 필요하고 판단할 수 있을 것 같다.