[javascript] ESLint와 JSDoc을 함께 사용하는 방법은 무엇인가요?

29 Nov 2023

javascript

먼저, 프로젝트를 위해 ESLint를 설치해야합니다. 다음 명령을 사용하여 ESLint를 설치합니다:

npm install eslint --save-dev

ESLint를 설치한 후에는 프로젝트 디렉토리에 .eslintrc 파일을 생성하여 ESLint 구성을 설정해야합니다. 이 파일은 ESLint가 사용할 규칙 세트를 정의합니다. 예를 들어, 다음과 같은 .eslintrc 파일을 만들 수 있습니다:

{
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

이 예에서는 세미콜론을 항상 사용하고, 문자열에는 쌍따옴표를 사용해야한다는 규칙을 정의하고 있습니다. 필요에 따라 이러한 규칙을 변경하거나 추가할 수 있습니다.

이제 JSDoc을 사용하여 코드에 주석을 추가할 수 있습니다. JSDoc은 JavaScript 코드의 함수, 변수 및 클래스에 대한 문서화 주석을 작성하는 데 사용됩니다. JSDoc 주석은 코드를 문서화하고 IDE에서 자동 완성 및 타입 검사를 지원할 수 있도록 도와줍니다.

함수에 JSDoc 주석을 추가하는 예를 살펴보겠습니다:

/**
 * 두 숫자를 더하는 함수입니다.
 * @param {number} a - 첫 번째 숫자
 * @param {number} b - 두 번째 숫자
 * @returns {number} - 두 숫자의 합
 */
function addNumbers(a, b) {
  return a + b;
}

JSDoc 주석은 함수에 대한 설명, 매개변수의 타입 및 설명, 반환 타입 등을 지정할 수 있습니다. 이러한 주석은 코드의 가독성과 이해를 도와주며, 팀원들과의 협업 시 좋은 참조 자료가 될 수 있습니다.

ESLint는 JSDoc 주석도 검사할 수 있습니다. .eslintrc 파일에 다음과 같은 규칙을 추가하여 JSDoc 주석을 체크할 수 있습니다:

{
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
    "valid-jsdoc": "error"
  }
}

이렇게 하면 ESLint가 JSDoc 주석을 엄격하게 검사하고 오류를 표시하게 됩니다. 이를 통해 JSDoc 주석의 일관성을 유지하고 문서화의 품질을 높일 수 있습니다.

따라서 ESLint와 JSDoc을 함께 사용하여 코드의 품질을 향상시키고 문서화를 용이하게 할 수 있습니다. 이러한 도구들은 JavaScript 프로젝트에서 매우 유용하며, 코드 작성과 유지 관리를 좀 더 쉽게 만들어줍니다.

참고 자료

ESLint: https://eslint.org/
JSDoc: https://jsdoc.app/