코드의 규칙 정하기
프로젝트 협업시 혼자 진행하는 것이 아닌 여러명이서 함께 작업합니다. 따라서 각자의 코드 스타일이 조금씩 다른 경우가 많습니다.
이렇게 다양한 사람들과 협업을 하게 되면서 일정한 규칙을 정하면, 코드 스타일의 일관성을 유지할 수 있어, 유지보수가 쉬울 것이며, 일을 조금 더 수월하게 진행이 가능합니다.
코드린터와 코드 포멧터
- 코드 린터 는 문법에서 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것 입니다.
에러는 아니라 규칙에 어긋나는가를 검사하기 때문에 vscode에서 빨간 줄이 그여도 실행하는데는 아무 문제가 없습니다.
코드린터 : eslint
eslint 의 규칙으로는 import 순서, ==금지 등이 있을 수 있습니다. 또한 eslint자체에 포메터 기능도 어느정도 가지고 있습니다.
코드 포메터 : prettier
코드 포메터는 코드를 보기 좋게 만들어주는 것 입니다.
prettier의 규칙으로는 띄어쓰기 2칸,-길이 넘으면 줄바꿈 하기 등이 있습니다.
eslint 설치 시 설정파일
//eslint를 어떤식으로 사용할지에 대한 질문입니다.
How would you like to use ESlint ? => syntax, problems, code style
//자바스크립트 뭐쓰고 있는지 묻는것 입니다.
Waht type of modiles does your project use? => Javascript modules (import/export)
// 어떠한 프레임 워크를 사용하는지 질문입니다.
Which framework does your project use? => react
//타입스크립트 사용유무를 확인하는 질문입니다.
Does your project use TypeScript? => Yes
// 어디서 실행하는지 확인하는 질문입니다.
Where does your code run? => Browser
// 인기있는 가이드를 할지, 커스텀을 할 지 선택합니다.
How would you like to define a style for your project? => Use a popular style guide
Which style guide do you want to follow? => standard
//설정파일을 뭘로 만들지 물어보는 질문입니다.
What format do you want your config file to be in? => Javascript
Checking...
...
// 어떤 패키지 매니저로 설치할지 묻는 질문입니다.
Which package manager do you want to use? => yarn 위와 같은 규칙은 프로젝트마다 상이하므로 상황마다 다르게 설정하면 됩니다.
설치가 완료되면, eslintre.js 파일이 생성됩니다. 여기서 rules를 설정해 원하지 않는 규칙을 따로 꺼줄 수 있습니다.
// 필요없는 규칙은 off해서 꺼주세요
rules: {
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off'
}prettier 설정파일
.prettierrc.json 이란 파일에서 prettier 코드 포맷터의 설정을 변경할 수 있습니다.
{
"arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
"bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부
"endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
"htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
"jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
"printWidth": 80, // 줄 바꿈 할 폭 길이
"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
"quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
"semi": true, // 세미콜론 사용 여부
"singleQuote": true, // single 쿼테이션 사용 여부
"tabWidth": 2, // 탭 너비
"trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
"useTabs": false, // 탭 사용 여부
"vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
"parser": '', // 사용할 parser를 지정, 자동으로 지정됨
"filepath": '', // parser를 유추할 수 있는 파일을 지정
"rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
"rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
"requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
"insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
"overrides": [
{
"files": "*.json",
"options": {
"printWidth": 200
}
}
], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}husky
husky는 우리가 소스코드를 git에 commit 하기 전에, 기존의 규칙(typescript, eslint, prettier 등)을 지켜가면서 코딩을 진행하였는지 검증해 주는 도구입니다. 규칙에 어긋나는 코드가 있다면 commit을 강제로 거절합니다.
따라서, 실무적으로 더 안정적인 협업을 할 수 있습니다.
husky 설치 후 package.json 파일에 husky와 lint-staged 내용을 작성해줍니다.
{
...
...
"devDependencies" : {
...
...
},
"husky": {
"hooks": {
"pre-commit" : "lint-staged"
}
},
"lint-staged": {
"**/*.{ts,tsx}" : [
"npx eslint ."
]
}
}이러면 eslint 규칙에 위배되는 코드가 있는 파일을 커밋하려는 경우 커밋이 되지 않습니다
