使用 Firebase config.ts 文件设置 Vue 3 + Quasar 时，我收到此 eslint 错误：Unsafe assignment of an `any` value

Question

. Answers to this question are eligible for a +100 reputation bounty. TinyTiger wants to to this question.

I have just setup a fresh Vue 3 Quasar project using the Quasar CLI.

And I have created a new src/firebase/config.ts file to store my firebase configuration, it looks like this:

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { getFirestore, serverTimestamp } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';
import { getStorage } from 'firebase/storage';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: 'REDACTED',
  authDomain: 'REDACTED',
  projectId: 'REDACTED',
  storageBucket: 'REDACTED',
  messagingSenderId: 'REDACTED',
  appId: 'REDACTED',
  measurementId: 'REDACTED',
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);

//Export modules
export const db = getFirestore(firebaseApp);
export const store = getStorage(firebaseApp);
export const auth = getAuth(firebaseApp);
export const timestamp = serverTimestamp();

But the const firebaseApp = initializeApp(firebaseConfig); line is throwing an eslint error of Unsafe assignment of an 'any' value. eslint@typescript-eslint/no-unsafe-assignment Unsafe assignment of an 'any' value. eslint@typescript-eslint/no-unsafe-assignment .

Here is the .eslintrc.js file made by Quasar CLI during project creation:

const { resolve } = require('path');
module.exports = {
  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
  // This option interrupts the configuration hierarchy at this file
  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
  root: true,

  // https://eslint.vuejs.org/user-guide/#how-to-use-custom-parser
  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
  parserOptions: {
    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#configuration
    // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#eslint
    // Needed to make the parser take into account 'vue' files
    extraFileExtensions: ['.vue'],
    parser: '@typescript-eslint/parser',
    project: resolve(__dirname, './tsconfig.json'),
    tsconfigRootDir: __dirname,
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },

  env: {
    browser: true
  },

  // Rules order is important, please avoid shuffling them
  extends: [
    // Base ESLint recommended rules
    // 'eslint:recommended',

    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
    // ESLint typescript rules
    'plugin:@typescript-eslint/recommended',
    // consider disabling this class of rules if linting takes too long
    'plugin:@typescript-eslint/recommended-requiring-type-checking',

    // Uncomment any of the lines below to choose desired strictness,
    // but leave only one uncommented!
    // See https://eslint.vuejs.org/rules/#available-rules
    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)

    // https://github.com/prettier/eslint-config-prettier#installation
    // usage with Prettier, provided by 'eslint-config-prettier'.
    'prettier'
  ],

  plugins: [
    // required to apply rules which need type information
    '@typescript-eslint',

    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
    // required to lint *.vue files
    'vue',

    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
    // Prettier has not been included as plugin to avoid performance impact
    // add it as an extension for your IDE
  ],

  globals: {
    ga: 'readonly', // Google Analytics
    cordova: 'readonly',
    __statics: 'readonly',
    __QUASAR_SSR__: 'readonly',
    __QUASAR_SSR_SERVER__: 'readonly',
    __QUASAR_SSR_CLIENT__: 'readonly',
    __QUASAR_SSR_PWA__: 'readonly',
    process: 'readonly',
    Capacitor: 'readonly',
    chrome: 'readonly',
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },

  // add your custom rules here
  rules: {
    'prefer-promise-reject-errors': 'off',

    // TypeScript
    quotes: ['warn', 'single', { avoidEscape: true }],
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',

    // allow debugger during development only
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  }
}

I'm not sure why I am seeing this error.

When creating projects using the Vue CLI instead of the Quasar CLI I do not get the same error.

Since the Vue CLI creates a different type of .eslintrc.js compared to the Quasar CLI .eslintrc.js file I assume the problem is the configuration chosen by the Quasar CLI.

Here is a copy of the .eslintrc.js file from the projects created using the Vue CLI.

Maybe to fix the errors some parts of this version could be safely merged into the .eslintrc.js file created by Quasar?

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
};

Answer 1

I'm not sure if this will work, but try declaring the type for your config:

const firebaseConfig: FirebaseOptions = ...

and for your firebase app:

const firebaseApp: FirebaseApp = initializeApp(firebaseConfig);

And import those types:

import { FirebaseOptions, FirebaseApp, initializeApp } from "firebase/app";

Answer 2

This feels a bit stupid, but all I had to do was restart my IDE (Visual Studio Code) and the errors went away.