코드 포매터(Formatter)와 린터(Linter)

코드 포매터(Formatter)로는 대표적으로 Prettier가 있습니다. 많이들 사용해봤을거라고 생각이 드는데요.

Prettier가 하는 역할은 우리가 작성한 코드를 정해진 규칙대로 코드 스타일을 변환해주는 도구입니다.

 

린터(Linter)는 버그가 날 수 있을 만한 코드, 스타일 오류, 의심스러운 구조 등을 찾아서 잡아주는 도구입니다.

대표적으로는 ESLint가 있습니다.

 

📌 Prettier 설정하기

제가 한 설정을 기준으로 작성하였습니다. IDE는 JetBrains사의 WebStorm을 사용합니다.

npm i -D prettier

 

그리고 .prettierrc 파일을 하나 만들고 json 파일을 작성하는 것 처럼 규칙들을 작성하면 됩니다.

저는 간단하게 두 가지 규칙만 넣어봤습니다.

{
  "semi": true,
  "singleQuote": true,
}

 

파일 > 설정에 들어와서

Prettier 패키지에는 위에서 글로벌로 설치한 prettier를 넣으면 되고

'저장 시'를 체크하고 확인을 누르면 됩니다.

 

📌 ESLint

자바스크립트에서 사용하는 린터입니다.

설치는 다음과 같습니다.

npm i -D eslint

우리가 사용할 규칙들을 작성하기 위한 파일(.eslintrc.js)을 하나 만들어줍니다.

// .eslintrc.js
module.exports = {};

그리고 WebStorm 설정에 들어와서 'ESLint 패키지'와 '저장 시 eslint --fix 실행'를 체크해줍니다.

 

이제 .eslintrc.js 파일에 규칙을 넣어주면 되는데 이미 잘 만들어진 규칙이 존재합니다.

저는 airbnb에서 만들어놓은 스타일 가이드를 사용했습니다. airbnb/javascript

GitHub - airbnb/javascript: JavaScript Style Guide

npm으로 설치를 먼저 해줘야합니다.

npm i -D eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier

 

그리고 .eslintrc.js에 extends에 추가를 해주면 됩니다.

module.exports = {
  extends: ['airbnb-base', 'prettier'],
};

prettier와 충돌이 나는 일이 있기 때문에 eslint-config-prettier를 설치 후 extends에 prettier를 추가해주면 eslint는 prettier가 고친 것에 대해 에러를 내지 않도록 해줍니다.

 

👉 잘 작동하는지 확인해보겠습니다.

임의의 변수 하나를 생성했는데 바로 ESLint에서 에러를 발생시켰습니다.

 

👉 규칙을 해제시킬 수도 있습니다.

/* eslint-disable-next-line no-unused-vars */
const num = 100;

규칙을 위반한 코드 위에 'eslint-disable-next-line' 을 추가해주면 됩니다.

근데 이렇게 하면 모든 규칙을 해제하기 때문에 뒤에 규칙이름을 적어주면 해당 규칙에만 해제시켜줍니다!