Eslint_Prettier_적용하기

참고링크1
참고링크2

// .eslintrc.js
module.exports = {
  "env": {
    "browser": true,
    "es2020": true,
  },
  "extends": ["airbnb", "airbnb/hooks"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": ["js", "jsx"] }],
    // 확장자로 js와 jsx 둘다 허용하도록 수정
    "arrow-parens": ["warn", "as-needed"],
    // 화살표 함수의 파라미터가 하나일때 괄호 생략
    "no-unused-vars": ["off"],
    // 사용하지 않는 변수가 있을때 빌드에러가 나던 규칙 해제
    "no-console": ["off"],
    // 콘솔을 쓰면 에러가 나던 규칙 해제
    "import/prefer-default-export": ["off"],
    // export const 문을 쓸때 에러를 내는 규칙 해제
    "react-hooks/exhaustive-deps": ["warn"],
    // hooks의 의존성배열이 충분하지 않을때 강제로 의존성을 추가하는 규칙을 완화
    "react/jsx-props-no-spreading": ["warn"],
    // props spreading을 허용하지 않는 규칙 해제
    "react/prop-types": ["off"],
    // props의 타입체크를 처리하려면 prop-types보단 차라리 typescript를 사용하는게 낫다.
    'no-underscore-dangle': ['off'],
    // camelCase를 따르는게 좋긴 하지만 `_`를 어쩔수 없이 써야하는 상황을 위해(가령 백엔드가 mongoDB)
  },
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "."]
      }
    }
  }
};

vscode에서 eslint설치, 자동수정 기능

vscode 편집기의 확장 프로그램으로 ESLint를 설치한다.
프로젝트의 최상위 폴더에 .vscode 라는 폴더를 만든다. 마찬가지로 package.json, .eslintrc.js, 파일과 같은 경로상에 만들면 된다.
생성한 .vscode 폴더에 settings.json 라는 파일을 만든다.
생성한 settings.json 파일에 다음과 같이 작성하고 저장한다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "editor.formatOnSave": false,
  "[javascript]": {
    "beatify.enable": false,
    "editor.formatOnSave": false,
  }
}