项目级 .eslintrc.js typescript 规则未生效

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

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

项目级 .eslintrc.js typescript 规则未生效

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

typescript

eslint

ionic-framework

vue.js

ESLint 配置

错误

解决方案