[TIL] ESLint, Prettier 적용하기

📌공부 과정속에서 작성중인 포스팅입니다.

잘못된 부분이 기재되어있을수도 있으며, 발견시 수정하도록 하겠습니다.

0. 공부계기 

요 근래 RN 토이프로젝트에 참여하게되었는데 사전세팅으로 ESLint, Prettier을 적용하게되었다.

협업할때 처음써보기도하고 vscode 그냥 확장자 설치만 하면 되는줄알았는데 조금 더 설정해야하는 부분들이 있어 정리해보려고한다.

 

+ 위의 툴들을 사용하는 이유는 둘다 코드 컨벤션, 즉 강제성을 부여하여 협업을 좀 더 용이하게 하기위함이다.

ESLint는 코드 퀄리티를 보장해주는 툴이고(구현방식)

Prettier는 코드 스타일을 깔끔하게 통일시켜주는 툴이다.(띄어쓰기, 탭)

ESLint 설정에 참고한 블로그

ESLint 설정

RN에서 eslint, prettier

[React Native 삽질기] #2 - lint, 폴더 구조, 상태관리(redux-saga), 디버깅 설정

1. ESLint,Prettier 설치방법

npm i -g eslint
eslint --init

npm으로 패키지를 깔아주고 init으로 파일을 생성해주면된다

RN은 프로젝트를 새로 생성하면 자동으로 생긴다던데..나는 프로젝트를 생성하고 해당 명령어를 쳐서 진짜 그렇게되는지 모르겠다

무튼 init 명령어로 ESLint 파일을 생성하면 이런식으로 물어본다 

해당블로그에 각 질문별 어떻게 설명하면 좋은지 예시가 나와있다.

React Native에서 ESLint, Prettier를 프로처럼 사용하기

 

prettier는 다음의 명령어로 깔았다

npm install --save-dev prettier eslint-plugin-prettier
yarn add eslint-config-prettier eslint-plugin-prettier

두개다..할 필요는 없고 하나만 선택해서 해도 된다.

제대로 안깔린거같아서 yarn으로도 해보고 npm으로 해봤다

2. ESLint,Prettier 파일 생성및 설정

ESLint의 경우 위의 과정대로 하니까 아래와 같이 생겼다

근데 prettier의 경우.prettierrc혹은 .prettierrc.js 파일을 생성해도 해당 prettier 아이콘으로 바뀌지않았다,,!

위의 해답을 아래의 블로그에서 찾았다.

ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.

 VSCode Setting에서 설정하면 VSCode Extension으로 설치한 prettier 플러그인에만 적용이 가능하고, npm이나 yarn으로 설치해서 세팅한 prettier 플러그인에는 적용되지 않기때문에 .prettierrc 파일을 꼭 이용해야 한다고 한다.

적용우선순위는 .prettierrc 파일이 있으면 VSCode Settings의 설정은 무시되고 .prettierrc 파일로 룰이 적용된다고 한다.