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?

[Here's the repo](https://github.com/mitya33/eslintissue) (I've omitted `/node_modules` to keep the repo size down.) As you can see from the erorr in my question, it's referencing the default ESLint config, and seemingly ignoring the overrides in my own ESLint config in the root of the project. Thanks. — Mitya, Aug 15 '21 at 10:15

tony19 · Accepted Answer · 2021-08-16T12:07:22.063

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:

Oh dang... yes, I remember now, I went against the tutorial and used an arrow function. Rookie error! Thanks. — Mitya, Aug 15 '21 at 16:35

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

1 Answers1

ESLint config

The error

Solution