项目级 .eslintrc.js 打字稿规则未生效

Question

我正在关注 this Ionic/Vue 3 tutorial，但在为项目提供服务时出现此错误：

我的项目级 .eslintrc.js 似乎没有生效。在其中，我对该规则进行了覆盖：

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
      }
    }
  ]
}

我做错了什么？

Answer 1

ESLint 配置

你的配置实际生效了：

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

注意functions: false 不会控制您观察到的 linter 错误，因为fetchWeather 在技术上是一个变量，而不是一个函数声明。如果添加 variables: false，您会注意到 linter 错误消失了：

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

但我不建议这样做，因为 linter 错误在这里很有用，因为它试图防止会导致运行时错误的错误。

错误

在weather.service.ts 中，顶部的export 引用fetchWeather, a const defined below。 const 变量不是 hoisted like var or regular function declarations，导致您观察到的错误。

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

解决方案

要么将 export 移动到 fetchWeather 声明之后的底部，要么将 fetchWeather 设为常规函数以使其被提升：

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

您会在教程视频中注意到他们是这样编写的：