Vue CLI 프로젝트 ESLint, Prettier 적용 방법

Vue.js/ESLint & Prettier

Vue CLI 프로젝트 ESLint, Prettier 적용 방법

doozi

2022. 9. 27.

📢 들어가며

이번 포스팅에선 "Vue CLI"로 설치한 프로젝트에 ESLint와 Prettier를 적용하는 방법에 대해 다룬다.
맛집 지도 토이 프로젝트를 진행하며 겪었던 삽질을 정리하고자 글을 작성해본다.

👑 ESLint란?

ECMAScript/JavaScript 코드 버그를 식별/회피하기 위한 도구.

버그를 잡음과 동시에 포맷 기능도 지원하고 있다.
코드 품질 에러를 잡는 데 도움을 준다.
(ex. no-unused-vars , no-extra-bind , no-implicit-globals , prefer-promise-reject-errors...)

Vue-cli v3 이상에서는 자동으로 eslint 가 추가된다.
또는 vue create 시에 ESLint 옵션 선택으로 자동으로 설치가 가능하다.

설치가 된 프로젝트의 package.json엔 아래와 같은 ESLint 관련 코드가 추가되어 있을 것이다.

  "scripts": {
    "lint": "vue-cli-service lint"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "~4.5.0",
    "eslint-plugin-vue": "^6.2.2",      
    "eslint": "^6.7.2", 
    "babel-eslint": "^10.1.0",
  }
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {} 
  },

vue-cli-service lint
- npm run lint 명령 시 실행되는 동작이다.
- 실행 시, ESLint 버그 캐치 + 포맷팅이 진행된다.
@vue/cli-plugin-eslint
- Vue CLI 용 ESLint 플러그인.
eslint-plugin-vue
- Vue.js용 공식 ESLint 플러그인.
eslint
- ESLint

eslintConfig 는 ESLint 설정 파일이다.
eslintConfig 는 지금처럼 package.json 에 존재할 수도 있고, .eslintrc 파일로 따로 빼서 관리해 줄수도 있다.
.eslintrc 파일은 .json 파일이어도 되고, .js 파일이어도 상관 없다.

eslintConfig 설정을 하나씩 살펴보자.

👑 ESLint Config

💎 root

ESLint 는 위에서도 설명했다시피, 설정파일을 따로 둘 수 있는데,
이는 하나의 코드 저장소에서 여러 프로젝트가 존재하는 경우, 여러 개일 수 있다.

ELint 는 현재 폴더 안에 설정 파일이 있는지 우선적으로 확인해보고 없으면
그 상위 폴더를 한 단계씩 거슬러 올라가면서 설정파일을 찾는다.

이 때, root 옵션이 true 로 설정되어 있는 파일을 만나면 더 이상 상위 폴더로 올라가지 않는다.

즉, 내 코드에선 package.json에 정의가 되어있으니
이 package.json 상위의 폴더들은 검사하지 않는 것이다.

💎 env

다양한 환경마다 전역(global) 변수를 통해 접근 가능한 고유 객체가 있다.
대표적인 예로, windows 객체가 있다.
이 windows 객체는 브라우저 환경에선 전역 접근이 가능하지만 NodeJS에선 불가능하다.

ESLint 는 이런 선언해주지 않아도 기본적으로 존재하는 객체들에 대해 오류를 내기 때문에,
어떤 변수가 존재하는 환경인지를 인지시켜줘야한다.

이 역할을 env 가 하고 있다.

위와 같이 node를 true로 설정해 준다면,
NodeJS에서 실행가능한 전역 객체에 대한 대응을 할 수 있게 된다.

    "env": {
      "node": true
    },

💎 extends

유명 기업이나 ESLint 공식에서 ESLint 설정을 공유하고 있다.
이를 extends 에 써주면 그들의 ESLint 설정을 그대로 활용할 수 있다.

활용하고자 하는 ESLint 플러그인 및 Prettier 플러그인을 이 곳에 써주면 된다.

  "extends": ["airbnb"]

