如何在VSCode中实现React组件类似JSX标签的自动补全功能

• 安装必备扩展
  确保VSCode安装了ES7+ React/Redux/React-Native snippets扩展，同时保持VSCode自带的TypeScript and JavaScript Language Features扩展处于启用状态，这是JSX语法识别和补全的基础。
• 规范组件导出导入
  自定义组件需要明确导出（支持命名导出或默认导出），使用组件的文件只要提前导入对应组件，输入组件名前缀就会触发自动补全。示例导入写法：

  import Header from './Header'
  import { Main, Footer } from './Layout'
  

• 开启自动导入配置
  打开VSCode设置，搜索autoImports，勾选JavaScript和TypeScript对应分类下的自动导入选项，也可以直接在settings.json中添加如下配置：

  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true
  

  开启后输入未导入的组件名，选中补全选项时会自动在文件顶部添加导入语句。
• 添加项目配置文件
  针对JavaScript项目，可以在项目根目录新增jsconfig.json文件，提升VSCode对项目组件的识别精度：

  {
    "compilerOptions": {
      "jsx": "react-jsx",
      "baseUrl": "src"
    },
    "include": ["src/**/*"]
  }
  

  TypeScript项目则确保tsconfig.json中已经配置了"jsx": "react-jsx"属性即可。
• 配置Props补全（可选）
  若需要组件属性也支持自动补全，TypeScript项目可以直接为组件定义Props类型，JavaScript项目可以通过JSDoc标注实现：

  /**
   * 页面头部组件
   * @param {Object} props
   * @param {string} props.title 头部展示标题
   * @param {boolean} props.showBackBtn 是否展示返回按钮
   * @returns {JSX.Element}
   */
  function Header({ title, showBackBtn }) {
    // 组件逻辑
  }
  

• 异常修复
  如果配置后未生效，可按下快捷键Ctrl+Shift+P（Mac系统为Cmd+Shift+P），搜索并执行「TypeScript: Restart TS Server」，重启语言服务后即可生效。

内容的提问来源于stack exchange，提问作者Mahmoud Abdulmuty