prettier와 eslint설정하기(+타입스크립트 설정)

eslint는 보통 잘못 입력한 문법을 자동으로 수정하기 위해서 사용하고 Prettier는 팀원간의 코딩 컨벤션을 맞추기 위해서 사용합니다.

하지만 eslint에는 포매팅 기능이 포함되어 있어서 eslint와 prettier를 같이 사용하는 경우 충돌이 나게 됩니다. 따라서, eslint의 포매팅 기능을 종료시키고 문법 수정 기능만 사용하게 해야 합니다.

설치해야 하는 패키지

eslint-config-prettier

eslint에서 prettier와 겹치는 포매팅룰을 삭제합니다.

eslint-plugin-prettier

eslint에 prettier의 포매팅 기능을 추가합니다.

eslint-config-pretteir로 eslint의 원래 포매팅 기능을 없애버리고 eslint-plugin-prettier로 prettier의 포매팅 기능을 사용합니다.

설치하기

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

prettier 설정하기

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true, // [1,2] -> [ 1, 2 ]
  "semi": true,
  "useTabs": true,
  "arrowParens": "avoid", // (x) => x를 x => x로 변환
  "endOfLine": "lf"
}

prettier는 기본적으로 프로젝트의 root에 있는 .prettierrc 파일에 적힌 룰에 의해서 동작합니다. 프로젝트에 이 파일이 없으면 기본값으로 세팅됩니다.

eslint 설정하기

{
  "extends": ["plugin:prettier/recommended"]
}

eslint-plugin-prettier를 설정해줬습니다. 이 플러그인은 prettier의 포매팅 기능을 eslint에 추가해줍니다. 만약 airbnb eslint 를 같이 쓰고 싶다면 아래와 같이 해주세요.

yarn add eslint-config-airbnb-base eslint-plugin-import -D

.eslintrc.js

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"]
}

여기 까지만 해주면 이런 오류가 발생합니다.

airbnb rule 에서는 파일 확장자를 지정해주지 않으면 오류가 발생합니다.

.eslintrc.js

이 부분을 추가해주면 더이상 확장자 관련한 오류가 발생하지 않습니다.

VScode에서 사용하기

vscode 설정파일에 위 내용을 입력해줍시다.

타입스크립트 프로젝트에 ESLint 적용하기

tslint가 2019년부터 업데이트를 중단했습니다. 그 이유는 개발진이 tslint보다 eslint가 좀 더 효율적으로 동작하며, eslint에서 타입스크립트를 지원하는것이 더 좋다고 판단했기 때문이라고 합니다.

다음 패키지들을 설치해줍시다.

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --D

@typescript-eslint/parser: eslint에 타입스크립트 파서 사용

@typescript-eslint/eslint-plugin: 타입스크립트 룰 모음집

eslint-plugin-react: 리액트와 관련된 eslint 룰셋

prettier와 함께 사용하고 싶은 경우

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier: eslint의 포매팅 기능 삭제

eslint-plugin-prettier: eslint에 prettier의 포매팅 기능 추가

.eslintrc.js

.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true, // [1,2] -> [ 1, 2 ]
  "semi": true,
  "useTabs": true,
  "arrowParens": "avoid", // (x) => x를 x => x로 변환
  "endOfLine": "lf"
}

vscode setting.json