ESLint와 prettier, .vscode 설명

ESLint

• 코드 린터. 규칙을 설정하는 도구다.

주로 사용 예시

• import 순서 → 중괄호 달린거를 위로 배치할지 아래로 배치할지

import express ...
import {BoardAPI}...

• == 금지 및 === 허용

• 값을 선언만하고 사용하지 않았을 때 알려줌

const qqq = 3;

'qqq'이(가) 선언은 되었지만 해당 값이 읽히지는 않았습니다.ts(6133)
'qqq' is assigned a value but never used.eslint@typescript-eslint/no-unused-vars

prettier

• 코드 포맷터. 코드의 스타일을 설정하는 도구다.

주로 사용 예시

• 띄어 쓰기 2칸 적용

• 몇글자 길이의 코드는 줄 바꿈 적용

ESLint와 Prettier의 차이

• eslint는 코드 규칙을 설정하여 코드 스타일과 코드 논리 오류를 검출한다.

• prettier은 코드 포맷팅 규칙에 따라 코드를 자동으로 정렬하고, 스타일을 적용시킨다.

.vscode 폴더

• 같이 협업하는 사람들의 vscode에 공통된 룰을 적용시킬 수 있다.

• 루트 디렉토리에 .vscode/settings.json 를 만들어 세팅을 한다.

• .vscode/settings.json 예시

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}