Expo TypeScript ESLint Prettier 초기 설정

Expo는 React Native 위에 훌륭한 플랫폼입니다. 기본적으로 훌륭하고 삶을 훨씬 단순화합니다. 하지만 Expo로 새 프로젝트를 만들 때 React Native 설정에서 빠진 것이 있습니다. 그래서 개인 문서로 사용하기 위해 초기 설정으로 이 게시물을 작성하기로 했습니다.

또한 이 상용구를 bash 스크립트로 래핑하는 방법은 이 .

엑스포 템플릿

우선 expo-cli과 TypeScript 템플릿으로 프로젝트를 생성하고 있습니다.

expo init -t expo-template-blank-typescript your-project-name

TS2786 해결: 'Animated.View'는 JSX 구성 요소로 사용할 수 없습니다.

이제 몇 가지 코드를 추가하고 다음 오류가 표시됩니다.



그래서 나는 GitHub의 솔루션을 따르고 있습니다.

// package.json
"resolutions": { "@types/react": "^17" }

TypeScript, ESLint, Prettier 종속성

기본적으로 React Native TypeScript 템플릿을 따르고 다음 종속성을 사용하고 있습니다.

yarn add -D eslint prettier @react-native-community/eslint-config @typescript-eslint/eslint-plugin eslint-config-prettier

ESLint 구성

ESLint 구성을 추가합시다.eslintrc.js.

module.exports = {
  extends: ['@react-native-community', "eslint-config-prettier"],
}

TS 구성

기존 구성compileOptions에 추가tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "module": "es6"
  }
}

.gitignore 업데이트

WebStorm IDE를 사용하고 있습니다. 그래서 내 .gitignore에 다음을 추가하고 싶습니다.

# WebStorm
.idea

코드 재형식화 및 커밋 변경

그리고 더 예쁜 새 설정에 따라 템플릿 코드를 다시 포맷하는 마지막 단계입니다.

./node_modules/prettier/bin-prettier.js --write .

변경 사항을 커밋합니다.

git add .
git commit -m 'expo template config'

이 작은 것은 새로운 엑스포 프로젝트를 설정할 때마다 이미 저에게 도움이 됩니다. 다른 사람에게도 도움이 되기를 바랍니다.