在VS Code自動匯入引用的React元件的方式如下。
VS Code可加入jsconfig.json
來達到React自動匯入元件的功能。
事前要求
參考「React 使用Create React App建立React應用程式」建立React應用程式。
設定jsconfig.json
在React專案根目錄/app
下新增jsconfig.json
及內容如下。jsx
屬性設定參考TSConfig - JSX。
jsconfig.json
{
"compilerOptions": {
"module": "es6",
"moduleResolution": "node",
"baseUrl": "./src",
"checkJs": true,
"jsx": "react"
},
"exclude": ["node_modules", "**/node_modules/*"]
}
設定之後在撰寫React時引用React元件會自動提示及匯入。
測試
在React專案根目錄/app
下新增Message.js
內容如下。
Message.js
import * as React from 'react';
export const Message = () => {
return (<h1>Hello, world!</h1>)
}
修改App.js
如下,在引用Message.js
的Message
元件時會動彈出提示,並在存檔時自動加上import { Message } from 'Message';
。
App.js
import './App.css';
import * as React from 'react';
import { Message } from 'Message';
function App() {
return (
<Message />
)
}
export default App;
沒有留言:
張貼留言