프로젝트에서 놓치기 쉬운 버그를 찾아라! ESLint와 Prettier 활용법

1. ESLint란

ESLint는 코드의 일관성을 높이고 버그를 방지하기 위해 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구입니다. 쉽게 말해 코드 분석 도구!

ESLint를 사용할 경우 코드 스타일 문제, 버그, 취약점 등을 찾고 수정하는데에 도움을 주어 개발자들이 일관된 코드 스타일을 유지할 수 있고 더 나은 코드 품질을 유지하는데 도움이 됩니다. 

 

2. Prettier란

Prettier란 코드 포맷터로 여러 프로그래밍 언어의 코드 스타일을 자동으로 정리해주는 오픈 소스 도구입니다. Prettier는 코드 스타일을 일관되고 읽기 쉽게 만들어 주며 주로 줄 바꿈, 공백, 들여 쓰기 등 코드 포맷팅과 관련된 것들을 자동으로 적용합니다. eslint는 '코드 구현 방식' prettier는 '텍스트'를 일관되게 작성하도록 도와주는 것으로 두개의 목적은 다릅니다. 

 

3. Nuxt3에 eslint, prettier 설치하기

 

1) 관련 패키지들을 설치해준다. 

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier prettier typescript @nuxtjs/eslint-config-typescript 

 

package.json

 

2) nuxt.config.ts에 eslintPlugin 추가

 

3) 초기 설정 진행

설정을 진행해주고 나면 아래와 같은 파일이 생성된다

.eslintrc.json

4) .prettierrc 파일 생성

문법에 맞지 않다면 위처럼 eslint에러를 보여준다.