hyungju-lee

38. Configuring ESLint

이 강의에서는 프로젝트에 ESLint를 구성하는 방법을 다룹니다.
주요 내용은 다음과 같습니다:

  1. ESLint 설치 및 설정: ESLint는 Vite와 별개의 패키지로, 별도의 구성 파일이 필요합니다.
    .eslintrc 파일을 생성하여 ESLint 규칙을 정의할 수 있습니다.
  2. 규칙 설정: rules 객체에서는 각종 ESLint 규칙을 설정할 수 있으며, 예를 들어, 따옴표 사용에 관한 규칙을 error로 설정하여 더블 쿼트를 강제할 수 있습니다.
  3. 환경 및 파서 옵션 설정: environment 객체를 통해 브라우저 환경을 설정하고, parserOptions를 통해 ES6 문법(예: import 문)을 지원하도록 설정합니다.
  4. 에디터 통합: Visual Studio Code 확장인 ESLint를 설치하면 에디터에서 직접 오류를 확인할 수 있습니다.
  5. 자동 수정 기능: npm run lint 명령어를 통해 ESLint가 문제를 자동으로 수정할 수 있도록 설정할 수 있습니다.

이 강의는 ESLint를 통해 JavaScript 코드의 품질을 관리하고 일관된 코드 스타일을 유지하는 방법에 대해 설명합니다.
ESLint는 개발자가 설정한 규칙에 따라 코드를 검사하고, 필요한 경우 문제를 자동으로 수정하는 기능을 제공합니다.

.eslintrc

{
  "rules": {
    "quotes": "error"
  },
  "env": {
    "browser": true
  },
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module"
  }
}

package.json

{
  "scripts": {
    "lint": "eslint main.js --fix"
  }
}