VSCode에서 Prettier 대신 ESLint 적용하기

프로젝트 시작

9월부터 시작된 교내 IT 서비스 개발 동아리에서 '검색 및 결과 UI' 구현을 맡았다.

 

프로젝트를 세팅하고 그 과정에서 겪었던 시행착오와 해결을 포스팅하고자 한다.

 

깃헙에 올라가 있는 프로젝트를 클론 받아서 브랜치를 딴 후에 코드를 작성하고 저장하니 바로 에러가 발생했다.

 

내가 마주한 에러는 다음과 같았다.

 

Strings must use singlequote

 

프로젝트의 ESLint 파일에 singlequote(따옴표, ')를 사용하도록 설정되어 있기 때문이다. (쌍따옴표는 Double quote이다)

 

문제는 기존에 내가 로컬에서 혼자 개발할 때 사용하던 Prettier로 인해 저장(cmd + s)을 할 경우 임포트한 라이브러리나 파일들이 모두 Double quote string으로 저장되는 것이었다.

 

당연히 ESLint 파일에서는 Singlequote를 사용하도록 설정되어 있기 때문에 에러가 발생한 것이다.

 

결국 VScode에서 Prettier 대신 ESLint의 규칙을 준수하도록 설정해주어야 한다.

 

해결 방법

먼저 VSCode에서 ESLint 확장 프로그램을 설치해야한다.

 

extension에서 ESLint 검색으로 설치할 수 있다

설치했으면 VSCode에서 ESLint로 코드 포맷팅하는 설정을 확인해야한다.

 

맥 유저 기준으로 Cmd+, 를 동시에 입력하면 VSCode 설정을 열 수 있다. (Code -> Preferences -> Settings 순서로도 접근할 수 있다)

 

여기서 JSON 파일을 직접 수정해야한다. 

 

아래 붉은색으로 표시한 아이콘을 클릭하면 settings.json을 열 수 있다.

 

 

이제 아래 코드 4줄을 복사해서 setting.json 파일에 붙여넣어주자.

 

 "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

첫 번째 줄은 ESLint 포맷팅 설정을 한다는 의미이고, 나머지 코드는 우리가 작성한 코드를 저장할 때(cmd + s or ctrl + s) 포맷팅을 해준다는 의미이다.

 

여기까지 했으면 될 줄 알았으나

작업하던 파일로 돌아와서 저장하니 여전히 Prettier 규칙이 적용되어 임포트 한 파일 경로가 쌍따옴표 문자열로 변경되었다.

 

우리가 할 일은 ESLint로 코드 인덴팅을 하면 Prettier 규칙이 오버라이딩하는 것을 막아주어야 한다.

 

우리가 아까 설정했던 settings.json에서 다음 설정을 주석처리 해주자.

  //   "editor.defaultFormatter": "esbenp.prettier-vscode"

이제 프로젝트로 돌아와서 저장을 해보면 Prettier가 ESLint로 코드 인덴팅한 것을 더 이상 덮어쓰지 않을 것이다.

 

 

 

https://daveceddia.com/vscode-use-eslintrc/

ESLint + VSCode: How to Format Your Code Using .eslintrc