前言

使用VSCode開發React-Native是個不錯的選擇，因為這個編輯器十分簡潔、流暢，並且微軟官方提供了React Native Tools外掛，支援程式碼高亮、debug以及程式碼提示等十分強大的功能，並且VSCode本身的程式碼跳轉十分優秀。但是我下載了此外掛，發現其他功能正常，唯獨程式碼沒法正確提示，右下角也沒有顯示salsa。經過我的不懈Google以及檢視官方文件：JavaScript in VS Code，最終找到了替代解決方案。本人的開發平臺是Windows。

解決方案

一、配置Typescript

1.全域性安裝typescript

npm install

安裝完成會如圖所示：

當我們重啟VSCode會得到提示：全域性安裝的typescript與VSCode所指向的版本號不一致，所以我們要進行下一步操作。

2.配置使用者設定settings.json，通過檔案>首選項>使用者設定即可開啟。

指定typescript的lib資料夾的路徑，這個路徑在安裝完成時如上圖所示，根據我的安裝路徑，對使用者設定新增如下更改：

"typescript.tsdk": "C:/Users/錢濤/AppData/Roaming/npm/node_modules/typescript/lib"

重啟後你的VSCode的下方會顯示出Typescript的版本號，例如：

有了以上的設定，我們從react-native包中引入元件模組時就會有相應的提示，我們還可以進行進一步的設定

二、配置TypeScript Definition Files (Typings)

官方對其是這樣解釋的：

You get VS Code IntelliSense for third-party libraries and modules with type definition *.d.ts files. TypeScript definition files are written in TypeScript so they can express the data types of parameters and functions, allowing VS Code to provide a rich IntelliSense experience.

大體意思就是通過Typings能對第三方庫例如咱們所使用的react-native進行其變數及方法的提示。

1.全域性安裝typings

npm install typings --global

安裝完成如下圖所示：

2.在當前專案根目錄安裝相應的typings包

可以在VSCode中通過快捷鍵Ctrl+Shift+C開啟控制檯並定位到當前專案的根目錄，然後全域性安裝：

typings install dt~react-native --save --global

安裝完成如下圖所示：

並且你的VSCode的根目錄下會多一個typings.json檔案。

至此配置完以後編寫程式碼就會可以自動提示補全：

並且滑鼠移過去還能有相應的文件提示了

外掛推薦

為了開發的便捷，我還推薦以下外掛：

• Auto Close Tag 自動閉合標籤

• Auto Rename Tag 自動重新命名標籤，配合上面的外掛使用，基本上能趕上IntelliJ IDEA系的功能了

• Reactjs code snippets react的程式碼提示，如componentWillMount方法可以通過cwm直接獲得

• Path Intellisense 檔案路徑提示補全