ESLint, Prettier 설정하는 방법

bp.chys·2020년 7월 7일
2
post-thumbnail

ESLint + Prettier

ESLint란?

ESLint는 더 일관성있게 코드를 작성하고 버그를 식별 및 회피할 목적으로 ECMAScript/JavaScript 코드에서 발견된 패턴을 개발자에게 알려주기 위한 도구입니다. ESLint에 작성된 모든 규칙은 플러그인이며 런타임에 더 추가 할 수 있습니다.

Vue + ESLint 적용하기

npm install vue

// vue-cli로 프로젝트 생성
vue create frontend

vue-cli v3.xx 이상 에서는 자동으로 eslint를 추가됩니다.

package.json을 가보면 다음과 같이 eslint을 설정하는 코드가 들어있음을 알 수 있다.

// package.json
{
...
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",           // ** 1️⃣ vue에서 공식으로 권고하는 eslint plugin
    "vue-template-compiler": "^2.6.11"
  },
  
  ...
  
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential", // base 규칙과 함께 에러를 내는 코드와, 예상치 못한 결과를 낳는 코드를 예측.
      "eslint:recommended"    // ** 2️⃣ eslint 공식 홈페이지에서 제공하는 기본 룰 적용
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
...
}

1️⃣ vue 파일 안에 있는 <template>, <script> 부분을 점검합니다.

2️⃣ extends 부분에 "eslint: recommended"라는 것은 ESLint 공식문서에 정의된 기본 룰을 기본적으로 따르겠다는 것입니다. --fix 설정을 하면 홈페이지에 게시된 규칙들 중에서 렌치 표시가 된 것은 올바르게 고쳐줍니다. (추후 자동화에 적용)

Prettier 적용하기

Prettier는 ESLint가 제공하는 formatting보다 더 강화된 formatting을 제공합니다. ESLint가 자동으로 고쳐주는 것보다 더 많은 범위내에서 formatting을 고쳐주니 ESLint와 Prettier를 함께 쓰는 것이 좋습니다.

npm i prettier --save-dev로 prettier를 단독으로 설치할 수 있지만, ESLint가 적용될 때 통합으로 동시에 적용하기 위해서는 별도의 패키지가 필요합니다.

npm i eslint-config-prettier eslint-plugin-prettier --save-dev 을 통해 dev의존성에 eslint와 prettier를 통합으로 사용할 패키지 두 개를 추가합니다.

// package.json
{
  ...
  
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-config-prettier": "^6.11.0",  // ** 추가
    "eslint-plugin-prettier": "^3.1.4",   // ** 추가
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  
  ...
  
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "plugin:prettier/recommended"   // ** 추가
    ],
    ...
  }
  ...
    
}

여기까지 추가하고 한번 prettier 규칙에 어긋나는 코드를 작성해보겠습니다.

prettier의 기본설정은 공식 홈페이지에서 확인할 수 있는데, singleQuote: falsesemi: true로 되어있군요. 그럼 Single Quote에 세미콜론을 붙이지 않았을때는 다음과 같은 오류메세지를 볼 수 있습니다.

prettier의 기본 규칙은 원하는 규칙으로 커스텀할 수 있습니다.

단, 커스텀 하기 위해서는 다음과 같이 rules에 추가해주면됩니다. 위에서 보았던 기본설정과 반대로 적용해보겠습니다.

// package.json
{
...
"eslintConfig": {
 ...
 "rules": {
   "prettier/prettier": [
	"errors",
   	{
     	    "singleQuote": true,
     	    "semi": false
   	}
   ]
},
}

이렇게 설정하고 이번엔 반대 컨벤션으로 코드를 작성해보면 다음과 같이 custom prettier가 잘 적용된 것을 확인할 수 있습니다.

no-loops 플러그인 추가

실무에서 휴먼 에러가 많이 나기 때문에 for 문을 사용하는 경우는 드물다고 합니다.

반복문 사용 시 경고를 띄워주기 위해 no-loops 플러그인을 추가해보겠습니다.

npm i eslint-plugin-no-loops --save-dev

// package.json
{
  ...
  "eslintConfig": {
    ...
    "plugins": ["no-loops"], 
    "rules": {
      "no-loops/no-loops": "warn"
    }
  },
  ...
}

👉 규칙 (rules)

ESLint에는 프로젝트에서 사용하는 규칙을 수정할 수 있습니다. 규칙을 변경하는 경우, 다음과 같은 방법으로 설정해야 합니다.

  • "off" 또는 0: 규칙을 사용하지 않음
  • "warn" 또는 1: 규칙을 경고로 사용
  • "error" 또는 2: 규칙을 오류로 사용

여기까지 하고 javascript 파일에 반복문을 작성해보면 다음과 같이 no-loops 경고가 뜹니다.

자동화

1. 저장 시 자동 포매팅

ESLint를 검사하는 것을 매번, eslint app.js --fix 명령어를 통해서 수행한다면 이 또한 일이 될 것입니다.

IDE 자체적으로 저장할 때마다 자동으로 포맷팅을 적용해줄 수 있습니다.

IntelliJ > Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint를 선택합니다.

  • Run eslint --fix on save

의 체크박스를 체크하고 확인을 누르면, 이제 IntelliJ가 저장될 때마다 자동으로 ESLint를 검사하여 포맷팅을 적용할 수 있도록 만들 수 있습니다.

2. 커밋하기 전에 ESLint 검사

기능 단위로 코드를 기록 및 백업할 필요가 있다면, 팀으로 협업할 때, 커밋 단위는 중요한 단위로 사용됩니다. 커밋하기 전에 ESLint를 일괄적으로 검사하고, 만약 ESLint 컨벤션을 위반하는 코드가 존재한다면 커밋을 못하게 막을 수 있습니다.

이를 위해서는 husky 패키지를 사용하면 되는데요, 설치해보도록 하겠습니다.

npm i husky --save-dev

// package.json
{

...
  "eslintConfig": {
    ...
  },
  "browserslist": [
    ...
  ],
  
  // 추가
  "husky": {
    "hooks": {
      "pre-commit": "eslint app.js --fix"
    }
  }

}

패키지를 설치한 뒤, package.json에 명령어를 추가해주면 커밋하기 전에 eslint app.js --fix 스크립트를 실행하게 만들 수 있습니다. 하지만 파일이 많아지면, ESLint를 검사하는데 있어서 시간이 오래 걸리겠죠.

이를 예방하기 위해서 변경된 파일만 ESLint를 검사하도록 할 수 있습니다.

3. 변경 내역이 있는 파일만 커밋 전에 ESLint 검사

npm i lint-staged --save-dev

lint-staged 패키지를 사용합니다. husky를 설치하듯이 의존성을 추가해주고, package.json파일 밑에 명령어를 추가해줍니다.

// package.json
{

...
  "eslintConfig": {
    ...
  },
  "browserslist": [
    ...
  ],
  
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // 수정
    }
  }
  // 추가
  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

이렇게 해주면 커밋 전에 모든 js파일 중에서 변경 내역이 있는 파일만 ESLint를 검사하여 이상이 없을 경우에만 커밋이 성공하게 만들어줄 수 있습니다.

이외에도 다른 ESLint 설정을 사용하고 싶다면, extends에 다른 'airbnb'나 'google' 'naver' 등을 추가하면 원하는 코드 스타일을 적용할 수 있습니다.

ex) 네이버 자바스크립트 컨벤션 (에어비앤비 스타일)


참고자료

프론트엔드 개발환경의 이해: 린트

profile
하루에 한걸음씩, 꾸준히

0개의 댓글