여러 사람들과 하나의 프로젝트를 진행할 경우에 각자의 코딩 스타일이 다를 수 있다.
그런 경우 팀원이 서로의 코드를 읽고 이해하는 게 힘들고, 다른 사람이 보았을 때도 동일하게 어려움을 겪을 것이다.
예를 들어 ", '를 쓸 것인지
문장의 끝에 ;을 붙일 건지 안 붙일 건지
{괄호} 안에 { 괄호 } 이렇게 쓸 것인지 아닌지 등 각자 다르다.그렇기 때문에 코드의 스타일을 일관성 있게 하는 것이 좋다.
Linter와 Code Formatter를 이용하면 이러한 작업을 간편하게 할 수 있다.
그래서 프로젝트 초기 설정을 할 때, Linter로는 eslint를 설치하고, Code Formatter로는 prettier를 설치해서 사용을 많이 한다.
Eslint
eslint는 일관되고, 버그를 피할 수 있는 코드를 작성할 수 있게 만들어진 코드 분석 도구이다.
작성된 코드의 구문을 분석해서 버그가 발생할 수 있거나, 불필요한 코드, 보안상 위험한 코드 등에 대해서 알려준다.
필요한 규칙들을 경고를 띄워주거나 에러를 띄워주는 등 커스텀해서 적용할 수 있다.
설정방법
- CRA의 경우 내장되어 있어서 따로 설치하지 않아도 된다.
- dev dependencies 목록에 추가해준다.
npm install eslint --save-dev- eslint에는 일부 formatting 관련된 규칙도 포함되어 있기 때문에 prettier의 설정과 다른 설정을 갖고 있을 경우 충돌이 발생하기 때문에 eslint에서 formatting 관련 규칙을 모두 해제하는 플러그인을 사용하면 간편하게 해제할 수 있다.
npm install eslint-config-prettier --save-dev-
eslint는 언어별, 환경별(web, node, react 등) 세팅을 해줘야 되는 부분이 많아서 복잡하다.
-
.eslintrc파일을 프로젝트의 루트 디렉토리에 추가해줘야 된다.
// .eslintrc
{
"extends": ["react-app", "eslint:recommended", "prettier"],
"rules": {
"no-var": "error", // var 금지
"no-multiple-empty-lines": "error", // 여러 줄 공백 금지
"no-console": ["warn", { "allow": ["warn", "error", "info"] }], // console.log() 경고
"eqeqeq": "error", // 일치 연산자 사용 필수
"dot-notation": "error", // 가능하다면 dot notation 사용
"no-unused-vars": "warn" // 사용하지 않는 변수 경고
}
}Prettier
prettier는 코드를 포맷팅 할 수 있는 도구이다. 포맷팅 규칙을 커스터마이징해서 사용할 수 있다.
설정방법
- dev dependencies 목록에 추가해준다.
npm install prettier --save-dev.prettierrc파일을 프로젝트의 루트 디렉토리에 추가해야 된다.
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"semi": true,
"trailingComma": "all",
"quoteProps": "as-needed",
"bracketSpacing": true
}Setting.json
Settings에서 Workspace의 Json 파일을 열고, 해당 내용을 추가해준다.
- 처음에 구글링을 통해서 찾아보고, 여러 기술 블로그를 참고해서 setting.json을 설정했었다. 그런데 prettier가 적용이 안됐다.
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
- js 파일에서는 적용이 잘되는데, 왜 jsx 파일에서는 적용이 안될까 열심히 찾아보았다. 여러 가지를 넣고 빼고 하다 보니, 저기에
javascript부분에서 문제가 있다는 것을 발견할 수 있었다.
- 이렇게 적용을 해보니 문제 없이 작동하는 것을 확인할 수 있었다. (이 내용을 json 파일에 추가해서 프로젝트 설정을 했다)
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.tabSize": 2,
"workbench.startupEditor": "none"
}- 더 자세하게 찾아보니 사용하고자 하는 언어의 vscode 설정방법을 추가해줘야 되는 것이었다.
{
// Set the default
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
// Enable per-language
// 사용하고자 하는 언어의 Vscode 설정 방법을 구글링하여 추가합니다.
// js
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// ts
"[typescript]": {
"editor.formatOnSave": true
},
// jsx
"[javascriptreact]": {
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}그 외의 해야 될 부분
- 확장 프로그램(extension)으로 Prettier, eslint를 설치해준다.
setting.json을 설정하면.vscode폴더가 생성되어 올라가기 때문에.gitignore에.vscode를 추가해줘야 된다.
처음 프로젝트 초기 세팅을 했을 때, 블로그에 있는 글들을 보며, eslint와 prettier를 설정하고, setting.json 파일을 설정했었다. 하지만, repository에 올라간 각자의 코드를 보면, formmater가 제대로 적용이 되지 않았다. 또한 .gitignore 파일에 .vscode를 추가하지 않아서 repository에 올라갔다. eslint가 적용되면 prettier가 적용이 되지 않고, prettier가 적용되면 eslint가 적용이 안되고...! 이번 기회에 프로젝트 초기 세팅을 다시 해보면서, 처음 프로젝트 초기 세팅에서 어느 부분에서 잘못 되었을까 생각하는 기회가 됐다.
🥶 프로젝트 초기 세팅은 중요하지만 너무 어려워...!
🤔 글에서 잘못된 점이 있거나 보완해야 될 부분이 있으면 말씀해주시면 감사하겠습니다!😌
