[Vue3] 프로젝트 ESLint, Prettier 설정해보기

이번 피드에서는 ESLint와 Prettier를 세팅하는 내용을 정리해보겠습니다.

 

우선 ESLint와 Prettier에 대해 간단히 정리해보겠습니다. 자세한 내용은 추가로 찾아보시길 바랍니다.

 

ESLint : 코드의 문법 오류를 검사하고, 잠재적인 문제를 찾아내며, 코드 스타일 규칙을 적용하여 일관성을 유지한다.

Prettier : 코드를 읽기 쉽게 자동으로 포맷하여 일관된 스타일을 제공한다. ESLint와 함계 사용해서 코드 스타일 및 문법 검사를 모두 처리한다.

 

IDE는 Intelij로 진행하여, 프로젝트 생성부터 ESLint와 Prettier를 세팅해보겠습니다.

 

 

프로젝트 생성 및 기본 세팅

---

프로젝트생성은 IDE나 터미널 중에 마음에 드시는 걸로 진행하시면 됩니다.

 

저는 아래와같이 Intelij를 이용해서 프로젝트를 생성하였습니다.

 

프로젝트 생성 후 프로젝트 루트 위치에서 npm install 명령어를 통해 프로젝트가 의존하는 패키지와 라이브러리를 설치해 줍니다.

 

해당 명령어를 실행하면 package.json파일에 따라 필요한 모듈을 node_modules폴터에 다운로드하고 설정해줍니다.

 

      

        
        
        
        
      
npm install

 

위의 단계까지 진행이 됬으면, 초기 상태의 프로젝트를 구동해 볼 수 있습니다.

 

      

        
        
        
        
      
npm run dev

 

 

이제 ESLint와 Prettier를 세팅해보겠습니다.

 

 

ESLint 세팅

---

1. ESLint 설치

      

        
        
        
        
      
npm install --save-dev eslint

 

2. ESLint 초기화

      

        
        
        
        
      
npx eslint --init

 

ESLint초기화 명령어를 실행하면 아래와 같이 단계별로 옵션을 선택해야 한다.

 

본인의 프로젝트에 맞게 선택해주면 초기화 작업이 완료된다.

 

ESLint 초기화 옵션선택 예시

 

3. Vue ESLint 플러그인 설치

      

        
        
        
        
      
npm install --save-dev eslint-plugin-vue

 

 

Prettier 세팅

---

1. Prettier 설치

      

        
        
        
        
      
npm install --save-dev --save-exact prettier

 

 

2. ESLint, Prettier 충돌방지 플러그인 설치

      

        
        
        
        
      
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

 

 

 

Intelij에서 세팅

---

1. ESLint 세팅

Intelij 세팅(Setting)에서 ESLint를 검색해서 ESLint를 설정해주면 된다.

 

2. Prettier 세팅

Prettier는 우선 플러그인을 설치해주어야 한다. 플러그인메뉴에서 Prettier를 검색해서 플러그인을 설치해준다.

 

플러그인 설치 후, ESLint와 동일하게 Prettier메뉴에서 설정을 완료해준다.

 

위의 작업을 모두 마치게 되면, 정상적으로 ESLint와 Prettier 세팅이 완료된다.

 

이제 소스를 작업하고, 저장을 누르면 코드가 깔끔하게 포맷팅되어 정리된다.