[Vue.js] ESLint와 Prettier

ESLint

• ES(ECMA Script)의 lint(보푸라기; 여기서는 문법 오류나 패턴을 벗어난 코드를 의미)를 제거하는 데에 도움을 주는 도구
• 주로 오류 처리를 담당하지만, 코딩 패턴을 일관되게 해주는 역할도 함
  • 스타일 가이드는 Standard, AirBnB, Google 등이 있음
    • Vue-CLI로 프로젝트를 만들 땐 Google 스타일은 지원하지 않음

Prettier

• 스크립트 formatter
• ESLint는 문법 오류 검사만 시키고, 스타일에 관한 부분은 Prettier에 전담시키기 위해 둘을 함께 사용하는 경우가 많음
  • 물론 ESLint의 스타일 가이드만 사용하는 경우도 있음
• 작동시키면 미리 설정된 규칙대로 코드를 처음부터 새로 작성한다고 함

참고로 두 기능을 Visual Studio Code 등의 프로그램에서 사용하려면 해당 프로그램에서 플러그인을 설치해야 한다.

linter나 formatter를 적용하다보면 비슷한 이름들의 패키지들이 여럿 필요해서 뭐가 뭔지 헷갈리는데, 간단하게 도식화 한 그림을 찾았다.

그림 출처: https://medium.com/@gogl.alex/how-to-properly-set-up-eslint-with-prettier-for-vue-or-nuxt-in-vscode-e42532099a9c

참고한곳

• [JS] ESLint 적용하기 @ INGG
• ESLint와 Prettier 사용법과 차이점 @ Tistory/이수재