[ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들
ESLint? Husky? Prettier?
ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다.
그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장히 중요해진 시점입니다.
코드 품질과 일관성을 유지하는 것이 왜 중요할까요?
- 가독성 향상
- 일관성 있는 코드 스타일과 높은 코드 품질은 코드를 읽고 이해하기 쉽게 만듭니다.
- 가독성이 좋은 코드는 개발자들이 더 빠르게 문제를 파악하고 해결할 수 있게 도와줍니다.
- 유지보수 용이성
- 코드 품질과 일관성이 높으면, 코드를 수정하거나 확장하기가 더 쉽습니다.
- 이는 시간과 비용을 절약할 수 있으며, 프로젝트의 수명이 길어질수록 더 중요한 요소가 됩니다.
- 팀 협업 향상
- 코드가 일관되고 품질이 높으면, 팀원들 간의 협업이 원활해집니다.
- 서로의 코드를 쉽게 이해하고, 리뷰 및 피드백 과정이 더 효율적으로 진행될 수 있습니다.
- 에러 및 버그 감소
- 코드 품질을 높이는 것은 에러나 버그의 발생을 줄이는데 도움이 됩니다.
- 이는 개발 과정에서 시간을 절약하고, 사용자에게 더 안정적인 소프트웨어를 제공할 수 있게 합니다.
- 코드 리뷰 효율성
- 코드 품질과 일관성이 높을수록 코드 리뷰 과정에서 스타일 관련 이슈에 집중할 필요가 줄어듭니다.
- 이를 통해 개발자들은 코드의 로직과 아키텍처에 더 집중하며, 전반적인 코드 품질을 개선할 수 있습니다.
- 프로젝트의 생산성 향상
- 코드 품질과 일관성을 유지하면, 프로젝트 전체의 생산성이 향상됩니다.
- 개발 속도가 빨라지고, 에러와 버그를 수정하는 데 들어가는 시간이 줄어들어 전체적인 개발 프로세스가 더 효율적으로 진행됩니다.
결론적으로, 코드 품질과 일관성을 유지하는 것은 소프트웨어 개발 프로젝트의 전반적인 성공에 큰 영향을 미치는 중요한 요소입니다.
이제, 각각의 도구들에 대해 알아보도록 할게요
ESLint
- JavaScript 코드 품질과 일관성을 위한 정적 분석 도구입니다.
- 프로젝트에 규칙을 설정함으로써 일관된 코딩 스타일을 강제할 수 있습니다.
- 예를 들어, 세미콜론 사용, 변수 선언 방식 등의 규칙을 설정할 수 있습니다.
- 이를 통해 프로젝트 전체에서 일관된 코드 스타일을 유지할 수 있으며, 팀원들 간의 협업이 더 원활해집니다.
Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
eslint.org
Husky
- Git hooks를 쉽게 설정할 수 있는 도구입니다. Git hooks는 Git에서 제공하는 기능으로, 특정 Git 이벤트(예: commit, push)가 발생할 때 실행되는 스크립트입니다. Husky를 사용하면 프로젝트에 Git hook을 쉽게 추가할 수 있어, 예를 들어 커밋 전에 ESLint와 Prettier를 실행하여 코드를 검사하고 정리할 수 있습니다.
Husky - Git hooks
typicode.github.io
Prettier
- 코드 포맷터로, 코드의 일관된 스타일을 유지하기 위해 사용됩니다. Prettier는 설정된 규칙에 따라 코드를 자동으로 수정하여 가독성을 높이고, 프로젝트 전체에서 통일된 코드 스타일을 보장합니다.
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
이러한 도구들을 설정하였을 때의 이점은 다음과 같습니다
코드 일관성
- 프로젝트 전체에서 일관된 코딩 스타일을 유지할 수 있어 가독성이 향상되고 유지보수가 쉬워집니다.
코드 품질 향상: 정적 분석 도구를 사용하여 버그나 잠재적 문제를 미리 찾아낼 수 있습니다.
팀 협업 향상
- 코드의 일관성이 유지되면, 팀원들이 서로의 코드를 이해하기 쉬워지며 협업이 원활해집니다.
세팅이 필요한 이유는 무엇인가요?
세팅이 필요한 이유는 여러가지가 있지만 그 중 중요한 몇 가지 이유를 적어두었습니다.
- 프로젝트의 품질과 가독성을 높여 개발 효율성을 향상할 수 있습니다.
- 팀원 간의 코드 스타일 차이로 인한 혼란을 줄일 수 있습니다.
- 코드 리뷰 과정에서 스타일 관련 이슈를 줄여, 더 중요한 로직과 아키텍처에 집중할 수 있게 해 줍니다.
- + Git hooks를 사용하여 자동화된 코드 검사와 포매팅을 적용함으로써, 실수를 줄이고 코드 품질을 일관되게 유지할 수 있습니다.
이러한 도구들을 설정하는 것은 프로젝트의 초기 단계에서 진행하는 것이 좋습니다.
그러면 프로젝트 시작부터 일관된 코드 스타일과 높은 코드 품질을 유지할 수 있습니다.
이후에도 꾸준히 도구들을 업데이트하고 규칙을 개선함으로써, 프로젝트의 건강한 성장을 지원할 수 있습니다.
ESLint, Husky, Prettier 세팅하기
ESLint 세팅 예시 - .eslintrc.js
.eslintrc.js라는 파일을 생성하고 아래와 같이 작성할 수 있습니다.
예시 코드이므로, 팀원과 함께 협의하여 규칙을 정하는 것이 좋습니다.
module.exports = {
// 사용하려는 파서를 정의합니다. (예: babel-eslint)
parser: 'babel-eslint',
// 사용할 확장 및 플러그인을 정의합니다.
extends: ['airbnb', 'prettier'],
// 프로젝트에 사용되는 전역 변수를 정의합니다.
globals: {
window: true,
document: true,
},
// 사용할 규칙을 정의합니다.
rules: {
// 예: 세미콜론 사용
semi: ['error', 'always'],
// 예: 콘솔 사용 허용
'no-console': 'off',
},
};
Husky 세팅 예시 - package.json
package.json 파일 내에 다음과 같이 추가합니다.
{
// 기존 package.json 내용
"husky": {
"hooks": {
// pre-commit 후크에 ESLint와 Prettier를 실행하는 스크립트를 정의합니다.
"pre-commit": "lint-staged"
}
},
"lint-staged": {
// Git에 stage된 JavaScript 파일에 대해 ESLint와 Prettier를 실행합니다.
"*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
}
}Prettier 세팅 예시 - .prettierrc
.prettierrc라는 파일을 생성하고 아래와 같이 작성할 수 있습니다.
이 또한 예시 코드이므로 팀원들과 함께 규칙을 협의하고 정하는 것이 좋습니다.
{
// 줄바꿈에 사용할 문자를 정의합니다. (예: LF 또는 CRLF)
"endOfLine": "lf",
// 세미콜론 사용 여부를 정의합니다.
"semi": true,
// 문자열에 사용할 따옴표의 종류를 정의합니다. (예: single 또는 double)
"singleQuote": true,
// 들여쓰기에 사용할 스페이스의 개수를 정의합니다.
"tabWidth": 2,
// 파일 끝에 개행 문자를 추가할지 여부를 정의합니다.
"trailingComma": "all"
}
End