예를 들어 ,에어비앤비에서 공유한 ESLint 설정을 쓰고 싶다면,
eslint-config-airbnb npm 패키지를 다운 받은 후 위와 같이 설정해주면 된다.

확장 가능한 라이브러리는 위와 같이 eslint-config- 라는 접두어가 붙는데, 이는 extends 에서 생략 가능하다.
정확히는, eslint-config- 가 붙는 라이브러리(이하 'config 라이브러리')는

config 라이브러리 규칙과 충돌하는 ESLint 규칙을 OFF 해주는 역할을 한다.

"extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],

내 코드에선 위와 같이 작성되어 있었다.
plugin:vue/essential 는 Vue 공식에서 제공하는 ESLint 플러그인으로,

에러를 내는 코드와, 예상치 못한 결과를 낳는 코드를 예측한다.
eslint:recommended 는 ESLint 공식에서 추천하는 포맷 설정이다.

이런식으로 남의(?) 설정을 가져와서 세팅(확장)해줄 수 있다.

💎 parserOptions

개발자가 작성하는 자바스크립트 코드는 실제로 브라우저와 같은 실행환경에서 실제로 돌아가는 코드와 다른 경우가 많다.
예를 들어, 타입스크립트나 JSX 와 같은 자바스크립트의 확장문법으로 개발하거나
Babel 과 같은 트랜스파일러를 통해 최신 문법으로 개발하는 경우를 들 수 있다.

💡 Babel

ES6 이상의 최신 문법으로 작성한 자바스크립트 코드를 ES5 이하의 문법으로 작성한 것처럼 코드를 컴파일/트랜스파일 해주는 도구.
최신 문법이 적용되지 않는 실행환경에서도 최신 문법 자바스크립트가 문제 없이 작동하도록 도와준다.

ESLint 는 순수 자바스크립트 코드만 이해할 수 있기 때문에
자바스크립트의 확장 문법이나 최신 문법으로 작성한 코드를 린트하기 위해선 그에 상응하는 파서(parser)를 설정해줘야한다.

    "parserOptions": {
      "parser": "babel-eslint"
    },

위 코드를 보면 babel-eslint 라는 eslint 용 바벨이 설정되어 있다.
babel-eslint는 vue cli 로부터 자동으로 설치가 되어 있는 플러그인이다.

💎 rules

ESLint 규칙을 디테일하게 제어할 때 사용하는 옵션이다.
기본적으로 비워져있다.

extends 옵션을 통해 설정된 규칙을 덮어쓰고 싶을 때 사용하면 된다.

예를 들면...

Airbnb 기반 설정에는 no-console 규칙을 어기면 경고(warn)를 내는데,
경고가 아닌 오류(error)가 발생하도록 설정해줄 수 있다.

{
  "extends": ["airbnb"],
  "rules": {
    "no-console": "error"
  }
}

👑 Prettier란?

공백 및 탭 간격, 키워드 간격, 쉼표 스타일 등 코드 형식에 대한 포맷팅을 지원해주는 도구이다.
코드 스타일을 설정해놓으면 자동으로 코드 수정이 가능하다.
Prettier 를 활용하면 코딩 컨벤션을 쉽게 지정할 수 있다.

💡 코딩 컨벤션

읽고, 관리하기 쉬운 코드를 작성하기 위한 코딩 스타일 규약

💎 ESLint vs Prettier

	Prettier	ESLint
용도	서식 및 스타일 지정용	코드 버그 잡기용
실행 방법	prettier --write	eslint --fix

👑 Prettier 적용

Prettier 를 적용해주기 위해 설치부터 해주자.

--dev 는 devDependencies(개발용 의존성. 배포 떈 포함되지 않음) 에 추가한다는 옵션이다.

$ npm i prettier --dev

Prettier 를 설치 했다면, 이제 어떤 스타일을 쓸 것인지 설정해줘야한다.
일단은 prettier 공식 설정(@vue/eslint-config-prettier)으로 설치해줄것이다.

vue cli 로 설치한 프로젝트는 별도의 eslint-config-prettier 라이브러리 보단,

