React VS Code 自動匯入引用元件 auto import referenced components

在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;

github。

• Auto Import of React Components in Visual Studio Code