안녕하세요! 썸머 인턴십 1기로 재직 중인 인턴입니다! 곧 인턴십이 끝나는데 이렇게 Cocone M에 제 흔적을 남길 수 있다는게 굉장히 즐겁고 행복하네요! ᵔᴗᵔ

오늘 제가 들고온 주제는 ESLint와 Prettier입니다! 원래 써본적이 없던 툴인데 Cocone M에 들어왔을 때 요 두 아이가 적용된 코드가 굉장히 신세계였어요!
자동으로 문법 오류를 잡아낸 후 바꿔주고, 저장만 누르면 자동으로 코드가 정리되는게 아주,,,장관이더라구요… ꒰ •⸝⸝⸝⸝⸝⸝⸝•
그 이후론 앞으로 모든 프로젝트에 적용해야겠다고 다짐하고, 개인 프로젝트에도 ESLint와 Prettier를 적용해서 개발하고 있습니다!

규칙을 정해주면 알아서 코드가 정리된다는게 큰 매력인 것 같아요. 하나의 프로젝트 내에서 많은 사람들이 코드를 작성하다보면 (심지어 혼자 작성해도) 코드가 중구난방이 될 수 있는데, 얘네들이 다~~~알아서 지적해주고 고쳐주니까 이렇게 편하고 보기 좋을 수가 없습니다…（´・｀ ♡ 그럼 이제 일관성있고 깔끔한 리액트 코드 작성하러 가보실까요?

💡 본 포스팅은 VScode를 기준으로 작성되었습니다

설치

VScode에서 ESLint와 Prttier를 사용하기 위해선 먼저 아래 두 개의 extension을 설치해야 합니다.

eslint capture


prettier capture


ESLint

ESLint는 JavaScript의 문법 가이드를 따르지 않거나 문제가 있는 부분들을 찾아주고 코드가 일관성있게 작성되도록 도와줍니다. 사용자는 문법 검사에 대한 조건에 다양한 옵션을 줄 수 있습니다. ( ⇒ 원하는대로 조건 커스텀 가능!)
ESLint가 자동으로 오류를 잡아내기 때문에 올바른 코딩 습관을 구축하기에 좋습니다. 조금 더 까다롭고 일관적인 규칙을 사용하고 싶을 때면 많은 개발자들이 사용하는 config를 불러와서 사용하면 됩니다.(ex. Airbnb config )

프로젝트 생성을 마친 후 ESLint를 설치해줍니다.

$ npm i eslint


ESLint 설정 파일을 생성하기 위해 명령어를 실행합니다. 이 명령어를 실행하면 몇몇 질문들이 나오는데, 프로젝트 설정에 맞게 답변하면 됩니다.

$ node_modules/.bin/eslint --init


그러면 루트 경로에 .eslintrc 파일이 생성되는데요, 여기서 상세한 문법 규칙을 설정할 수 있습니다!

“env”: {
    “browser”: true,
    “es2020”: true
  },
 “extends”: “eslint:recommended”,
 “rules”: {
   “react/prop-types”: “off”,
   “@typescript-eslint/explicit-module-boundary-types”: “off”,
   “react/react-in-jsx-scope”: “off”,
  },
  • env: 프로젝트의 사용 환경 설정
  • extends: 다른 ESLint 설정을 확장해서 사용할때 설정. *eslint:recommended ⇒ ESLint가 추천하는 규칙을 적용하라는 의미
    • 만약 Airbnb 규칙을 적용하고 싶을 땐 “extends”: [“react-app”, “airbnb”], 라고 적으면 된다!
  • rules: 프로젝트에서 쓰고 싶은 규칙을 정의할 때 사용 ( 이 페이지에서 다양한 ESLint 규칙을 볼 수 있습니다 ) 앞으론 오류가 발생한 부분에서 오른쪽 마우스를 클릭하고 “Fix this arrow-body-style problem” 을 누르시면 자동으로 문법 오류를 고칠 수 있습니다!


Prettier

Prettier는 기존의 코드에 적용되어있던 스타일들을 전부 무시하고, 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해 주는 Code Formatter입니다.
ESLint가 문법 에러를 잡아내는거라면, Prettier는 코드 한 줄의 최대 길이나, 탭의 길이는 몇으로 할것인지, 따옴표는 ‘ , ” 중에 무엇을 사용할 것인지 등 코드 스타일을 통일해주는 도구입니다. 위에서 설치했던 prettier extention을 사용하기 위해 자바스크립트 포맷팅 기능을 해제해주어야합니다. VScode의 설정으로 들어갑니다. 설정으로 들어가서 Format Javascript를 검색하고 가장 첫번째로 뜨는 부분을 설정 해제해줍니다.

3번째


루트 경로에 .prettierrc라는 파일을 생성해줍니다.

{
 “singleQuote”: true,
 “parser”: “typescript”, //타입스크립트 사용 시에만 작성
 “semi”: true,
 “useTabs”: true,
 “tabWidth”: 2,
 “trailingComma”: “all”,
 “printWidth”: 80
}
  • 문자열을 사용 할 때에는 ‘ 를 사용합니다.
  • parser은 typescript를 사용합니다.
  • 코드는 ; 로 끝나야합니다.
  • 탭 키를 사용합니다.
  • 들여쓰기 크기는 2칸입니다.
  • 객체나 배열을 작성 할 때, 원소 혹은 key-value 의 맨 뒤에있는 것에도 쉼표를 붙입니다.
  • 한 줄이 80칸이 넘지 않도록 합니다.

더 자세한 옵션은 여기서 확인 가능합니다.


이제는 지금까지 설정해뒀던대로 파일을 저장할때 자동으로 정리되게끔 해보겠습니다. (따로 설정을 하지 않으면 그때그때 수동으로 실행해서 정리해야 합니다) VSCode 의 설정을 열어주세요. 그리고 Format On Save를 검색해서 체크를 활성화해줍니다.


4번째

그럼 이제 파일을 저장할때마다 자동으로 prettier 설정에 따라 코드가 정리된답니다~!


후기

사실 처음 테크블로그 글을 작성하게 됐을 때 든 생각은… ‘내가…?’ 라는 생각이었습니다. 제 스스로가 정말정말정말 많이 부족하고 아는게 없다고 생각하기 때문에… ‘내가 뭐라고 기술 관련된 글을 작성하지?!’ 하는 걱정과 우려가 많았어요😂
그래도 이렇게 어찌저찌 글도 다 작성해서 마무리를 하고 있네요.. 읽어주신 분들 모두 감사합니다 모두 즐코딩하세요! ₍ᐢ• ̫•ᐢ₎