ESLint, Prettier

ESLint, Prettier는 JavaScript / TypeScript 프로젝트에서 코드 품질과 일관성을 유지하기 위해 거의 필수적으로 쓰이는 도구입니다.

 

ESLint : JavaScript / TypeScript 코드에서 문법 오류나 잠재적인 문제를 찾아주는 린터

 

Prettier : 코드의 스타일을 자동으로 정리해주는 포매터

 

VS Code에서 자동 포매팅 설정하기

View -> Command Palette

 

Preference: Open User Settings (JSON) 열기

 

// setting.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

 

editor.formatOnSave - 저장 시 자동 포맷팅

editor.defaultFormatter - 어떤 포맷터를 쓸지 지정 (Prettier)

eslint.validate - 어떤 파일에 ESLint를 적용할지 설정

editor.codeActionsOnSave.source.fixAll.eslint - 저장 시 ESLint 자동 수정 적용