@vue/eslint-config-prettier을 사용하는 것을 권장한다.

vue cli 용 라이브러리가 아닌 다른 외부 라이브러리를 사용한다면 별도의 설정이 필요할 수 있기 때문이다.
(나는 처음에 vue cli 프로젝트 용이 아닌 eslint-config-prettier를 사용했었는데, 아주 난리가 났었다.)

이 라이브러리 말고도 vue cli 로 설치한 프로젝트는 vue cli 용 플러그인이 따로 존재할 수 있으니,
항상 @vue/ 가 접두어로 붙은 플러그인이 별도로 존재하는지 확인하면 좋다.

$ npm i --dev @vue/eslint-config-prettier

설치한 스타일은 extends 부분에 추가해주면 된다.

"extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/eslint-config-prettier" // 추가!
    ],

👑 .prettierrc

설정한 스타일에 개인적인 설정을 덮어씌우고 싶다면
루트 디렉토리에 .prettierrc 파일을 파고 설정해주면 된다.
나는 아래와 같이 설정해줬다.

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 4,
  "printWidth": 100,
  "singleAttributePerLine": true
}

singleQuote
- 쌍따옴표가 아닌 작은 따옴표를 사용한다.
semi
- 코드 끝에 항상 세미콜론은 붙인다.
tabWidth
- 탭간격. 나는 4칸으로 했다.
printWidth
- 줄 바꿈할 최대 줄 길이
singleAttributePerLine
- html 속성을 이어 쓰지 않고 각각 한 줄마다 작성한다.

나는 팀 코드 영향으로 이 설정이 익숙해서 파일을 따로 파줬다.
이 옵션 외에도 다른 옵션도 지정 가능하다. (자세히)

🚨 Prettier 적용 중 에러가 난다면?

설치 하고 나니 아래와 같은 에러가 떴다.

Error: Failed to load plugin 'prettier' declared in 'package.json » @vue/eslint-config-prettier': Cannot find module 'eslint-plugin-prettier'

해석해보니, eslint-plugin-prettier 라는 모듈이 없다고 한다.
당연하다. 안 깔아줬다.

💡 eslint-plugin-prettier

ESLint 는 코드 버그를 잡음과 동시에 포맷터 역할도 해 줄 수 있기 때문에,
코드 스타일 포맷터인 Prettier 와 충돌할 수도 있다.
이를 방지하기 위해서 추가하는 것이 eslint-plugin-prettier 이다.
Prettier 규칙들을 ESLint 규칙에 추가하는 패키지이다.
eslint --fix 만 실행해줘도 prettier --write를 사용할 필요 없이 Prettier 까지 적용시켜준다.

해결법을 알아보기에 앞서,
이 에러가 아닌 다른 에러가 발생하는 환경이 있을 것이다.
(나 같은 경우 'Failed to load plugin 'prettier' declared in 'package.json'...' 에러가 발생하기도 했다.)

아래에서 설명할 방법으로 다른 에러도 높은 확률로 해결 가능하다😎
차근차근 삽질한 내용을 정리해보자.

먼저 라이브러리 설치 후 에러가 발생하는 대표적인 원인은 두가지이다.

다른 라이브러리와 버전 호환이 되지 않아서
필요한(의존해야하는) 라이브러리가 존재하지 않아서.

이럴 때 활용할 수 있는 것이 npm info 명령어이다.
npm info는 말 그대로 해당 라이브러리에 대한 정보를 알 수 있는 명령어이다.

설치하고자 했던 @vue/eslint-config-prettier 라이브러리에 대한 정보를 info 명령어로 알아보자.

많은 정보가 나온 것을 확인할 수 있었다.

여기서 알아야할 정보는 dependencies 와 latest 버전이다.
위에서 언급했던 버전 호환 문제와 의존 라이브러리의 부재 문제를 해결해줄 키워드들이다.

다른 정보들은 딱히 필요 없어서, 옵션을 정해줄 수도 있다.

필요한 의존 라이브러리 확인

$ npm info [라이브러리명] peerDependecies

역대 릴리즈 버전 확인

