Eslint, Prettier 적용하기

Eslint, Prettier는 자바스크립트 개발을 할 때 경험을 향상시켜줄 유용한 도구들 이다.

린트의 종류에는 JSLint, JSHint, EsLint등이 있다.

Eslint가 검사하는 항목

• 코드 포매팅

  • 일관된 코딩 컨벤션을 유지하는 기능
    예) 들여쓰기는 두칸으로 해라

• 코드 품질

  • 잠재적인 오류를 찾아주는 기능
    또한 노드 패키지로 제공된다.

    npm install eslint-config-prettier eslint-plugin-prettier

프리티어 포매팅 규칙을 eslint로 추가하고, 서로 충돌하는 옵션이 있으면 프리티어 규칙을 사용하도록 하는 도구이다.

린트 자동화

• 깃 훅을 사용하는 방법
  • 소스 트래킹 도구로 깃을 사용한다면 깃 훅을 이용해 변경한 코드만 검사할 수 있다. 훅이라는 것은 깃 명령어 실행 전후에 뭔가를 더 실행할 수 있는 방법이다. 이때, husky를 함께 사용하면 수월하게 깃 훅을 사용할 수 있다.

npm install husky

• pakage.json 파일

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

• 변경된 파일만 린트로 검사하는 법

  • lint-staged

    	npm install lint-staged

  • pakage.json 파일

	"lint-staged": {
        "*.js": "npm run lint"
        }

• 에디터 확장 도구를 사용하는 방법

Prettier

Prettier는 코드를 자동으로 정리해주는데 코드 정리 규칙을 세부적으로 설정 할 수 있다.

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}