리액트 네이티브를 위한 에디터 설정

tip

(코드종) #1

Visual Studio Code

MS의 선물 react-native extension

MS에서 만든 extension입니다. react-native의 필수 익스텐션이죠. 디버깅은 물론 리액트 네이티브 패키저 실행/종료, 빌드, 코드 자동완성 등 할 수 있는 것이 많아요. 설정을 손대지 않더라도 깔아만 둬도 이득인 패키지입니다.

Flow 설정

flow를 설정해 놓으면 다양한 자동 완성 및 코드 이동이 및 타입 체크 등을 코드 작성중에 제공 받게 됩니다.

  • Flow extension 설치
  • Flow extension 설정 변경
    • 익스텐션의 문서에 따라 @builtin TypeScript 익스텐션의 Javascript Validation을 off
    • 이 패키지의 설정에서 flow 경로 설정을 로컬의 ./bin/flow를 사용하도록 함: rn마다 호환되는 flow 버전이 다르기 때문
    • package.json에 정의된 flow 명령어를 사용하도록 옵션 설정
  • 해당 프로젝트에 호환되는 버전을 .flowconfig 에서 확인 후 설치
    • yarn add flow-bin@0.78.0 --dev
  • VS Code 재실행
  • 정상 작동 확인 : 파일 상단 //@flow 주석이 있는 파일을 열었을 때 잠시 후 좌측 하단에 다음과 같이 flow가 표시되었으면 정상 작동 중

:warning: expo에 flow를 적용하고자 할 경우 react-native cli를 통해 생성된 프로젝트의 .flowconfg를 복사해서 진행하면 된다. 모듈의 설치를 npm으로 할경우 flow에서 정상적으로 못찾는 경우가 있었다. 혹시 설정에 문제를 겪는다면 yarn을 이용해보자.

eslint 설정

  • eslint 설정은 개인의 취향에 맞게 설정하면 됩니다. 처음 시작할 때는 react-native 저장소에 있는 .eslint를 사용하길 추천합니다.
    • react-native의 .eslintrc 를 프로젝트 root에 복사
    • devDependacy를 package.json에 추가 (버전은 react-native 의 package.json 참고)
      "eslint": "5.1.0",
      "eslint-config-fb-strict": "22.1.0",
      "eslint-config-fbjs": "2.0.1",
      "eslint-plugin-eslint-comments": "^3.0.1",
      "eslint-plugin-flowtype": "2.43.0",
      "eslint-plugin-jest": "21.8.0",
      "eslint-plugin-prettier": "2.6.0",
      "eslint-plugin-react": "7.8.2",
      "eslint-plugin-react-native": "3.5.0",
      "prettier": "1.13.6",
      "babel-eslint": "^10.0.1",
      
    • yarn install 혹은 npm install실행
    • VS Code에서 ESLint extension 설치 후 VS code 재시작

Atom

스타일 자동완성을 위한 패키지

제가 GitHub가 MS에게 인수 되기 전에는 Atom을 써왔습니다. 그 때 리액트 네이티브 스타일 입력을 위해 만든 패키지가 있습니다. 스타일의 key는 물론 value까지 자동완성 됩니다. (다음 링크의 gif 참고)

eslint 및 flow 설정

제가 아톰을 안쓰기 시작한지 좀 되어서 요부분은 따로 정리는 하지는 않겠습니다. :slight_smile: (개인적으로는 react-native는 vs code를 이용하는 것을 추천합니다.)


(박시중) #2

vscode extensions:MARKETPLACE에서 flow 라고 치니까 너무 많이 나오네요… react-native extension 도 그렇고…

이런 경우 정확한 것을 어떻게 찾나요?


(박시중) #3

추가질문 : 위의 MS extension 을 설치하면,
‘[ts] ‘type arguments’ can only be used in a .ts file.’ 메시지 안나오게 되나요?
타입스크립트 validation 메시지 같은데… 쩝…


(코드종) #4

처음에는 헷갈립니다. 해당 패키지 README에서 자세히 설명해주면 좋은데 저기에서는 좀 부족하죠. 보통 검색을 해서 만든사람(flowtype)을 비교하는게 제일 편합니다. 그리고 많이 쓰는건 보통 다운로드 수가 다른거랑 비교도 못할 정도로 많아요.

image

본 문에 있는 아래 내용대로 하면 해결되었던 걸로 기억합니다. 이렇게 했는데도 안된건가요?