webpack@4 - lint,prettier

webpack - lint,prettier

배경

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

EsLint

개념

코드의 가독성을 높이고 잠재적인 오류와 버그를 제거

검사 항목

• 포맷팅
  • 일관된 코드 스타일
• 코드 품질
  • 어플리케이션의 잠재적인 오류나 버그 예방

설치 및 사용법

npm i -D eslint

Rules

문서의 Rules 메뉴에서 규칙 목록을 확인

규칙에 설정하는 값은 세 가지다. "off"나 0은 끔, "warn"이나 1은 경고, "error"나 2는 오류.

설정한 규칙에 어긋나는 코드를 발견하면 오류를 출력

.eslintrc.js

module.exports = {
  rules: {
    "no-unexpected-multiline": "error",
    "no-extra-semi": "error",
  },
};

• 추천 옵션 적용

.eslintrc.js

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

초기화

npx eslint --init

Prettier

설치 및 사용법

npm i -D prettier

prettier 검사

• —write 옵션은 파일을 재작성

npx prettier app.js --write

통합방법

npm i -D eslint-config-prettier

.eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
    "eslint-config-prettier", // prettier와 충돌하는 옵션 끄기
  ],
};

eslint-plugin-prettier는 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행

npm i -D eslint-plugin-prettier

.eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
    "eslint-config-prettier",
  ],
  plugins: ["prettier"], // 플러그인 추가
  rules: {
    "prettier/prettier": "error",
  },
};

.eslintrc.js

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

자동화

husky

커밋 전, 푸시 전 등 깃 커맨드 실행 시점에 끼여들수 있는 훅을 제공한다.

husky는 깃 훅을 쉽게 사용할 수 있는 도구이다.

npm i -D husky

package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "eslint app.js --fix"
    }
  }
}

스테이징된 파일만 린트 수행

npm i -D lint-staged

package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

※ 출저

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의