Интеллектуальность / автозаполнение Firebase в проекте JavaScript React в VSCode

Question

Я работаю над проектом React и Firebase, и у меня возникают проблемы с настройкой автозаполнения моего кода (я использую VScode).

Вот что у меня так далеко:

---

КАК Я ОБЕСПЕЧИВАЮ FIRBASE МОИМ КОМПОНЕНТАМ ПРИЛОЖЕНИЯ (VIA CONTEXT)

---

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

---

КАК Я ПОТРЕБЛЯЮ ПОЖАРУ В МОИХ КОМПОНЕНТАХ

---

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

}

---

ВОПРОС

Как я могу получить автозаполнение от Firebase внутри проекта JavaScript?

Примечание: Все мои файлы компонентов .js. Я не использую Typescript.

Есть ли способ использовать аннотации JSDoc для получения доступа к автозаполнению в этом случае?

Что-то вроде:

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

Answer 1

Определенно было бы довольно сложно сделать это так, как вы делаете это без Typescript или чего-то еще, но я могу предложить другой вариант?

Я не думаю, что необходимо ставить firebaseСам объект в контексте.Помещение app в контекст может иметь смысл (объект, возвращаемый из firebase.initializeApp), если вы собираетесь использовать более одного приложения или просто хотите быть явным, но кажется, что сам firebase будет иметь больше смысла, будучи прямымимпортировать (import firebase from 'firebase/app') в любой файл, который его использует.Он не создаст второй экземпляр firebase или чего-то еще, если это то, что вас беспокоит, это всего лишь дескриптор библиотеки firebase.Он подберет приложение по умолчанию, которое вы инициализировали с помощью firebase.initializeApp(), пока initializeApp() запускается первым.initializeApp() создает глобальное приложение firebase по умолчанию, которое будет обрабатываться при любом вызове методов Firebase.

Если вам не нравятся глобальные переменные, вы можете точно указать конкретное приложение, с которым вы работаете, назначив const app = firebase.initializeApp(...), затем передавая app через props или контекст, затем всегда вызывая пакеты firebase с app в качестве аргумента, например firebase.firestore(app).collection('products').etc....

Но импорт firebase не должен стоить затратУпакуйте непосредственно в начало любого файла, в котором вы его используете (и хотите автозаполнение).