新建的React Native就遇到vscode報警,怎麼破?
新建的RN專案有警告
我相信AwesomeProject是很多人的第一個RN專案,包括我在內。
js
npx react-native init AwesomeProject
但是當利用RN的腳手架搭建起來後,在vscode裡開啟專案,直接就會遇到如下這個vscode的警告:
'import type' declarations can only be used in TypeScript files. ts(8006)
這個vscode的警告不會影響程式的編譯和執行,但是任何一個有程式碼潔癖的程式設計師,肯定是無法忍受的。我就被它折磨過一段時間,我先後採用了兩種方式解決它。
直接刪除vscode報警的部分
在我剛接觸RN時,為了集中精力關注主要矛盾,我當時直接刪除了那些vscode報警的地方。因為那個報警就是Flow的語法,而Flow只是靜態型別檢查的一種方式,是為了補齊javascript沒有型別這塊短板的,所以即使不使用它,而僅僅保留js的語法部分,也是不會影響執行的。
js
// import type {Node} from 'react';
...
const Section = ({children, title}) /*: Node*/ => {
...
const App /*: () => Node*/ = () => {
...
這樣刪除或者註釋掉這些語法之後,vscdoe的報警就解除了。
禁掉vscode內建的TypeScript外掛
過了一段時間,我漸漸熟悉了React Native的一些東西,主要矛盾解決的差不多了,是時候回過頭來看看怎麼處理它了。Flow的型別定義和Typescript還是蠻相似的,很多地方的語法都一模一樣,也難怪vscode把它識別成了TypeScript。
因為我預設生成RN專案時,並不打算使用TypeScript,而是打算全套用FB的東西:RN配Flow。所以,第一步,就是針對我的workspace,關閉vscode的Typescript檢查。
廢話不多說,直接上圖:
在vscode中disable掉內建的兩個TypeScript外掛,注意要選擇僅僅是當前worksapce下disable就好。
引入Flow Language Support解除報警
既然禁止了TypeSCript,那麼就需要引入Flow的外掛了,還是上圖:
該外掛名字叫Flow Language Support
,也是人氣超高的外掛啊。
引入外掛後,你會發現,似乎這個外掛並沒有工作。因為一個外掛的工作,其實有時候是需要node_modules裡有讓這個外掛使用的命令列工具才行。外掛本身,只是為了契合vscdoe的一個殼,殼子裡的內容,是需要有對應的包的支援的。
js
yarn add flow-bin flow-parser -D
安裝這兩個包為外掛賦予真正的靈魂。關閉vscode,然後重新開啟。之所以這麼做的目的是因為有些外掛需要重新啟動vscode才行,我的習慣就是每次安裝完外掛,甭管是否有重啟的提示,都會主動重啟。
很遺憾,這次又有了新的報錯:
根據提示,好像是因為外掛依賴的flow版本是0.183.0,而.flowconfig中的版本是^0.182.0。這個錯誤提醒了我們,要保證當前專案中,各個地方使用的flow版本,都一致才行。知道外掛用的是0.183.0,那麼也要保證其餘地方也是這個版本。
js
yarn add [email protected] [email protected] -D
於是我們重新安裝flow-bin和flow-parser,保證他倆的版本和外掛依賴的版本一致。然後再把.flowconfig裡的version改了。
重啟一下vscode,再次開啟後,Flow外掛就工作正常了。
我在安裝Flow外掛的時候的版本提示是0.183.0,但是這個版本隨著時間的推移,必然會變化,記得隨機應變哦。