vscode 로 react-native 개발 환경 구축 가르쳐 드릴 게 요.

문제.
코드 알림 없 음:
RN 개발 을 처음 접 한 많은 비 전단 학우 들 은"어느 편집기 에 스마트 힌트 가 있 습 니까?"라 고 묻는다.그리고 전단 학우 들 에 게 지금 은 날 이 많이 좋아 졌 습 니 다.어떤 자전 거 를 원 하 십 니까?
저급 코드 오류:
여기 서 의 오 류 는 맞 춤 법 오류,기호 오류 등 을 말한다.코드 를 쓰 고 뛰 기 시작 하면 각종 신문 이 틀 리 고 가끔 은 애 써 찾 았 는데 결국은 중국어 의 분점 문제 라 는 것 을 알 게 되 었 다.
해결 방법
선택 할 수 있 는 방안 은 다음 과 같 습 니 다.

type:script 을 사용 합 니 다.정적 형식 이 지원 하 는 js 버 전 을 직접 사용 합 니 다.but 문법 을 한 세트 더 배 워 야 합 니 다.그리고 제 코드 는 모두 ts 가 썼 지만 좋 은 공공 라 이브 러 리 가 많 습 니 다.아 닙 니 다

4.567917.flow 사용:네트워크 의 원인 으로 인해 이 환경 은 정말 어 울 리 기 어렵 고 새로운 문법 도 배 워 야 합 니 다우리 의 선택:vscode+typings+eslint
vscode:우주 최 강 IDE 가족의 최신 제품typings:typescirpt 기반 인터페이스 파일

eslint:코드 정적 검사,기능 검 측 저급한 문법 오류,코드 형식 규범화 및 응용 최 적 실천

도구 와 플러그 인
편집기
필수 및 추천 플러그 인 은 다음 과 같 습 니 다:

주:

각 플러그 인 을 클릭 하면 해당 하 는 상세 한 설명 이 있 습 니 다

vscode 와 플러그 인의 업데이트 빈도 가 비교적 빠 릅 니 다.제때에 업데이트 하 는 것 을 추천 합 니 다vscode 의 플러그 인 설 치 는 매우 간단 합 니 다.왼쪽 맨 아래 에 있 는 단 추 는 확장 패 널 입 니 다.플러그 인 이름 을 직접 검색 하고 설 치 를 클릭 하면 됩 니 다코드 지능 알림
제3자 가방,예 를 들 어 react-native:
전역 설치 타이 핑:

npm install typings -g

react 와 react-native 의 인터페이스 설명 파일 설치:

typings install dt~react --save

typings install dt~react-native --save

설치 가 완료 되면(가방 의 수량 과 네트워크 상황 에 따라 결 정 됩 니 다)프로젝트 의 루트 디 렉 터 리 에 typings 디 렉 터 리 와 typings.json 설정 파일 이 있 습 니 다.

완료 후 code 를 다시 시작 하거나 reload 명령 을 사용 합 니 다.현재 react-native 와 react 관련 코드 에 대한 알림 설명 이 있 습 니 다.효 과 는 다음 과 같 습 니 다.
방법 지능 알림:

표시 방법의 인자:

hover 시 설명 표시:

주:다른 제3자 가방 에 대해 서 는 유사 한 방법 을 사용 하거나 위 에서 언급 한 플러그 인 을 빌 릴 수 있 습 니 다.
비 즈 니스 코드 개발 자 라면:
규범 화 된 모듈 화 js 코드 에 대해 vscode 는 자동 으로 연락 을 하고 제시 할 수 있 습 니 다.우 리 는 설명 만 잘 쓰 면 됩 니 다.
패키지 나 SDK 개발 자라 면:
우리 의 코드 는 다른 학우 들 에 게 발표 할 때 사용 해 야 하 며,우리 가 발표 할 때 상응하는 d.ts 인터페이스 파일 을 제공 해 야 한다.
기본 값 은 패키지 루트 디 렉 터 리 아래 index.d.ts 파일 입 니 다.그렇지 않 으 면 package.json 설정 에서 typings 항목(main 유사)을 표시 해 야 합 니 다.
인터페이스 파일 작성 방법:vscode.
코드 정적 검사
코드 정적 은 eslint 에 의 해 이 루어 집 니 다.CLI 와 프로필(규칙)로 구성 되 어 있 습 니 다.
vscode 에 대응 하 는 플러그 인 을 설치 하면 실시 간 으로 편집기 에서 검색 결 과 를 볼 수 있 으 며,CLI 를 실행 하지 않 아 도 됩 니 다.
주:본 고 는 eslint-cli 의 매개 변수 와 관련 되 어 있 으 며,일반적으로 개발 에 사용 되 지 않 으 며,자동화 스 크 립 트 명령 을 쓸 때 문 서 를 찾 습 니 다.
먼저 eslint cli 와 관련 플러그 인 을 설치 하고 프로젝트 package.json 에서 개발 의존 도가 증가 합 니 다(이것 은 비교적 유행 하 는 RN 설정 입 니 다).

