ESLint / Prettier

🥗 ESLint 란?

ES + Lint

소스 코드를 작성하면서 생길 수 있는 오류(Error)를 자동으로 분석해주는 도구이다.

• ES : Ecma Script.
  Ecma라는 기구에서 만든 Script. 즉, 표준 Javascript를 의미한다.
• Lint : 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.

 

👉🏻 설치 방법

🥗 Prettier 이란?

Visual Studio Code Extention으로 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구이다.

• 코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있다.
• Visual Studio Code Extention 중에 코드를 정렬해 주는 Code Formatter 중 하나이다.

 

👉🏻 설치 방법

 

 

👉🏻 Setting Guide

세팅 법은 팀마다 다르다!

{
  "singleQuote": true,     // 따옴표 고정
  "semi": true,            // 코드 끝에 ; 설정
  "useTabs": false,        // Tap 사용여부
  "tabWidth": 2,           // Tap 크기
  "trailingComma": "all",  // 객체 끝 부분에도 콤마(comma) 추가
  "printWidth": 100        // 줄 당 max length
}

🥗 Team Setting

우리 팀은 이렇게 팀세팅을 진행했다!

 

👇🏻 .vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  },
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange"
}

 

👇🏻 .eslintrc (ESLint과 Prettier를 연결)

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

 

👇🏻 .prettierrc

{
  "tabWidth": 2, 
  "endOfLine": "lf", 
  "arrowParens": "avoid", 
  "singleQuote": true,
}