eslint 와 prettier

ESLint

린팅

• 코드의 오류, 버그, 잠재적 문제를 찾아 내 줌.
• 코드 품질과 유지보수성 높이기 위해서 다양한 규칙을 설정 할 수 있음
  • eslint.config.mjs 파일에 원하는 방식으로 규칙 설정.
  • ex)

 rules: {
      'no-unused-vars': 'warn',
        // 선언 해 놓고 사용하지 는 변수를 찾아내는 `no-unused-vars`라는 규칙
        // 요 규칙을 warning 모드로 쓸거야. 
        // error로 해놓으면 빨간색 밑 줄, 경고문구 등으로 표시
        // off로 해놓으면 아예 경고 안뜸.

ESLint 규칙 수준
ESLint 규칙의 수준은 세 가지로 설정할 수 있음.

1. "off" 또는 0: 규칙을 끕니다. 해당 규칙을 검사하지 않습니다.
2. "warn" 또는 1: 규칙 위반 시 경고 메시지를 출력합니다. 코드 실행에는 영향을 주지 않지만, 수정할 필요가 있음을 알립니다.
3. "error" 또는 2: 규칙 위반 시 오류 메시지를 출력합니다. 이는 일반적으로 코드 실행을 중단시킵니다.

prettier

포맷팅

• 코드의 시각적 스타일과 형식을 자동으로 정리해줌 (들여쓰기, 공백, 따옴표, 세미콜론 등등)
• 코드의 스타일을 일관적으로 유지하게 하는 포맷 일관성에 중점(== 포맷팅)

🤔 근데 왜 익스텐션에서 설치 했었는데 굳이 또 npm 패키지 설치를 하는거야?

• 사실 vscode 내부 settings 설정 만으로도 prettier를 실행하고 포맷팅 할 수 있음.
• 근데 확장 프로그램 설치하면? 별도의 저런 설정 없이 바로 사용할 수 있음.
• 근데 여기서 또 npm 패키치 설치는 뭐가 다르지?
  👉 dependencies와 devDependencies 차이에서 배웠듯, 협업을 위해. == 일관성!
  👉 프로젝트 마다 동일한 버전과 설정을 사용할 수 있게 함.
  👉 프로젝트를 클론하거나 새로운 환경에서 작업해도 일관된 포맷팅 규칙이 유지됨.
  👉 팀원들 모두 같은 프리티어 설정과 버전을 사용할 수 있음! (npm i 로 샤르륵!)