"devDependencies": {
    "eslint": "^3.3.1",
    "babel-eslint": "^6.1.2",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.1.2"
}

npm install 설 치 를 실행 합 니 다.
설정 파일.eslintrc.js(주석 을 추가 할 수 있 기 때문에 js 형식 을 사 용 했 습 니 다.제 이 슨 형식 선택 가능)
eslint init 시작 마법사 로 생 성 할 수 있 습 니 다.
저 희 는 기 존(팀 의 다른 프로젝트 와 일치 하 는 것 이 좋 습 니 다)을 직접 사용 할 수 있 습 니 다.프로젝트 루트 디 렉 터 리 에'eslintr.js'파일 을 새로 만 들 수 있 습 니 다.내용 은 다음 과 같 습 니 다.

module.exports = {
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  extends: "airbnb",
  plugins: [
    "react",
    "jsx-a11y",
    "import"
  ],
  rules: {
    // 0 = off, 1 = warn, 2 = error
    // FB    ：
    // https://github.com/facebook/react-native/blob/8baaad9b0fbda2b02bb1834452aa63cac7910dc5/.eslintrc

    "global-require": 0,
    "no-use-before-define": 0,       // disallow use of variables before they are defined
    "max-len": 0,                    // specify the maximum length of a line in your program (off by default)
    "no-console": 0,                 // disallow use of console (off by default in the node environment)
    "no-undef": 2,                   // disallow use of undeclared variables unless mentioned in a /*global */ block

    "no-unused-vars": 0,
    "block-scoped-var": 0,           // treat var statements as if they were block scoped (off by default)
    "complexity": 0,                 // specify the maximum cyclomatic complexity allowed in a program (off by default)
    "consistent-return": 0,          // require return statements to either always or never specify values

    // allow async-await
    'generator-star-spacing': 0,

    "no-return-assign": 1,           // disallow use of assignment in return statement

    "react/jsx-filename-extension": 0,
    "react/self-closing-comp": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/prop-types": 0, //   redux        
  },

  //              
  "globals": {
    "window": true,
    "fetch": true,
    "__DEV__": true,
    "__APP__": true,
    "__ANDROID__": true,
    "__IOS__": true
  }
};

플러그 인과 검색 규칙 을 설정 합 니 다.설명:
규칙 목록
4.567917.규칙 뒤의 0 은 닫 히 고 1 은 경 고 를 표시 하 며 2 는 오 류 를 표시 합 니 다.일부 규칙 은 파 라 메 터 를 설정 할 수 있 습 니 다.위의 규칙 목록 문 서 를 구체 적 으로 볼 수 있 습 니 다4.567917.간단 한 오류 가 있 습 니 다.vscode 는 자동 으로 복구 할 수 있 습 니 다(작은 전구 의 icon 이 나타 나 면 자동 으로 복구 할 수 있 습 니 다)이 규칙 은 기본적으로 실천 총 결 된 js 코드 를 작성 하 는 가장 좋 은 실천 입 니 다.검 측 오류 가 발생 했 을 때 규칙 을 직접 검색 하고 설명 을 읽 습 니 다.
함부로 닫 지 마.
vscode 의 eslint 플러그 인 을 설치 한 후:

What's more:
pre-commit 도 구 를 사용 하여 제출 할 때마다 eslint 모니터링 코드 를 실행 할 수 있 으 며,실패 하면 제출 을 금지 합 니 다.
Debug
vscode 에 react-native-tools 플러그 인 을 설치 한 후 chromDevTools 디 버 깅 코드 를 대체 할 수 있 습 니 다.
원생 의 디 버 깅 방식 에 더욱 가깝다.
우리 가 자주 사용 하 는 방식 은:
터미널 에서 package server 를 엽 니 다vscode 선택,dbug,attach to packager

터미널 에서 디 버 깅 메뉴 를 조정 하고 Debug JS Remotly 를 선택 하 십시오

총결산
일 을 잘 하려 면 먼저 그 기 구 를 이 롭 게 해 야 하고,고생 하 는 것 은 가치 가 있다.
좋 은 개발 환경 제출 은 효율 을 제공 하 는 동시에 품질 을 보장 한다.
좋 은 개발 체험,즐 거 운 coding.
vscode 를 사용 하여 react-native 개발 환경 을 구축 하 는 것 을 가 르 치 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vscode 구축 react-native 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!