호박너구리 블로그

※ ESLint를 Typescript에 맞게 설치하는 것이 궁금하다면 이전 글을 참고해주세요. 타입스크립트를 사용한다면 인터페이스에서 임시 변수명을 지어줘야 하는 경우가 있습니다. 다음과 같이 말이죠. interface InputProps { setValue: (value: string) => void value: string } 그런데 기본적인 ESLint설정을 해둔 상태라면 다음과 같은 no-unused-vars Lint 에러가 나타납니다. 인터페이스니까 사용하는 부분이 없는 것은 당연한데 말이죠. 이 부분은 린트 rules 설정으로 해결 할 수 있습니다. module.exports = { ... extends: [ "eslint:recommended", // "plugin:react/recommen..

개발 2021. 5. 19. 13:35

ESLint와 Prettier는 코드를 깔끔하게 유지하고 컨벤션을 통일하는데 좋은 툴입니다. 그래서 많은 프로젝트에서 많이 사용하고 있는데요, 오늘은 NextJS 프로젝트에 ESLint와 Prettier를 적용해보겠습니다! ※ 혹시 ESLint를 잘 모르시거나 자세한 설정에 대해 궁금하시다면 이전 글을 먼저 읽고 와주세요! 1. ESLint 적용하기 ※ 사실 패키지 설치와 설정 파일 세팅은 NextJS가 아니더라도 동일하게 적용 가능합니다. (1) 패키지 설치 우선 다음 명령어를 통해서 패키지를 설치합니다 npm install eslint --save-dev # or yarn add eslint --dev (2) 설정 파일 세팅하기 그리고 설정 파일을 세팅하면 되는데요, --init 플래그를 사용한 다음..

개발 2021. 5. 17. 12:09

1. ESLint란? Lint는 협업하며 개발을 하신 분이라면 많이 들어보셨을 것입니다. Lint(혹은 Linter)란 에러가 있는 코드에 표시를 달아주는 것을 뜻하는데요, 에러와 코딩 스타일을 잡아주기 때문에 여러 명이 코드를 작성하더라도 한 사람이 코딩한 것처럼 깔끔하게 만들어줄 수 있죠. ESLint는 ES(Ecma Script)와 Lint를 합친 것으로, (Ecma라는 기구에서 만든 Script가 표준 Javascript이기 때문에) 자바스크립트 코드의 에러를 표시해 줍니다. 린트를 통해 잡아내고 싶은 에러의 기준은 직접 설정할 수 있는데요, 문법적인 오류만 잡아낼 수도 있고 세미콜론(;) 사용과 같은 전반적인 코딩 스타일을 정해둘 수도 있습니다. 2. ESLint 설정하는 방법 (1) 패키지 설..

개발 2021. 5. 16. 20:25