Visual Studio 코드에서 React Native에 대한 자동 완성 작업을 수행하기 위해 수행해야 할 단계는 무엇입니까?

Question

필자는 React Native에 대한 타이핑을 설치하여 React Native에서 Intellisense를 사용하기 위해 VS 코드 문서에 설명 된 단계를 수행했습니다. 이제 자동 완성 기능을 사용하려면 어떻게해야합니까? 예를 들어 <Text>을 입력하면 해당 태그가 자동으로 닫힙니다. 내가 여기서 무엇을 놓치고 있니? 이것은 마치 상자에서 꺼내 진 것처럼 보인다.

Answer 1

IntelliSense (자동 완성)를 사용하려면 공식 React Native Tools을 설치해야합니다.

F1 입력 ext install을 눌러 다음 는 기본 도구를 확장 반응을 찾아를 Enter 키를 누릅니다하여 설치

열기 명령 팔레트.

당신은 당신의 루트 디렉토리에 jsconfig.json 파일을 만들어야합니다 jsconfig.json 파일

을 만듭니다. 비어있을 수 있지만 반드시 있어야합니다. 디렉토리에 이러한 파일이 있으면 해당 디렉토리가 JavaScript 프로젝트의 루트임을 나타냅니다.

(옵션)

파일 자체가 선택적으로 프로젝트에 속하는 파일을 나열 할 수는 파일이 프로젝트뿐만 아니라 컴파일러 옵션에서 제외된다.

{ 
    "compilerOptions": { 
    "target": "ES6", 
    "module": "commonjs", 
    "allowSyntheticDefaultImports": true 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

당신은

당신은 .babelrc 파일을 작성해야합니다 (당신이 타이프 라이터을 사용하려는 경우, 옵션) ReactNative Packger 변압기에 대한 .babelrc 파일을 만듭니다 https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson

에서 자세한 내용을 찾을 수 있습니다 더 나은 소스 매핑 지원을 위해 sourceMaps = true 및 "presets": [ "react-native" ]이 있습니다. TypeScript 지원을 원하면 이 필요합니다. 기본 (옵션) 반작용에 대한

{ 
    "presets": [ 
    "react-native" // this is required for debugging with react-native/packager/transformer 
    ], 
    "plugins": [], 
    "sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug 
    // because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both" 
} 

것은

은 기본, npm install typings -g을 실행 반응에 대한 IntelliSense를하고 터미널에서 다음 typings install dt~react-native --global을 얻으려면 typings를 설치합니다.

희망이 도움이됩니다!

VSCode에서

Answer 2

React Native Tools 당신이 내 경우 Auto Close Tag 및 Auto Rename Tag

Answer 3

를 설치하려고 할 수 있습니다, 당신은 <Text>를 입력 한 후 태그를 닫을 도울 수 없어요, 나는 가까운 비주얼 tsconfig.json에 jsconfig.json 복사해야 코드를 작성하고 다시여십시오. 그런 다음 제대로 작동합니다.

jsconfig.JSON

{ 
    "compilerOptions": { 
     "allowSyntheticDefaultImports": true 
    }, 
    "exclude": [ 
     "node_modules" 
    ] 
} 

tsconfig.json

{ 
    "compilerOptions": { 
     "allowJs": true, 
     "allowSyntheticDefaultImports": true 
    }, 
    "exclude": [ 
     "node_modules" 
    ] 
}