VSCode中的JavaScript React項目上的Firebase智能感知/自動補全

Question

我正在開發一個React和Firebase項目，但在我的代碼上設置自動補全功能時遇到了麻煩（我正在使用VScode）。

到目前為止，這是我得到的：

---

我如何為我的應用程序組件提供Firebase（通過上下文）

---

FirebaseContext.js

import React from 'react';

const FirebaseContext = React.createContext(null);

export default FirebaseContext;

firebase.js

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;

index.js

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')
);

---

我如何在組件中使用Firebase

---

AddProductContainer.js

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 。 我沒有使用Typescript。

在這種情況下，有沒有辦法使用JSDoc批注來訪問自動完成功能？

就像是：

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

Answer 1

如果沒有Typescript或類似的東西，以它的方式進行操作肯定很棘手，但是我可以建議另一個選擇嗎？

我認為沒有必要將firebase對象本身放在上下文中。 如果您打算使用多個應用程序或只是想顯式地將app放在上下文中（從firebase.initializeApp返回的對象）可能很有意義，但是好像firebase本身作為直接導入（ import firebase from 'firebase/app'似乎更有意義import firebase from 'firebase/app' ）。 它不會創建firebase的第二個實例，也不會創建任何您關心的東西，它只是firebase庫的句柄。 只要首先運行initializeApp()它將接您使用firebase.initializeApp()初始化的默認應用。 initializeApp()創建一個全局默認Firebase應用程序，任何Firebase方法調用都將使用該應用程序。

如果您對全局變量不滿意，可以通過分配const app = firebase.initializeApp(...) ，然后通過prop或context傳遞app ，然后始終使用app作為參數，例如firebase.firestore(app).collection('products').etc...

但是直接在您使用firebase包的任何文件的頂部直接導入firebase包（並且要在其中自動完成）應該沒有成本。