[Prettier / ES Lint] 2022_10_21

Prettier / ES Lint

처음 코딩을 공부 할때는 띄어쓰기 하나하나 모든 사람들과 약속해서 정해진 포멧을 정해서 코드를 작성해야 하는 줄 알았다. 하지만 학원에서 Prettier와 Eslint를 배우고 역시 다 편리한 도구들이 있구나 라는 생각을 했다.

Prettier

일단 Prettier는 formatter이다. 내가 설정한 스타일대로 자동으로 코드스타일을 수정해주는 익스텐션이다. Prettier를 사용하면 tab를 이용했을 때 몇칸을 띄울것인지 ''를 사용할것인지 ""를 사용할것인지 사소한 포멧까지 정할수있어 보다 손쉽게 다른사람들 내 팀과 코드의 통일성을 유지할수있다. 이런 사소한 부분이외에는 대부분 prettier에서 기본적으로 정해진 디폴트 값으로 코딩을 하기에 여러사람들과의 협업에 용이 해진다.

ES Lint

실제 프로젝트에서는 Prettier단독으로 사용하기보다는 ES Lint와 같이 사용한다. ES Lint는 코드 포멧팅 기능도 있지만 주로 에러와 문법을 탐지할때 사용한다. JS에서 에러가 발생하는 부분이 있으면 Es Lint에서 친절히 어느부분에 에러가 발생했다고 붉은색 하이라이트를 그려주어 오류를 찾는데 조금더 편리하게 사용할수있다.

통합하기

위에서 보면 Prettier는 포멧터이고 ES Lint도 포멧터 기능을 수행한다고 했다. 그래서 ES Lint와 Prettier를 사용 할때는 포멧터끼리의 역할이 충동 할수도있기에 이를 통합시켜주는 패키지를 추가하여야 서로 포멧터끼리의 역할이 충돌하지 않게 해주어야 한다.

yarn add --save-dev eslint-config-prettier eslint-plugin-prettier 를 설치해주고

// .eslintrc.js

module.exports = {
  parserOptions: {
    ecmaVersion: 'latest',
  },
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended', <--- 요기에 Prettier를 추가해준다.
  ],
};