Eslint 설치

$ yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc 생성 및 설정

// root/.eslintrc
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"],
	"parserOptions": {
    "project": ["./tsconfig.json"]
  },
  "rules": {
		"no-console": "off",
		"react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": ["warn"],
    "import/prefer-default-export": "off",
		"react/function-component-definition": [2, { "namedComponents": "arrow-function" }]
  }
}

.eslintignore 생성

// root/.eslintignore
dist

.eslintrc.js

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: ["plugin:@typescript-eslint/recommended"],
  parserOptions: {
    "project": ["./tsconfig.json"]
  },
  rules: {
    "no-console": "off",
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": ["warn"],
    "import/prefer-default-export": "off",
    "react/function-component-definition": [2, { "namedComponents": "arrow-function" }]
  },
	ignorePatterns: ['dist', 'build', 'public', '.eslintrc.js'],
}

P.S. eslintrc.js 사용 후 에러 발생시 참고 https://lagom777.tistory.com/32

AirBnb 적용안할거면 react/react-hooks 적용 필수

AirBnb 적용

$ yarn add -D eslint-config-airbnb

$ npm info "eslint-config-airbnb@latest" peerDependencies
eslint: '^7.32.0 || ^8.2.0',
'eslint-plugin-import': '^2.25.3',
'eslint-plugin-jsx-a11y': '^6.5.1',
'eslint-plugin-react': '^7.28.0',
'eslint-plugin-react-hooks': '^4.3.0'

$ yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

$ yarn add -D eslint-config-airbnb-typescript

.eslintrc 수정