新建的React Native就遇到vscode報警解除方法

新建的RN項目有警告

我相信AwesomeProject是很多人的第一個RN項目，包括我在內。

npx react-native init AwesomeProject

但是當利用RN的腳手架搭建起來後，在vscode裡打開項目，直接就會遇到如下這個vscode的警告：

'import type' declarations can only be used in TypeScript files. ts(8006)

這個vscode的警告不會影響程序的編譯和運行，但是任何一個有代碼潔癖的程序員，肯定是無法忍受的。我就被它折磨過一段時間，我先後采用瞭兩種方式解決它。

在我剛接觸RN時，為瞭集中精力關註主要矛盾，我當時直接刪除瞭那些vscode報警的地方。因為那個報警就是Flow的語法，而Flow隻是靜態類型檢查的一種方式，是為瞭補齊javascript沒有類型這塊短板的，所以即使不使用它，而僅僅保留js的語法部分，也是不會影響運行的。

// import type {Node} from 'react';
...
const Section = ({children, title}) /*: Node*/ => {
...
const App /*: () => Node*/ = () => {
...

這樣刪除或者註釋掉這些語法之後，vscdoe的報警就解除瞭。

過瞭一段時間，我漸漸熟悉瞭React Native的一些東西，主要矛盾解決的差不多瞭，是時候回過頭來看看怎麼處理它瞭。Flow的類型定義和Typescript還是蠻相似的，很多地方的語法都一模一樣，也難怪vscode把它識別成瞭TypeScript。

因為我默認生成RN項目時，並不打算使用TypeScript，而是打算全套用FB的東西：RN配Flow。所以，第一步，就是針對我的workspace，關閉vscode的Typescript檢查。

廢話不多說，直接上圖：

在vscode中disable掉內置的兩個TypeScript插件，註意要選擇僅僅是當前worksapce下disable就好。

既然禁止瞭TypeSCript，那麼就需要引入Flow的插件瞭，還是上圖：

該插件名字叫Flow Language Support，也是人氣超高的插件啊。

引入插件後，你會發現，似乎這個插件並沒有工作。因為一個插件的工作，其實有時候是需要node_modules裡有讓這個插件使用的命令行工具才行。插件本身，隻是為瞭契合vscdoe的一個殼，殼子裡的內容，是需要有對應的包的支持的。

yarn add flow-bin flow-parser -D

安裝這兩個包為插件賦予真正的靈魂。關閉vscode，然後重新打開。之所以這麼做的目的是因為有些插件需要重新啟動vscode才行，我的習慣就是每次安裝完插件，甭管是否有重啟的提示，都會主動重啟。

很遺憾，這次又有瞭新的報錯：

根據提示，好像是因為插件依賴的flow版本是0.183.0，而.flowconfig中的版本是^0.182.0。這個錯誤提醒瞭我們，要保證當前項目中，各個地方使用的flow版本，都一致才行。知道插件用的是0.183.0，那麼也要保證其餘地方也是這個版本。

yarn add [email protected] [email protected] -D

於是我們重新安裝flow-bin和flow-parser，保證他倆的版本和插件依賴的版本一致。然後再把.flowconfig裡的version改瞭。

重啟一下vscode，再次打開後，Flow插件就工作正常瞭。

我在安裝Flow插件的時候的版本提示是0.183.0，但是這個版本隨著時間的推移，必然會變化，記得隨機應變哦。

以上就是新建的React Native就遇到vscode報警解除方法的詳細內容，更多關於React Native解除vscode報警的資料請關註WalkonNet其它相關文章！