프로젝트를 여러명이서 같이 진행 할 때 코드 작성 규칙이 통일되어 있어야 원활한 코드 수정이 가능합니다. 하지만 사람마다 습관이 조금씩 다르기 때문에 패키지를 이용해서 프로젝트에서 일정한 형태의 코드로 관리 할 수 있도록 할 수 있습니다.
두개의 패키지를 설치하는 이유는 코드 에러와 문법을 정적으로 탐지할때는 ESLint를 사용하고 포맷팅에는 Prettier를 사용하기 위해서 입니다.
npm install 설치 참고
Eslint
eslint 패키지 설치
npm install -g eslinteslint 설정
eslint --init위의 코드를 실행하면 영어로 질문이 쏟아지는데 당황하지 마시고 해당사항에 맞게 선택해주시면 됩니다.
제가 선택한 항목으로 예시를 작성해 보겠습니다. ( React 프로젝트 기준 )
첫번째 질문 ( 사용목적을 묻는 항목 )
How would you like to use ESLint?
: To check syntax and find problems ( 구문 확인 및 문제를 찾는다는 의미인 것 같음)
두번째 질문 ( 프로젝트 모듈 타입 묻는 항목 )
What type of modules does your project use
: JavaScript modules (import/export)
세번째 질문 ( 프레임워크 종류 묻는 항목 )
Which framework does your project use
: React
네번째 질문 ( TypeScript 사용 여부 묻는 항목 )
Does your project use TypeScript
: No
다섯번째 질문 ( 어떤 환경에서 실행되는지 묻는 항목 )
Where does your code run
: Node
여섯번째 질문 ( 설정파일 형태 묻는 항목 )
What format do you want your config file to be in
: JSON
일곱번째 질문 ( 설치하시겠습니까? )
Would you like to install them now
: Yes
마지막 질문 ( 어떤 패키지 매니저를 사용할지 묻는 항목 )
Which package manager do you want to use
: npm
완료되면 .esLintrc.json 파일이 생성됩니다.
Prettier
prettier 패키지 설치
npm i -g -E prettiereslint와 prettier 충돌 방지를 위한 확장 패키지 설치
eslint-config-prettier : ESLint 규칙에서 Pretter 규칙과 충돌을 막아주는 역할
npm i -D eslint-config-prettiereslint-plugin-prettier : Prettier 규칙들을 ESLint 규칙에 추가
npm i -D eslint-plugin-prettier.exlintrc.json 설정
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"prettier" <<< 추가
],
"rules": {
"prettier/prettier": "error" <<< 추가
}
}
vscode settings.json 파일 설정
vscode 설정을 열어 보게되면 사용자 탭과 작업영역 탭이 존재합니다. 사용자 탭은 vscode에 로그인해서 동기화 설정을 한 경우에만 나타납니다. 사용자 탭에 설정된 내용은 동기화 된다는 가정하에 같은 아이디로 로그인하면 설정 파일도 같이 적용됩니다. 두개중 상황에 맞게 사용하시면 됩니다. 예시는 작업 영역을 기준으로 작성하였습니다.
작업 영역에 해당하는 settings.json을 변경하게되면 .vscode 폴더와 settings.json 파일이 생성되게 됩니다. 이 파일을 같이 형상 관리하게되면 같은 프로젝트의 다른 사람들은 위의 설정들을 따로 할 필요 없이 적용이 가능합니다. ( 여기서는 global패키지로 설치를 했기 때문에 프로젝트에 eslint, prettier 패키지가 없는 경우 적용이 안됩니다. )
아래의 설정을 settings.json에 넣게 되면 프로젝트의 파일을 저장 할 때 자동으로 eslint 및 prettier를 적용시켜줍니다. settings.json 파일의 형태는 개발자마다 다르기 때문에 아래의 내용을 속성에 맞게 배치하거나 추가 하시면 됩니다.
{
// Set the default
"editor.formatOnSave": true, // 파일 저장시 자동수정 옵션
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true
},
}혹시 몰라서 여러 설정이 섞인 예시 입니다.
{
"grunt.autoDetect": "on",
"editor.tabSize": 2,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"editor.fontSize": 14,
// Set the default
"editor.formatOnSave": true,<<< 추가 // 파일 저장시 자동수정 옵션
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode" <<< 추가
},
"editor.codeActionsOnSave": { <<< 추가
// For ESLint
"source.fixAll.eslint": true
},
"workbench.iconTheme": "material-icon-theme",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
}테스트
- 오류 구문 확인
- 미사용 구문 확인
- 저장할 때 자동 코드 정렬 확인
github commit시 esLint 확인 설정
Husky 패키지 설치
Git Hook 관리하는 툴
npm i -D husky명령어
- pre-commit : 커밋 메시지를 작성하기 전에 호출됨
- prepare-commit-msg : 커밋 메시지 생성 후 편집기 실행 전에 호출됨
- commit-msg : 커밋 메시지와 관련된 명령을 넣을 때 호출됨
- post-commit : 커밋이 완료되면 호출됨
- pre-push : 푸시가 실행되기 전에 호출됨
lint-staged 패키지 설치
git에 staged 상태인 파일만 lint 해주는 툴
"lint-staged": {
"*.js": [
"eslint --fix"
]
},package.json 파일 설정
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "npm test"
}
},
"lint-staged": {
"*.js": [
"eslint --fix"
]
},mrm 작업 수행
프로젝트 구성을 쉽게 해주는 패키지
npx mrm lint-staged테스트
- 구문 오류 상태로 commit
참고페이지
https://front-end.me/tool/eslint-prettier/
감사합니다 : )
