코딩 규칙을 유지하는 것은 팀 개발에 매우 ​​중요합니다. 그러나 팀 규모가 커질수록 조심하는 것만으로는 충분하지 않습니다. 자동화는 다양한 코딩 스타일을 수정하여 이 문제를 해결합니다.

이 자동화 작동 방식

이 방법은 npm 스크립트를 사용하여 자동으로 코드를 확인하고 수정합니다. 가장 좋은 타이밍은 각 git commit입니다.

도구

주요 도구는 다음과 같습니다.

ESLint

허스키

ESLint는 사용자 지정 구성 가능한 규칙을 기반으로 하는 코드 검사 도구이며 Husky는 커밋 타이밍에 코드 수정 명령을 실행할 수 있습니다.

설정 방법

처음부터 시작합시다! 프로세스는 3 부분으로 나뉩니다.

프로젝트 설정

npm 스크립트 작성

사전 커밋 후크 설정

사전 조건

우선 중요한 것은 프로젝트 구조입니다. git 리포지토리 설정이 필요하며 리포지토리는 하나의 프로젝트용이어야 하며 클라이언트 또는 서버 측만 포함해야 합니다. 즉, 모노레포 구조는 이 문서에서 다루지 않습니다.

1. 프로젝트 설정

폴더와 파일 만들기

index.js라는 하나의 파일을 만듭니다.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

그러나 실제로 이름 지정과 파일 내용은 원하는대로 괜찮습니다.

git 및 npm 패키지 설정

프로젝트가 git, npm으로 초기화되지 않은 경우 다음 명령어를 사용하여 설정해 주세요.

git init
npm init -y

이 글에서 테스트 코드는 express.js를 사용하므로 express를 설치해주세요.

npm install express

그리고 ESLint 라이브러리가 있어야 합니다. ESLint 구성을 설정하는 편리한 명령이 있습니다.

npm init @eslint/config

여러 옵션을 선택하여 린트 규칙을 선택할 수 있습니다.

현재 프로젝트 구조는 다음과 같습니다.

/.git
/node_modules
/.eslintrc.js
/index.js
/package.json
/package-lock.json

이제 lint 규칙을 기반으로 index.js에 몇 가지 오류가 표시됩니다.



오류가 보이지 않으면 .eslintrc.js에 아래 내용을 설정해주세요.

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true
  },
  extends: "standard",
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: "latest"
  },
  rules: {
    quotes: [2, "double", "avoid-escape"]
  }
}

2. npm 스크립트 작성

package.json에 2개의 스크립트를 추가합니다.

패키지.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint index.js",
    "lint:fix": "eslint --fix index.js"
  },

Lint 스크립트는 오류를 확인하고 표시합니다. 해 봅시다.

npm run lint

출력은 그렇게 보입니다.



다음 명령인 'link:fix'는 오류를 수정합니다.

npm run lint:fix

이제 오류가 사라진 것을 볼 수 있습니다!
단, 코드를 반환하여 다음 과정을 확인하시기 바랍니다.

3. 사전 커밋 후크 설정

다음 설정은 커밋 시 후크를 만드는 것입니다.
다음 명령을 실행합니다.

npx husky-init && npm install

/.husky 폴더가 생성된 것을 확인할 수 있습니다!



/.husky/pre-commit을 열고 아래와 같이 내용을 변경합니다.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint:fix
# This command should be the same command that you executed the previous process

# Optional
#exit 1

선택 과목:
후크만 시도하고 아무것도 커밋하지 않으려면 마지막 줄에 exit 1를 추가합니다.

후크를 등록하려면 ./husky/pre-commit을 추가하고 커밋하십시오.

git add .husky/pre-commit && git commit -m "Add pre-commit"

이제 자동화를 테스트할 시간입니다. 다음 명령을 실행하십시오.

git add index.js && git commit -m "test commit"

index.js를 확인하면 오류가 다시 제거된 것을 확인할 수 있습니다.

결론

개발자는 이 자동화를 통해 코딩 규칙에 항상 주의하도록 해제됩니다. 일부 규칙을 잊어버리더라도 ESLint는 개발자가 커밋하면 규칙을 유지하도록 도와줍니다.

참조:
https://expressjs.com/en/starter/hello-world.html
https://www.npmjs.com/package/eslint
https://typicode.github.io/husky/