新建的RN項(xiàng)目有警告

我相信AwesomeProject是很多人的第一個(gè)RN項(xiàng)目，包括我在內(nèi)。

npx react-native init AwesomeProject

但是當(dāng)利用RN的腳手架搭建起來后，在vscode里打開項(xiàng)目，直接就會(huì)遇到如下這個(gè)vscode的警告：

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

這個(gè)vscode的警告不會(huì)影響程序的編譯和運(yùn)行，但是任何一個(gè)有代碼潔癖的程序員，肯定是無法忍受的。我就被它折磨過一段時(shí)間，我先后采用了兩種方式解決它。

直接刪除vscode報(bào)警的部分

在我剛接觸RN時(shí)，為了集中精力關(guān)注主要矛盾，我當(dāng)時(shí)直接刪除了那些vscode報(bào)警的地方。因?yàn)槟莻€(gè)報(bào)警就是Flow的語法，而Flow只是靜態(tài)類型檢查的一種方式，是為了補(bǔ)齊javascript沒有類型這塊短板的，所以即使不使用它，而僅僅保留js的語法部分，也是不會(huì)影響運(yùn)行的。

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

這樣刪除或者注釋掉這些語法之后，vscdoe的報(bào)警就解除了。

禁掉vscode內(nèi)置的TypeScript插件

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

因?yàn)槲夷J(rèn)生成RN項(xiàng)目時(shí)，并不打算使用TypeScript，而是打算全套用FB的東西：RN配Flow。所以，第一步，就是針對我的workspace，關(guān)閉vscode的Typescript檢查。

廢話不多說，直接上圖：

在vscode中disable掉內(nèi)置的兩個(gè)TypeScript插件，注意要選擇僅僅是當(dāng)前worksapce下disable就好。

引入Flow Language Support解除報(bào)警

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

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

引入插件后，你會(huì)發(fā)現(xiàn)，似乎這個(gè)插件并沒有工作。因?yàn)橐粋€(gè)插件的工作，其實(shí)有時(shí)候是需要node_modules里有讓這個(gè)插件使用的命令行工具才行。插件本身，只是為了契合vscdoe的一個(gè)殼，殼子里的內(nèi)容，是需要有對應(yīng)的包的支持的。

yarn add flow-bin flow-parser -D

安裝這兩個(gè)包為插件賦予真正的靈魂。關(guān)閉vscode，然后重新打開。之所以這么做的目的是因?yàn)橛行┎寮枰匦聠?dòng)vscode才行，我的習(xí)慣就是每次安裝完插件，甭管是否有重啟的提示，都會(huì)主動(dòng)重啟。

很遺憾，這次又有了新的報(bào)錯(cuò)：

根據(jù)提示，好像是因?yàn)椴寮蕾嚨膄low版本是0.183.0，而.flowconfig中的版本是^0.182.0。這個(gè)錯(cuò)誤提醒了我們，要保證當(dāng)前項(xiàng)目中，各個(gè)地方使用的flow版本，都一致才行。知道插件用的是0.183.0，那么也要保證其余地方也是這個(gè)版本。

yarn add flow-bin@0.183.0 flow-parser@0.183.0 -D

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

重啟一下vscode，再次打開后，F(xiàn)low插件就工作正常了。

我在安裝Flow插件的時(shí)候的版本提示是0.183.0，但是這個(gè)版本隨著時(shí)間的推移，必然會(huì)變化，記得隨機(jī)應(yīng)變哦。

以上就是新建的React Native就遇到vscode報(bào)警解除方法的詳細(xì)內(nèi)容，更多關(guān)于React Native解除vscode報(bào)警的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論