4. 프론트엔드 개발환경의 이해: 린트, 프리티어

6강의 내용을 정리. 이번 포스팅은 요약을 많이 했다. 자세한 내용은 원본 블로그를 참조하자.

https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174

프론트엔드 개발환경 이해 | T아카데미 온라인강의

 

린트(Lint)

---

협업 코드의 규칙을 정하고싶다면? 린트를 사용한다. 코드의 보푸라기를 제거하는 역할.

코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다.

코드의 포맷팅과 품질관리 도구다!

 

console.log()(function(){})(); //Error

이런 잘못된 코드를 방지해주는 역할을 한다.

 

 

 

ESLint

ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나다. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적이다. 과거 JSLint, JSHint에 이어서 최근에는 ESLint를 많이 사용하는 편이다.

 

설치

npm i -D eslint

 

환경설정 파일 만들기 .eslintrc.js :

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
  ], 
}

recommended, airbnb, standard 옵션을 주로 사용한다고 한다.

 

 

사실 이러한 설정은 --init 옵션을 추가하면 손쉽게 구성할 수 있다. eslinctrc를 알아서 만들어준다.

npx eslint --init 

 

eslint --init으로 세팅중

 json으로 선택했더니 이런 결과가 나왔다.

 

Prettier

---

코드를 더 예쁘게 만든다.(포맷팅) ESLint는 예쁘게하기 + 코드 악취 제거. Prettier는 그냥 예쁘게하기.

프리티어는 좀 더 일관적인 스타일로 코드를 다듬는다.

 

$ npm i -D prettier

사용

$ npx prettier app.js --write

 

 

Prettier와 ESLint 연동

---

ESLint도 코드 포맷팅 기능이 있고, 프리티어도 있다. 둘이 충돌하지 않게 겹치는부분은 ESLint의 기능을 꺼준다. 그리고 ESLint의 포맷팅기능을 프리티어로 덮어씌운다.

$ npm i -D eslint-config-prettier
$ npm i -D eslint-plugin-prettier

설정파일에 추가한다.

// .eslintrc.js
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

 

 

이제 ESLint만 실행하면 프리티어 규칙이 자동으로 적용된다.

$ npx eslint app.js --fix

 

결과

Before

After

 

자동화

---

husky

커밋 전, 푸시 전 등 깃 커맨드 실행 시점에 끼여들수 있는 깃 훅을 이용하자. husky는 깃 훅을 쉽게 사용할 수 있는 도구다. (Git 2.13.0 이상 버전을 지원) 커밋 메세지 작성전에 끼어들어 린트로 코드 검사 작업을 추가하면 좋겠다.

$ npm i -D husky 

 

스테이지된 파일만 검사하도록 설정한다

$ npm i -D lint-staged

 

package.json: //스테이징 파일에 eslint 실행

{
  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

 

package.json: //커밋 전에 허스키 훅

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

 

 

VSCode 확장프로그램

---

확장프로그램을 이용해보자.

 

.vscode/settings.json: //저장버튼누르면 알아서 포맷팅 + 품질관리하게 설정

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

 

결과

저장버튼을 누르면 자동으로 정렬된다

 

 

 

참고

---

http://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html

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