Eslint와 Prettier를 사용해보자.

응애 나 프론트애긔👶·2022년 10월 24일

Eslint 누구냐 넌.

Eslint

Eslint는 es와 lint의 합성어이다.

es는 우리가 흔히 말하는 es5 es6와 같이 ECMAScript를 뜻하는 것이고, lint는 보푸라기라는 뜻이다.

즉 우리가 사용하는 자바스크립트 파일의 지저분한 보푸라기들을 에러(혹은 경고)처리 해준다.

Eslint에서 기본적으로 설정한 규칙이 있고
다른 대표적인 eslint 설정은 airbnb를 많이들 사용한다.

사용방법 ? 간단하지 😏

$ npm i eslint --save-dev

가장 먼저 터미널 창에 eslint를 다운 받아준다.
(eslint는 동작 시에 사용할 일이 없는 개발 업무에 도움을 주는 패키지이기 때문에 dev로 집어 넣어준다.)

$ npx eslint --init

이후 eslint 파일을 생성 해주는데 생성 과정에서 여러가지 질문들이 나오는데

TypeScript를 사용 할 것인지 ?
React를 쓰는지 Vue를 쓰는지 ?

등등 질문에는 사용자가 답변을 해주면 된다.

그렇게 되면 .eslintrc 파일이 생성되게 된다.


//.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier',
  ],
};

위와 동일하게 설치되진 않고 기본적인 설치만 되었을 것이다.

필자는 위와 같이 설정을 하였고 eslint:recommended를 사용하기로 했다.

Prettier 알고 있지 !

Prettier

Eslint는 코드의 품질(?)을 책임져주는 녀석이다.

예를 들어

console.log()(function test(){})()

위와 같이 console.log 뒤에 세미콜론 없이 즉시 실행 함수를 사용하게 된다면 코드는 정상적으로 동작하지 않는다.

이러한 코드를 Eslint는 주시하고 있다가 우리에게 알려준다.

Prettier는 코드의 외모(?)를 담당한다.

코드의 들여쓰기는 몇칸으로 할 것인지 ?
코드 끝에 세미콜론을 꼭 붙일 것인지 ?
문자열 따옴표는 큰 따옴표인지 작은 따옴표인지 ?

등등을 설정해준다.

그렇다면 이쁘장한 코드를 만들러 가보자.

$ npm install prettier --save-dev --save-exact

먼저 터미널 창에 prettier를 다운 받아준다.

$ npm install eslint-plugin-prettier eslint-config-prettier --save-dev

위의 코드와 같이 plugin과 config를 다운 받아준다.

config는 eslint가 prettier와 충돌할 때 설정을 비활성화 해준다.

plugin은 코드 포맷을 할 때 prettier를 사용하게 해준다.

이후 코드 컨벤션을 팀원들과 함께 의논 후 적용해주면 된다.

//.prettierrc.js

module.exports = {
  singleQuote: true,
  // 문자열은 따옴표로 formatting
  semi: true,
  //코드 마지막에 세미콜른이 있게 formatting
  tabWidth: 2,
  // 들여쓰기 너비는 2칸
  trailingComma: 'all',
  // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 	  	//formatting
  printWidth: 80,
  // 코드 한줄이 maximum 80칸
  arrowParens: 'avoid',
  // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
};