js개발자라면 한 번씩은 코드에러를 겪는다. 이는 js가 동적언어(프로그램을 직접 실행해서 코드를 분석하는 방식)이라 에러를 찾기 위해선 코드를 실행해봐야하기 때문이다. 어떠한 부분에서 어떤 식으로 발생했는지 알기가 힘들기에 이를 ESlint와 prettier를 통해 방지 또는 해결할 수 있다.
eslint
ecmascript와 lint(보푸라기)의 합성어로 에러가 있는 코드에 표시를 달아준다. 즉, js문법에 따라 작성하지 않을 경우 경고를 주고, 수정하도록 돕는다.
우선 다운 받아보자.
npm i -g eslint다운 받고 먼저 초기화를 해주자
eslint --init그러면 단계별 질문이 나올텐데 본인의 기호에 따라 답하자.
ex)
? How would you like to use ESLint?
❯ To check syntax and find problems
? What type of modules does your project use?
❯ None of these
? Which framework does your project use?
❯ None of these
? Does your project use TypeScript?
❯ No
? Where does your code run?
❯ browser
? What format do you want your config file to be in?
❯ JavaScript완료가 되면 .eslintrc.json 파일이 생성되고 이곳에서 설정을 할 수 있다. package.js에서도 설정이 가능하며, .eslintignore파일을 생성하면 해당 파일, 폴더에서의 설정을 할 수 있다.
ex)
// ts.js
const hi = 0테스트를 위해 아래 명령어를 입력하면 어떠한 오류가 발생했는지 알 수 있다. 이외에도 다양한 기능이 있으니 eslint공식페이지를 참고하자
eslint ts.js//변수 선언 후 사용하지 않았다는 오류 발생prettier
prettier란 코드 포맷터로 프로그래머가 설정한 형식에 따라 코드를 수정해준다. 실생활을 예시로 들자면 스마트폰에서 앱들을 한 폴더에 담아 정리할지, 아니면 종류별로 분류해서 담을 지 정하는 걸 예시로 들 수 있다.
우선 다운을 받기 위해서
npm i -g -E prettier//global로 --save--exac(정확한 버전)으로 설치이제 .prettier.json을 설정해보자. 형식을 참조하자.
{
"tabWidth": 4,
"useTabs": true,
"endOfLine":"lf",
"semi":false
}탭 크기, 탭 들여쓰기 사용 여부, 마지막 줄 줄바꿈, 세미클론 사용 여부등을 설정해보았다.
마치며
만약 회사에 들어간다면 이를 통해서 회사 내의 형식을 맞출 것 같고, 굉장히 유용한 프로그램인 것 같다. 오류방지 및 코드 포맷팅 등 좋은 기능이 많으니 시간을 들여 문서를 읽어보면 좋을 것 같다!
