2022.05.26

오늘은 eslint 기본 프로젝트 내에서 설정해준것에 대한 오류 때문에 수정하느라 조금 애를 먹었다.

그래도 예전에 모르던 것을 알게되어 기쁘다.

 

 

1. JSDoc 

 

https://velog.io/@yijaee/JSDoc%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4-JavaScript-%ED%8C%8C%EC%9D%BC-%EB%AC%B8%EC%84%9C%ED%99%94%ED%95%98%EA%B8%B0

JSDoc을 사용해 JavaScript 파일 문서화하기

API 문서를 생성하거나, 타입을 추론하거나, 버그 픽스 리포트를 작성할때 사용한다고 한다. 

/**
 * App 함수
 *@return {React.HTMLAttributes<HTMLDivElement>}
 */
function App() {
  return <div className="App"></div>;
}

export default App;

즉, 함수에 대한 설명 같은 것을 알아보기 쉽게 주석을 통해 작성하는 느낌이었다.

특히 어떤 파라미터가 들어가는지 쉽게 설명할 수 있다는 점이 좋았다.

예시는 다음과 같다. 

/**
 * Computer 함수
 * @constructor
 * @param {string} name - The name of the computer.
 * @param {string} year - The year of the computer.
 */
function Computer(name, year) {
}

 

 

2. prettier, eslint 충돌 문제

 

내가 가진 문제는 prettier는 빈 공간을 2개 자동으로 세팅하는데, eslint는 4개 이상의 공백을 원해서 둘이 충돌이 일어났다.

구글링을 통해 다음과 같이 해결하였다. 

 

{ 
	"extends": [ "some-other-config-you-use", "prettier" ] 
}

요런식으로 prettier를 쓴다는 것을 알려주도록 추가해주니까 에러가 해결되었다. 

또한 다음과 같이 설치를 해주는 것도 도움이 된다고 한다.

npm install eslint-config-prettier