javascript 코드 컨벤션 🧹 + eslint, prettier으로 자동화

rladpwl0512·2022년 2월 21일
2

공부 흔적 📚

목록 보기
2/5

공식 문서


코드 컨벤션은 다양한 회사에서 공식 문서로 제공하고 있다.
자신에게 맞는 것을 찾아 쓰거나, 협업을 한다면 동료와 협의 후 선택하여 사용하면 된다.
우아한테크코스에서는 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

🔗 https://velog.io/@josworks27/ESLint-Prettier-설정-백엔드

profile
내가 짱이다 😎 매일 조금씩 성장하기🌱

0개의 댓글