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

Posted 2023-02-22

【中文标题】项目级 .eslintrc.js 打字稿规则未生效

【英文标题】：Project-level .eslintrc.js tyepscript rule not taking effect

【发布时间】：2021-10-17 07:18:27

【问题描述】：

我正在关注 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,ts?(x)',
        '**/tests/unit/**/*.spec.j,ts?(x)'
      ],
      env: 
        jest: true
      
    
  ]

我做错了什么？

【问题讨论】：

Here's the repo （我省略了/node_modules 以减小存储库大小。）正如您从我的问题中的错误中看到的那样，它引用了默认的 ESLint 配置，并且似乎忽略了覆盖在项目根目录中我自己的 ESLint 配置中。谢谢。

【参考方案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();
;

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

【讨论】：

哦，天哪...是的，我现在记得，我违反了教程并使用了箭头功能。菜鸟错误！谢谢。