[React] VSCode에 ESLint & Prettier 적용

VSCode에 ESLint & Prettier 적용

1. VSCode Extension 설치

ESLint

• 자바스크립트의 문법을 체크해주는 도구

Prettier

• Code Formatting 도구 (코드 정렬, 세미콜론 등)

2. 설정 커스터마이징

package.json

...

"eslintConfig": {
    "extends": [
        "airbnb",
        "prettier"
    ],
    "parser": "babel-eslint",
    "rules": {
        "react/jsx-filename-extension": 0,
        "import/no-named-as-default": 0,
        "import/no-named-as-default-member": 0,
        "import/no-unresolved": 0,
        "import/prefer-default-export": 0,
        "no-underscore-dangle": 0,
        "no-console": 0,
        "react/forbid-prop-types": 0
    },
    "env": {
        "browser": true
    }
},

• extends: airbnb의 규칙과 prettier 적용

• parser: ES6의 arrow function을 사용하기 위해 추가

• env: "document.~"을 사용하기 위해 추가

• rules: 세부 규칙을 커스터마이징 하기 위해 정의

  끄고 싶은 에러는 0, 그리고 경고처리만 하고 싶은 에러는 1로 처리

  

  위의 경고 메세지를 없애고 싶다면 아래와 같이 추가한다.

  "react/jsx-filename-extension": 0,

3. VSCode 설정 & Prettier 포매팅 설정

기본 Javascript 포매팅 기능 비활성화

• File - Preferences - Settings
  
• "Format JavaScript" 검색 - Javascript > Format: Enable 체크해제
  

Prettier 설정

• 프로젝트 루트 디렉터리에 .prettierrc 파일 생성 및 편집 (현재 설정 파일은 아래와 같습니다.)
  다른 옵션들은 Options 페이지에서 확인 가능

  {
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
  }

코드 저장 시, 자동 포맷팅 설정

• File - Preferences - Settings
  
• "format on save" 검색 - Editor: Format On Save 체크
  
• "ESLint" 검색 - Eslint: Auto Fix On Save 체크