https://velog.io/@gongyoon93/React-Typescript-eslint-prettier-적용하기

Prettier 관련 패키지 추가

$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc 수정

// root/.eslintrc
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
    "plugin:prettier/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" }],
		"react/function-component-definition": ['error', { namedComponents: ['arrow-function', 'function-declaration'] }],
    "prettier/prettier": ["off", { "endOfLine": "auto" }]
  }
}

.prettierrc 생성

// root/.prettierrc
{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "semi": true
}

설정에서 editor format on save 검색 후 체크

Error 모음:

1. Prettier 설정 후 .prettierrc 에러 발생 시 https://stackoverflow.com/questions/65328123/how-to-configure-vscode-to-run-yarn-2-with-pnp-powered-typescript#answer-69412529

.yarn/sdks/prettier 생성 - Prettier 관련 Plugin 설정 후 아래 명령어 실행

$ yarn dlx @yarnpkg/sdks vscode

실행하면 자동으로 아래와 같이 폴더 및 파일 생성