ESLint란
ESLint은 2013년경에 만들어졌습니다. ESL은 가장 유명한 JS 라이브러리가 되었습니다.
ESLint은 여러분의 코드를 분석해 스타일을 체크하거나, 버그를 일으킬수있는 코딩 에러를 찾습니다. Prettier와 비교해 단순히 코딩 에러를 방지하는것보다 더 많은것을 할 수 있습니다.
설치 방법
처음에 npm install eslint --save-dev를 입력해 npm을 통해 설치가 가능합니다.
그 후 eslint --init을 입력하시면 여러가지 질문을 할것입니다.
- How would you like to use ESLint?
- What type of modules does your project use?
- Which framework does your project use?
- Where does your code run?
- How would you like to define a style for your project?
- What format do you want your config file to be in?
다음 질문에 답변을 완료한뒤 폴더를 확인 하면 .eslintrc.json 파일을 찾으실 수 있습니다.
그 파일에서 rules 에 규칙을 추가할 수 있습니다.
Prettier
Prettier의 2016년에 소개되었습니다. 코드 포맷 특화 도구 정도로 생각하시면 좋을것 같습니다.
만약 Prettier를 쓴다면, Prettier는 여러분의 코드를 특별한 규칙에 맞춰 다시 작성해줄 것입니다. Prettier는 여러분의 코드를 바꾸지 않습니다, 다만 코드의 보이는 구조를 바꿔줍니다.
Prettier의 목적은 여러분의 코드 포맷에 대한 논쟁을 종결하는것입니다. 개발자는 그저 코드를 쓰기만하면되고, Prettier가 포맷에 대해 신경써줄것입니다. Prettier는 수많은 언어를 지원합니다. JS, TS, HTML, CSS, JSON, YML, GraphQL과 더불어 Angular, Vue, React와 같은 프레임워크도 지원합니다.
사용 방법
먼저 VS Code Prettier extension을 설치해줍니다.
그 후 Control+Shift+P(Mac 의 경우는 Command + Shift + P)를 누른디 format을 검색하여 Format Document를 선택해 줍니다.
만약 이전에 다른 코드 포맷 도구를 깔았었다면 창이 뜨면서 코드 포맷 도구를 선택해달라고 할 것입니다. 그럴 경우 Prettier를 선택해 줍시다.
ESLint와 Prettier의 차이점
- ESLint는 단순히 코드 포맷 도구의 역할만 하는것이 아니라 개발자들의 코딩 에러를 찾을수 있도록 도와줍니다. 만약 변수를 선언하지 않고 사용할 경우 ESLint는 경고를 해줄것입니다. Prettier의 경우는 그러한 기능을 가지고 있지 않습니다.
- 또한 ESLint의경우는 코드 포맷에 어떠한 문제가 있는지 알려주고 그것을 고칠수 있도록 해줍니다. 하지만 Prettier의 경우 여러분이 어떻게 코드를 썻는지는 신경쓰지 않습니다. 그저 정해진 규칙에 따라 포맷을 변경합니다.
- Prettier의 코드를 다시 쓰는과정은 개발자가 실수를 하는것을 방지해줍니다.
참조: https://enlear.academy/eslint-vs-prettier-57882d0fec1d
