typescript + react eslint룰 설정

.eslintrc.js

const path = require('path');
module.exports = {
    /** 
    	eslint는 자바스크립트만 해석할 수 있다.
        eslint가 타입스크립트를 해석 할수 있게끔 parser를 지정해주자.
    */
    parser: '@typescript-eslint/parser', 
    plugins: [
        '@typescript-eslint', // 타입스크립트 문법이 들어있다.
        'react' // 리액트 문법이 들어있다.
    ],
    env: {
        browser: true, // 브라우저 환경에서 eslint를 사용하겠다.
    },
    extends: [
        // @typescript-eslint/eslint-plugin에서 추천하는 규칙들로 타입스크립트 파일을 검사하겠다.
        'plugin:@typescript-eslint/recommended',
        /**
        	eslint에 prettier를 붙여서 사용할건데, eslint와 prettier 둘다 포매팅 관련 룰을 가지고 있다.
            그래서 eslint의 포매팅 관련 룰을 사용하지 않고 prettier의 룰로 대체시켜야한다.
            eslint에 prettier를 붙이기 위해 eslint-config-prettier를 설치해야한다.
            위에서 추가한 plugin:@typescript-eslint/recommended 에는 eslint의 포매팅 룰이 들어가있는데
            이걸 prettier의 포매팅 룰로 교체시켜야한다.
            eslint의 타입스크립트 포매팅 기능을 제거하고,
            prettier의 타입스크립트 포매팅 기능을 사용하겠다는 의미이다.
        */
        'prettier/@typescript-eslint', 
        /**
        	포매팅 능력은 eslint보다 prettier가 월등하다.
            따라서, eslint의 react 포매팅 기능을 제거하고 prettier의 react 포매팅 기능을 켜주자.
        */
        'prettier/react', 
        /**
        	eslint-plugin-prettier를 활성화 시킨다.
            이 플러그인은 prettier의 에러를 eslint 에러로 찍히게 만들어준다.
            반드시 마지막에 위치해야 한다.
        */
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        project: path.resolve(__dirname, './tsconfig.json'),
        tsconfigRootDir: __dirname,
        ecmaVersion: 2018, // 최신 ES 문법을 컴파일한다.
        sourceType: 'module', // Allows for the use of imports
        ecmaFeatures: {
            jsx: true // Allows for the parsing of JSX
        }
    },
    rules: {
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/no-unused-vars': 'off',
    },
    settings: {
        react: {
            version: 'detect' eslint-plugin-react가 자동으로 프로젝트의 React 버전을 탐지한다.
        }
    }
};