린트

린트란?

코드의 오류, 버그, 스타일 등 코드 규격을 점검하는 것을 린트라고 부릅니다.
린트를 사용하면 코드의 가독성을 높일 수 있고, 스크립트의 런타임 에러를 예방할 수 있습니다. (미리 오류를 뱉어주기 때문에)

ESLint

ECMAScript 를 검사하는 도구 중 하나이다.
ESLint 를 사용해서 코드의 포멧팅, 품질 을 검사할 수 있다.
혼자 개발하는 경우에는 자기만의 스타일대로 하기 때문에 큰 문제점은 생기지 않을 수 있지만, 여러 사람이 개발하는 경우에는 코드의 스타일을 가지고 있는 것이 좋다. 이를 이용하여 스타일, 잠재정 버그를 예방할 수 있다.

npm install eslint

// .eslintrc.js 만들기
npx eslint --init

rules 를 이용하여 여러 규칙을 추가할 수 있다. 하지만, 우리는 extends 를 이용하여 여러 규칙을 미리 정해놓은 세트를 사용해보자.

// .eslintrc.js
module.exports = {
  rules: {
    "no-unexpected-multiline": "error",
  },
}

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

프리티어

ESLint 를 사용하면, 프리티어는 같이 사용하는 것이 국룰 이다. 이유는 좀 더 이쁜 코드 스타일을 위하여~?
예를 들면, 싱글 쿼테이션을 더블 쿼테이션으로 변경해주거나 등이 있다.

npm install prettier

eslint 와 같이 사용하기 위해 아래 명령어를 이용해 설치 후 등록해주자.

npm install eslint-config-prettier

// .eslintrc.js
{
  extends: [
    "eslint:recommended",
    "eslint-config-prettier"
  ],
  plugins: [
    "prettier"
  ],
  rules: {
    "prettier/prettier": "error"
  },
}

깃 커밋전 자동화

eslint와 프리티어를 자동으로 해주는 방법이 있다. 매번 fix 하기 귀찮으니 우리는 깃 커밋시에 자동으로 설정해주자.

허스키를 설치해줍시다. (멍멍...)

// 커밋 전 발생
npm install husky

// 변경된 파일만 린트로 검사.
npm install lint-staged

package.json

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

위와 같이 설정했으면 깃 커밋전에 변경된 파일만 린트검사를 합니다.

VSCode 자동화

eslint 익스텐션을 설치해줍니다.

.vscode/settings.json

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

저장시 자동으로 eslint 가 적용되어 fix 해줍니다.