$ npm info [라이브러리 명] versions

@vue/eslint-config-prettier 의 의존 라이브러리를 검색하자,
eslint 7.28.0 버전 이상과, prettier 2.0.0 이상이 필요하다고 나왔다.

package.json을 확인해보니,

    "eslint": "^6.7.2",
    "prettier": "^2.7.1",

prettier 의 버전은 충족했지만, eslint의 버전이 한참 낮은 것을 확인할 수 있었다.

이럴 땐, 기존의 eslint 를 버전업해줘도 되긴 하지만,
vue cli로 인해 자동 설치된 라이브러리여서 다른 의존 라이브러리의 버전 또한 수정해야할 가능성이 높기 때문에,
설치하고자하는 라이브러리의 버전을 최신이 아닌 현재 환경에 맞춰서 낮은 버전을 설치해주면 된다.

하지만 얼마나 낮은 버전을 설치해줘야할지 모르겠을 때!
versions 옵션을 사용해주면 된다.

확인해보니, 최신 버전 이전 버전이 6.0.0 인 것으로 나왔다.
6.0.0에 대한 의존 라이브러리를 다시 검색해보았다.

eslint 가 5.0.0 버전 이상이어야하고,
eslint-plugin-prettier 의 버전이 3.1.0,
prettier 는 1.13.0 버전 이상이어야한다.

아까 에러의 원인이었던 eslint-plugin-prettier 라이브러리가 존재를 드러냈다.
eslint와 prettier 는 모두 내 환경에 적합한 버전이다.

즉, 나는 @vue/eslint-config-prettier를 6.0.0 버전으로 설치해야하고,
eslint-plugin-prettier@^3.1.0 라이브러리를 추가로 설치해야한다.

npm i @vue/eslint-config-prettier@6.0.0 eslint-plugin-prettier@^3.1.0 --dev

서버를 돌리자 의존성끼리의 충돌없이 아무 에러가 나지 않는 것을 확인할 수 있었다! 🎉

👑 JetBrains Tools 에서 Prettier 를 적용하는 방법

설치한 Prettier는 코드를 보면 확인할 수 있다.

코드를 확인하자, Prettier 가 내 코드가 개판이었다고 열심히 설명하고 있다.

Intellij나 Webstorm 같은 JetBrains 툴에서는 이를 Ctrl + Shift + Alt + P 단축키로 한번에 수정해줄 수 있다.
코맨드 라인 명령어로는 Vue CLI의 npm run lint를 실행시켜주면 된다.

(이 명령어는 정확히는 eslint --fix 와 prettier --write 를 함께 구동시킨다.)

하지만 매번 명령어를 실행시켜주기엔 귀찮으니, 툴에서 자동 포맷이 되도록 설정해줄 수 있다.

먼저, Settings(ctrl + alt + s) - Plugins 에서 Prettier 플러그인을 다운해준다.

Settings - Languages & Frameworks - JavaScript - Prettier 에서

Prettier package 를 npm install 해준 Prettier 경로로 설정해준다.

리포맷/저장할 때마다 자동으로 Prettier 가 실행되었으면 해서,

"On 'Reformat Code' action" 과 "On save" 체크박스에 모두 체크한다.

Settings - Tools - Actions on Save 에서

저장할 때마다 수행하고 싶은 동작을 설정해줄 수 있다.

나는 아래 내용을 체크해주었다.

Reformat code
- 코드를 포맷팅 시킨다.
Rearrange code
- 코드를 재정렬 시킨다.
Run code cleanup
- 코드 스타일 위반을 즉시 제거
Run eslint --fix
- ESLint 실행 및 포맷팅
Run Prettier
- Prettier 실행 및 포맷팅

이렇게 설정해두면 저장할 때마다 ESLint/Prettier 리포맷이 될 것이다. 🎉

이번 포스팅에선 Vue CLI 프로젝트에 ESLint/Prettier 적용하는 방법에 대해 알아보았다!

댓글/하트/피드백은 언제나 환영입니다🥰

참조

저작자표시

Vue.js/ESLint & Prettier