Project-level .eslintrc.js tyepscript rule not taking effect

Question

I'm following along with this Ionic/Vue 3 tutorial, but I'm getting this error when I serve the project:

It seems my project-level .eslintrc.js isn't taking effect. In it I have an override for that rule:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-deprecated-slot-attribute': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-use-before-define': ["error", { "functions": false, "classes": false }]
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

What am I doing wrong?

Answer 1

ESLint config

The configuration you have is actually taking effect:

module.exports = {
  rules: {
    '@typescript-eslint/no-use-before-define': ["error", {
      "functions": false,
      "classes": false
    }]
  }
}

Note functions: false isn't going to control the linter error you're observing because fetchWeather is technically a variable, and not a function declaration. If you add variables: false, you'll notice the linter error go away:

module.exports = {
  rules: {
    '@typescript-eslint/no-use-before-define': ["error", {
      "functions": false,
      "classes": false,
      "variables": false, 👈
    }]
  }
}

But I would not recommend that because the linter error is useful here, as it's trying to prevent a bug that would cause a runtime error.

The error

In weather.service.ts, the export at the top is referencing fetchWeather, a const defined below. const variables are not hoisted like var or regular function declarations, leading to the error you observed.

export const useWeather = () => ({
    weather,
    fetchWeather
    ^^^^^^^^^^^^
});

// 👇 not hoisted above
const fetchWeather = async () => {
    const {coords} = await Geolocation.getCurrentPosition();
    const response = await fetch(`${weatherUrl}&lat=${coords.latitude}&long=${coords.longitude}`);
    weather.value = await response.json();
};

Solution

Either move the export to the bottom after the fetchWeather declaration, or make fetchWeather a regular function for it to be hoisted:

export const useWeather = () => ({
    weather,
    fetchWeather
});

async function fetchWeather() {
    const {coords} = await Geolocation.getCurrentPosition();
    const response = await fetch(`${weatherUrl}&lat=${coords.latitude}&long=${coords.longitude}`);
    weather.value = await response.json();
};

You'll notice in the tutorial video that is how they've written it: