<aside> 💡 Prettier for formatting and linters for catching bugs!

</aside>

• 작성한 code 가 CONTRIBUTION.md 의 coding standard 를 준수하는지 prettier 와 ESLint 세부 설정으로 자동 점검
• prettier 는 강제적으로 format rule 을 적용시키고 ESLint 는 에러를 띄운다. (ESLint 도 --fix 옵션으로 자동 fix 되게 할 수 있는 rule 들이 적지만 있는 것 같다.)

Prettier (formatting)

• npm install -D prettier 로 prettier 설치

• prettier vscode extension 설치, settings.json 에 아래 두 줄 추가 (저장 시 자동 formatting)

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  

• 프로젝트 root 디렉토리에 .prettierrc.json 설정 파일 생성

• 아래 링크에 있는 옵션들 보고 json format 으로 설정

  Options · Prettier

• e.g.

  // .prettierrc.json
  
  {
    "printWidth": 100, // > 100 col. 행 wrapping
    "tabWidth": 2, // 탭 사이즈 2 spaces
    "singleQuote": true, // single quote 사용
    "trailingComma": "es5",
    "arrowParens": "avoid" // 화살표 함수 매개변수 하나일 경우 소괄호 생략
  }
  

• "singleQuote": true 로 해놨지만 다행히 *.ejs 파일들에서 html attribute string 들은 알아서 쌍따옴표로 감싸준다.

• 파일별로 알아서 파싱해서 룰 적용.

ESLint (coding standard)

• npm install -D eslint 로 eslint 설치, eslint vscode extension 설치

직접 설정

• npx eslint --init 로 configuration 파일 (.eslintrc.json) 생성

  • 아래와 같이 설정

    

• 아래 링크 보면서 직접 하나씩 설정 가능

  Configuring ESLint

  List of available rules

  eslint rules

THANK YOU, AIRBNB

• 우리42벤트는 airbnb javascript style guide 사용, airbnb 에서 제공해주는 eslint preset 이 있다.

  ESLint & Prettier, Airbnb Style Guide로 설정하기

  javascript/packages/eslint-config-airbnb at master · airbnb/javascript

  eslint-config-airbnb github repo

• npx install-peerdeps --dev eslint-config-airbnb 실행해서 dependency 들까지 설치

  • dependencies: eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11
  • 리액트 안 쓸거면 eslint-config-airbnb-base 만 설치해도 된다.