eslint & prettier

eslint (air-bnb)

yarn add eslint-config-airbnb

package.json

  "eslintConfig": {
    "extends": "airbnb",
    "rules": {
      "react/prefer-stateless-function": 0,
      "react/jsx-filename-extension": 0,
      "react/jsx-one-expression-per-line": 0
    },
    "env": {
      "browser": true
    }
  },

ESLint 검사 무시하기
가끔씩은 ESLint 검사자체를 무시하고 싶은 상황도 발생 할 수 있습니다. 예를 들어, serviceWorker.js 파일의 경우 ESLint 규칙을 어기고 있는데 고칠 필요는 딱히 없죠. 이런 경우는 파일의 최상단에

/* eslint-disable */

이 한줄을 입력하시면 해당 파일을 ESLint 에서 검사하지 않게 됩니다. 원할땐 특정 구간만 무시 할 수도 있습니다. 이에 대해선 여기 를 참고하세요

autofix

F1 키를 누르고

ESLint: fix 

를 입력

prettier

VSCode 익스텐션으로 설치
F1 키를 누르고 Format Document 를 찾아서 실행

.prettierrc 파일 추가

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

저장 후 , 다시 App.js 를 열어서 F1 -> Format Documents

eslint-config-prettier

eslint-config-prettier은 prettier 에서 관리 해 줄 수 있는 코드 스타일의 ESLint 규칙을 비활성화 시켜줍니다. 이것을 사용하게 된다면 ESLint 는 자바스크립트 문법 관련된 것들만 관리하게 되고, 코드스타일 관련 작업은 prettier 가 담당하게 됩니다.

install

yarn add eslint-config-prettier

package.json

  "eslintConfig": {
    "extends": [
      "airbnb",
      "prettier"
    ],
    "rules": {
      "react/prefer-stateless-function": 0,
      "react/jsx-filename-extension": 0,
      "react/jsx-one-expression-per-line": 0
    }
  },

ESLint 와 Prettier 을 충돌 없이 사용 할 수 있다.

vscode 설정에
Format On Save 검색 후
auto format 설정