TS #2 ::ESLint와 Prettier

해다·2022년 3월 30일
0

JavaScript & TypeScript

목록 보기
9/10
post-thumbnail

🙊 잘못 기재한 부분이 있다면 댓글로 남겨주세요!


🤔 이거 어디서 본 것 같은데...

저번주 주제지만 어제 수업 들으면서 의문이 해결되어서 짧게 적는다!
수업시간에 항상 뚫어져라 보고 있는 멘토 님의 vs code 하단에는 항상 이런 것들이 적혀있었다.

graphQL도 익숙하고 go Live는 뭔지 모르겠지만 느낌적으로 알 것 같고...
근데 Prettier과 ESLint 뭘까?

결론부터 말하면 둘 다 개발환경에서 설정하면 편한 확장 프로그램들이고, typescript 설정을 하면 보통 자동으로 내장이 된다!

설치는 npm 이나 yarn을 통해서 해도 되고 확장 프로그램을 통해서도 받는다.

📌ESLint

자바스크립트는 에러를 정확히 찝어주지 않는데, ESLint를 사용하면 코드를 분석해서 문제점을 찾고 고쳐주는 코드 린터이다.
여기서 린터는?

린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다.

그렇다고 한다!

이 ESLint를 사용하면 나중에 폴더 안에 있는 설정파일을 수정해서 사용자의 편의대로 코딩 문법 규칙을 더 정하고 더 수정할 수도 있다. 너무 편하다!
항상 노드로 돌리고 나서야 에러가 있는지 없는지 알려주던 js에 비하면 정말 천사같다.고마워 타입스크립트! 고마워 ESLint! 🥲

📌Prettier

ESLint가 문법 구조를 정해주는 툴이라면, Prettier은 코드의 구조적인 부분을 자동으로 조정해주는 코드 포맷터(Formatter) 이다. 포맷터는 포맷을 정해주는 도구를 말하는게 아닐까~ 하는 추측을 할 수 있었다. 실제로 사용자가 원하는 포맷을 지정해고 저장을 하면 알아서 적용이 된다. 이건 setting.json에서 따로 설정을 해줘야하는 부분이지만 여튼 그렇다.

❗결론

typescipt를 사용하면 자연스럽게 사용하게 될 도구이고, 수많은 오류, 들여쓰기를 사용하게 될 개발자들에게 필수적인 프로그램이다. 혹여나 빼먹지 말고 꼭 사전에 설치하고 사용해서 노드 돌리기 전에 에러를 찾고 광명도 찾자!! 🥲

profile
잘하는 건 아닌데 포기하진 않을거야

0개의 댓글