[리액트 코드 컨벤션] ESLint, Prettier, airbnb style guide로 설정하기

ESLint

 

간단히 말하자면 소스코드를 분석해 에러 및 버그를 보고해주는 도구입니다.

 

Prettier

 

본래 스타일 대신 규칙을 정해 규칙대로 다시 작성해 주는 것입니다.

 

 

좋은 코드 컨벤션을 지키기 위해 한 번 적용해봅시다.

 

 

우선 vscode에 확장 프로그램으로 ESLint, Prettier 두 개를 설치해야 합니다.

 

 

 

CRA를 이용해 리액트 프로젝트를 만들었다고 가정하고 진행하겠습니다.

 

 

Prettier

 

루트 디렉터리(최상위 디렉터리)에. prettierrc 파일을 만듭니다.

 

.prettierrc

{
  "trailingComma": "all", 
  // es5 => 함수,객체 사용시 쉼표, none => 쉼표 x, "all" 함수 사용, 인자 전달시에도 쉼표 
  "tabWidth": 2, 
  // 탭 사이즈 지정 
  "semi": true, 
  // 세미클론을 사용할지 말지 
  "singleQuote": true 
  // 문자열 입력시 "", '' 둘 중 뭘로 할지
}

 

이건 개인의 성향에 따라 다르므로 

https://prettier.io/docs/en/configuration.html 해당 페이지에서 입맛에 맞게 설정하시기 바랍니다.

(팀원과 협업할 시 같이 맞춰주는 게 좋겠죠?)

 

그 후 vscode 설정에 들어가야 합니다.

 

Windows: Ctrl + ,  세 키를 함께 누른다.

Mac: Cmd + , 세 키를 함께 누른다.

 

들어가서 format on save 검색 후 체크가 되어있는지 확인합니다!

 

여기까지 했으면 위에 지정한 대로 저장할 때마다 수정되는 걸 확인할 수 있습니다.

 

ESLint

$ yarn add eslint-config-airbnb

$ yarn add eslint-config-prettier

 

터미널에 두 명령어로 설치를 진행합니다.

 

그 후 package.json에 들어가 "eslintConfig"를 아래 내용으로 수정해줍니다.

 

  "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "prettier"
    ],
    "rules": {
      "react/jsx-filename-extension": 0, // 리액트 파일의 확장자 .jsx가 아닌 .js 허용
      "no-unused-vars": 1 // 큰 문제 없는 경고 수준은 초록색으로
    }
  },

 

이제 airbnb 베이스의 코드를 작성할 수 있게 되었습니다. 다들 좋은 코드 작성하시길 바랍니다!