Reactjs VSCode中JavaScript React项目的Firebase intellisense/autocompletion

我正在从事React和Firebase项目，在设置代码的自动完成时遇到问题（我使用的是VScode）

以下是到目前为止我得到的信息：

---

我如何向我的应用程序组件提供FIREBASE（通过上下文）

---

FirebaseContext.js

import React from 'react';

const FirebaseContext = React.createContext(null);

export default FirebaseContext;

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';

// .env file in root folder
const config = {
  apiKey: process.env.FIREBASE_APP_API_KEY,
  authDomain: process.env.FIREBASE_APP_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_APP_DATABASE_URL,
  projectId: process.env.FIREBASE_APP_PROJECT_ID,
  storageBucket: process.env.FIREBASE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_APP_MESSAGING_SENDER_ID
};

firebase.initializeApp(config);
firebase.functions().useFunctionsEmulator('http://localhost:5000');

export default firebase;

import React from 'react';
import ReactDOM from 'react-dom';
import firebase from './helpers/firebase/firebase';
import FirebaseContext from './helpers/firebase/FirebaseContext';
import { BrowserRouter as Router} from "react-router-dom";

...

ReactDOM.render(

  // HERE'S HOW I'M PROVIDING FIREBASE FOR MY APP
  <FirebaseContext.Provider value={firebase}>
    <Router>
      <App/>
    </Router>
  </FirebaseContext.Provider>

,document.getElementById('root')
);

import React, { useEffect, useState, useCallback, useContext } from 'react';
import FirebaseContext from '../../../helpers/firebase/FirebaseContext';

function AddProductContainer() {

  const firebase = useContext(FirebaseContext);

  function saveToFirestore() {
    // I DON'T HAVE ANY AUTOCOMPLETION FROM 'FIREBASE...'
    firebase.firestore().collection('products').add({ 
      title: productDetails.title.newTitle,
      description: productDetails.description,
      categories: productDetails.categories
    });
  }

}

firebase.js

import React from 'react';

const FirebaseContext = React.createContext(null);

export default FirebaseContext;

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';

// .env file in root folder
const config = {
  apiKey: process.env.FIREBASE_APP_API_KEY,
  authDomain: process.env.FIREBASE_APP_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_APP_DATABASE_URL,
  projectId: process.env.FIREBASE_APP_PROJECT_ID,
  storageBucket: process.env.FIREBASE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_APP_MESSAGING_SENDER_ID
};

firebase.initializeApp(config);
firebase.functions().useFunctionsEmulator('http://localhost:5000');

export default firebase;

import React from 'react';
import ReactDOM from 'react-dom';
import firebase from './helpers/firebase/firebase';
import FirebaseContext from './helpers/firebase/FirebaseContext';
import { BrowserRouter as Router} from "react-router-dom";

...

ReactDOM.render(

  // HERE'S HOW I'M PROVIDING FIREBASE FOR MY APP
  <FirebaseContext.Provider value={firebase}>
    <Router>
      <App/>
    </Router>
  </FirebaseContext.Provider>

,document.getElementById('root')
);

import React, { useEffect, useState, useCallback, useContext } from 'react';
import FirebaseContext from '../../../helpers/firebase/FirebaseContext';

function AddProductContainer() {

  const firebase = useContext(FirebaseContext);

  function saveToFirestore() {
    // I DON'T HAVE ANY AUTOCOMPLETION FROM 'FIREBASE...'
    firebase.firestore().collection('products').add({ 
      title: productDetails.title.newTitle,
      description: productDetails.description,
      categories: productDetails.categories
    });
  }

}

index.js

import React from 'react';

const FirebaseContext = React.createContext(null);

export default FirebaseContext;

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';

// .env file in root folder
const config = {
  apiKey: process.env.FIREBASE_APP_API_KEY,
  authDomain: process.env.FIREBASE_APP_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_APP_DATABASE_URL,
  projectId: process.env.FIREBASE_APP_PROJECT_ID,
  storageBucket: process.env.FIREBASE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_APP_MESSAGING_SENDER_ID
};

firebase.initializeApp(config);
firebase.functions().useFunctionsEmulator('http://localhost:5000');

export default firebase;

import React from 'react';
import ReactDOM from 'react-dom';
import firebase from './helpers/firebase/firebase';
import FirebaseContext from './helpers/firebase/FirebaseContext';
import { BrowserRouter as Router} from "react-router-dom";

...

ReactDOM.render(

  // HERE'S HOW I'M PROVIDING FIREBASE FOR MY APP
  <FirebaseContext.Provider value={firebase}>
    <Router>
      <App/>
    </Router>
  </FirebaseContext.Provider>

,document.getElementById('root')
);

import React, { useEffect, useState, useCallback, useContext } from 'react';
import FirebaseContext from '../../../helpers/firebase/FirebaseContext';

function AddProductContainer() {

  const firebase = useContext(FirebaseContext);

  function saveToFirestore() {
    // I DON'T HAVE ANY AUTOCOMPLETION FROM 'FIREBASE...'
    firebase.firestore().collection('products').add({ 
      title: productDetails.title.newTitle,
      description: productDetails.description,
      categories: productDetails.categories
    });
  }

}

---

问题

如何在JavaScript项目中从Firebase获得自动完成

注意：我所有的组件文件都是

.js

。我没有使用打字脚本

在这种情况下，有没有一种方法可以使用JSDoc注释来访问自动完成

比如：

/** @type {firebase} */
const firebase = useContext(FirebaseContext);

---

如果不使用打字机之类的东西，用你现在的方式来做肯定会很棘手，但是我能推荐另一种选择吗

我认为没有必要将

firebase

对象本身置于上下文中。如果您打算使用多个应用程序，或者只是想显式地使用，

firebase

将

app

放在上下文中可能有意义（从

firebase.initializeApp

返回的对象），但是

firebase

本身作为直接导入似乎更有意义（

从“firebase/app”导入firebase

）在任何使用它的文件中。它不会创建firebase的第二个实例或其他任何东西，如果这是您所关心的，它只是firebase库的一个句柄。只要先运行

initializeApp（）

，它就会选择您用

firebase.initializeApp（）初始化的默认应用程序
initializeApp（）
创建一个全局默认firebase应用程序，任何调用firebase方法的操作都会选择该应用程序

如果您对globals感到不舒服，您可以通过分配
const app=firebase.initializeApp（…）
，然后通过道具或上下文传递
app
，然后始终以
app
作为参数调用firebase包，例如
firebase.firestore（app）.集合（“产品”）等。

但是直接在您使用的任何文件顶部导入
firebase
包（并希望自动完成）应该不会产生任何成本。
它不会创建firebase的第二个实例或任何东西，如果这正是您所关心的：这正是我所关心的。我将只使用1个firebase应用程序。但是在哪里运行
firebase.initializeApp（）
命令呢？我应该在导入
firebase
的每个文件上调用它吗？谢谢