공식 문서
코드 컨벤션은 다양한 회사에서 공식 문서로 제공하고 있다.
자신에게 맞는 것을 찾아 쓰거나, 협업을 한다면 동료와 협의 후 선택하여 사용하면 된다.
우아한테크코스에서는 airbnb의 코드 컨벤션을 따른다고 한다.
코드 컨벤션의 효용성
- 코드컨벤션이 필요한 이유는 '일관적인 코드작성', '협업'에 있다. 하나의 프로젝트를 여러 개발자가 협업해서 진행한다고 가정한다면, 모든 개발자의 코드 스타일이 다르기 때문에 일관성이 떨어지며, 유지보수가 힘들다.
따라서, 코드 컨벤션을 통해 이를 방지할 수 있다. 컨벤션은 유지보수에 투자되는 비용을 최소화하기 위해 통일된 코드 작성법을 제시한다. 협업을 통한 개발을 하기 전에는, 구성원 내에서 지켜야 할 코드 켄벤션을 정하는 과정이 필수이다.
- 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가능)를 가지기 때문에 개발자 간 통일된 규약이 없다면 코드의 의도를 파악하거나 오류를 찾기 어렵다. 코드 컨벤션을 준수하면 가독성이 좋아지고, 성능에 영향을 주거나 오류를 발생시키는 잠재적 위험 요소를 줄여준다. 특히 규모가 큰 프로젝트일수록 유지보수 비용을 줄이는 데 도움이 된다.
eslint, prettier
eslint와 prettier은 일관된 코드를 작성하기 위해, 이를 강제하게 한다.
prettier은 포맷팅(일관된 코드)의 기능을 하며, eslint는 포맷팅, 코드품질(잠재된 오류 찾아줌)의 기능을 한다. 이 둘을 함께 사용하는 것이 좋다.
eslint는 코드품질에, prettier은 포맷팅에 사용하면 아주 찰떡궁합! 🍡
이때, 두개를 통합하여 사용해도 에러가 나타나지 않도록 prettier은 eslint와 통합해서 사용하는 것을 지원해준다.
설치는 동준님의 블랙커피 강의와, 요 링크를 참고했다.
🧐 eslint: 문법
- 개발자들이 지켜야 할 규칙들을 만들수 있도록 해주고, 규칙을 지켜서 코딩하는지 체크해준다.
- lint(가이드, 잔소리꾼), 우리의 코드를 보고👀 계속 잔소리👂를 한다. 문법에서 틀린 부분이 있으면 eslint가 잔소리로 에러를 표시해준다.
여기서 에러는 내가.eslintrc파일에 적용한 것에 어긋나면 보여준다. - eslint에서는 자동으로 특정 코드 컨벤션을 적용해주는 기능도 있다. 아래 예제 코드에서 나는 airbnb로 적용해봤다.
- 코드 예시 (.eslintrc)
{
"plugins": [
"prettier"
],
"extends": [
"airbnb",
"plugin:prettier/recommended"
],
"env": {
"browser": true,
"node": true
},
"rules": {
"no-new": "off",
"no-console": "off",
"no-param-reassign": "off",
"no-alert": "off",
"no-undef": "off",
"import/extensions": "off",
"prefer-template": "off",
"max-depth": ["error", 2],
"max-lines-per-function": ["error", 15],
"eol-last": ["error", "always"]
}
}
위에 작성한 코드는 어디까지나 예시일 뿐이다!
내가 잔소리를 듣길 원하는 부분이 있으면(혹은 잔소리 듣기 싫은 부분이 있다면), "rules"부분에 따로 지정해주면 된다.
예를들어, 내가 new를 작성하더라도 잔소리를 듣고싶지 않다면, "no-new": "off"를 rules에 삽입하면 된다.
이러한 속성들은 eslint 사이트에서 확인할 수 있다.
또한, 위에서 airbnb 코드 컨벤션으로 지정해주었기 때문에, 이 중 특정 부분을 따르고 싶지 않다면 똑같은 방식으로 rules에 추가해주면 된다.
🥰 prettier: 코드 정리
- 코드 포맷터, 코드를 자동으로 포맷팅해준다. 즉, 코드를 예쁘게 바꿔준다.
- 파일 저장시점이나 git에 commit할 때 코드를 자동으로 포맷팅 해줌으로써, 일관된 코딩 형태를 유지하도록 한다.
Esilnt는 규칙을 확인하는 기능 외에 포맷팅 기능도 제공하지만, Prettier를 사용하여 Eslint는 코딩 컨벤션을 처리하도록 하고, 포맷팅 기능은 Prettier가 담당하도록 구성한다. - 옵션에 대한 설명은 prettier 공식 사이트를 참고하자!
위와 마찬가지로, 아래코드는 예시일 뿐이니 필요한 옵션을 위 공식사이트에서 찾아서 직접 커스튬해서 사용하면 된다. - 코드 예시(.prettierrc)
//.prettierrc
{
"printWidth": 200,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"arrowParens": "avoid"
}
eslint, prittier을 VScode에 설치하는 과정
- Eslint 설치
npm install eslint --save-dev
- Prettier 설치
npm install prettier --save-dev --save-exact
- 추가 모듈 설치
npm install eslint-config-prettier --save-dev: prettier, eslint를 함께 사용했을 때 충돌이 일어나지 않도록 한다.
npm install eslint-plugin-prettier --save-dev: 코드 포맷팅을 prettier로 한다.
- 패키지 설치 (airbnb 기준! eslint에서 airbnb의 문법을 따르도록 할 수 있다.)
npx install-peerdeps --dev eslint-config-airbnb .eslintrc,.prettierrc파일을 만든다. (위 예시코드 참고)- VSCode 확장에서 ESLint, Prettier을 설치한다.
📚 Reference
내가 짱이다 😎 매일 조금씩 성장하기🌱