![](/img/trans.png)
[英]Is there any way to enable TypeScript interfaces IntelliSense for React project in VSCode?
[英]Firebase intellisense / autocompletion on JavaScript React project in VSCode
我正在开发一个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);
如果没有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
包(并且要在其中自动完成)应该没有成本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.