🤔 필요성
타입스크립트에 처음 입문하는 사람이거나, 자신만의 방식으로 코드를 짜 왔던 사람이라도 일정한 코드 컨벤션을 유지하고 싶은 필요성을 느끼는 것은 당연하다. 자바스크립트(타입스크립트)에는 ESLint라는 도구가 있어, 코딩 컨벤션을 유지할 수 있도록 도와 준다.
VSCode와 같은 IDE에 ESLint를 설정하면, 자신의 코드의 어느 부분이 컨벤션적으로 문제가 있는지 찾아 주며 이를 수정하여 일정한 코드 패턴을 유지하는 것이 가능하다.
하지만 매번 자신의 코드를 작성한 이후에 다시 ESLint에 맞추어 수정하는 것은 상당한 노동력을 요구한다. 따라서 자신이 작성한 코드를 자동으로 ESLint에 맞게 변환해주는 프로그램이 필요하게 된다. VSCode의 Prettier를 이용하면 자신의 코드를 일일히 수정할 필요 없이 코드를 일정한 패턴에 맞게 고칠 수 있다.
결론적으로, 이러한 필요성에 의해 ESLint + Prettier를 VSCode에서 적용하고 코드를 유지보수하게 된다.
🗺️ 계획
VSCode와 TypeScript를 통해 개발될 새로운 프로젝트를 시작하고 해당 프로젝트에 ESLint와 Prettier를 적용할 것이다. ESLint의 규칙은 airbnb를 선택할 것이다.
결과적으로 ESLint로 airbnb 가이드에 따라 에러를 경험할 수 있고, 저장 시에 prettier에 의해 형식에 맞게 코드가 바뀌어 저장된다. 이 때 간단한 오류는 수정된다.
🚀 프로젝트 Setup
VSCode Extension 설치
VSCode의 Extension의 형태로 ESLint와 Prettier를 설치해야 한다.
프로젝트 개별이 아니라 전역으로 모듈을 설치하는 것이라고 이해할 수 있다.
Extension 검색을 통해 ESLint와 Prettier를 설치하자.
프로젝트 설정
ESLint와 Prettier를 본격적으로 적용하기 전, 기본 프로젝트를 설정할 것이다.
프로젝트를 시작할 디렉토리에서 시작한다.
먼저 프로젝트를 시작한다.
npm과 typescript는 글로벌 설치가 되어 있음을 가정한다.
npm init -y
tsc -init이제 필요한 파일들을 설치한다.
순서대로,
1. 타입스크립트, eslint, prettier를 설치하고
2. 타입스크립트 플러그인을 설치하고
3. prettier 플러그인을 설치하고
4. airbnb 규칙을 설치한다.
npm i -D typescript eslint prettier
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i -D eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-config-airbnb-base📝 설정 파일 Setup
여기까지 따라왔다면 다음과 같은 디렉토리 구조를 가지고 있다.
ESLint 설정 (.eslintrc.json)
이제 .eslintrc 파일을 생성해서 ESLint의 설정을 할 차례이다. .eslintrc의 확장자로는 yaml, json, js와 같은 형식을 제공하는데, 여기선 JSON을 활용해 보겠다.
.eslintrc.json
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"airbnb-base",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"rules": {
"prettier/prettier": 0,
"import/extensions": 0
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}이전에 설치했던 모듈들을 알맞게 설정하면 된다.
추가로 설정한 부분은 rules부분과 settings 부분인데, 여기에 대한 설명을 추가하겠다.
rules
eslint의 규칙은 무조건 지키기 위해 만든 것이 아니라, 어디까지나 개발의 편의성을 위해 만들어진 것이다. 따라서 rules부분 설정을 통해 사용하지 않을 규칙을 설정할 수 있다. 0으로 설정할 경우 해당 규칙을 무시하고, 1로 설정하면 해당 규칙에 대한 경고가 표시된다.
기본적으로 prettier와 상충되는 규칙을 무시하기 위해 prettier/prettier를 설정했고,
TypeScript를 사용하는 프로젝트이기 때문에 import시 파일 확장자를 명확히 표기하기 어려워 import/extensions 규칙 역시 무시하였다.
개발을 진행하는 도중 ESLint와 관련된 오류를 만났고, 이를 지킬 수 없거나 무시하고자 한다면 airbnb 가이드의 명세에 따라 이 부분을 설정하자.
settings
파일이 복잡해지면 모듈을 import하는 과정 역시 정리가 필요하다.
setting에서 설정 가능한 옵션들의 자세한 명세는 여기서 확인이 가능하다.
Prettier 설정 (.prettierrc.json)
궁금한 부분은 다음 문서를 참조하면 된다. 굳이 여기서 다시 설명할 내용은 아니기 때문에 링크를 첨부했다.
prettierrc.json 파일 옵션 명세
필자가 설정한 옵션들은 다음과 같다. 필요한 부분을 입맛대로 수정해서 사용할 수 있다.
.prettierrc.json
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "consistent",
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "auto"
}VSCode 설정 (settings.json)
설정을 무사히 마쳤다면 이제 저장 시 자동으로 이때까지의 설정이 적용되도록 하면 된다. 이 설정은 ./.vscode/settings.json에서 이루어진다. 해당 디렉토리와 파일을 먼저 생성하자.
settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}설정 내용이 많지는 않다. 이름에서 알 수 있듯, 저장 시에 eslint와 관련된 내용으로 파일을 fix한다는 것을 유추할 수 있다.
여기에 더해 이 파일이나 VSCode의 전역 설정에서 자동 저장과 관련된 설정을 만지면, 저장 버튼을 의식하지 않고도 자동으로 코드 포맷팅이 이뤄질 수 있다.
만약 이 부분이 설정되었는데도 자동 저장이 잘 되지 않을 수 있는데, 이 경우 settings.json보다는 앞선 설정에 오류가 없지는 않는지 확인해 보는 쪽을 추천한다.
📚 정리
필자는 ESLint와 Prettier의 설정이 달라 Prettier가 정리해준 코드가 ESLint에 걸려 오류를 만드는 경험을 한 뒤로 이렇게 정리 글을 작성하고자 하는 결심을 했다... ESLint가 컨벤션을 잡아 주는 것은 좋은데, 컨벤션 자체가 다양하고 디테일이 조금씩 다르기 때문에 이러한 트러블슈팅을 한 번쯤은 경험할 만 하다고 생각한다...
그리고 이렇게 정리했음에도 설정에 문제가 있을 가능성이 없는 것은 아니다. 필자도 아래 문제를 겪기 전까진 스스로의 세팅이 괜찮은 줄 알고 있었다.
이는 필자가 경험한 eslint로 포매팅이 완료된 이후 prettier에 의해 에러 메시지가 나오는 모습이다. 어느 장단에 맞추라고! ㅎㅎ
