时间戳

首页 > 解决方案 > VSCode中JavaScript React项目的Firebase智能感知/自动完成

reactjs - VSCode中JavaScript React项目的Firebase智能感知/自动完成

问题描述

我正在开发一个 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

添加ProductContainer.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. 我没有使用打字稿。

在这种情况下，有没有办法使用 JSDoc 注释来访问自动完成功能？

就像是：

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

标签： reactjsfirebasejsdoc

解决方案

在没有 Typescript 或其他东西的情况下这样做肯定会非常棘手，但我可以建议另一种选择吗？

我认为没有必要将firebase对象本身放在上下文中。如果您要使用多个应用程序或只是想明确说明，则放入上下文可能是有意义的（从 中返回的对象），但在app任何使用它的文件中直接导入（）似乎更有意义. 如果您担心的是，它不会创建第二个 firebase 实例或任何东西，它只是 firebase 库的句柄。只要先运行，它就会选择您初始化的默认应用程序。 创建一个全局默认的 Firebase 应用程序，任何 Firebase 方法的调用都会被调用。firebase.initializeAppfirebaseimport firebase from 'firebase/app'firebase.initializeApp()initializeApp()initializeApp()

如果您对全局变量不满意，您可以通过分配来明确您正在使用的特定应用程序const app = firebase.initializeApp(...)，然后app通过 props 或上下文传递，然后始终使用作为参数调用 firebase 包app，例如firebase.firestore(app).collection('products').etc....

但是firebase直接在你使用它的任何文件的顶部导入包应该是免费的（并且想要自动完成）。

推荐阅读