UmiJS 3 项目中 eslint 在 VS Code 中没有提示对应的错误

[onlyling]

What happens?

通过 UmiJS 快速上手文档 yarn create @umijs/umi-app 创建一个简单的项目，TypeScript 为基础，参照 @umijs/fabric 文档上的使用方式，添加一个 .eslintrc.js，内容如下：

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],

  // in antd-design-pro
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
  },

  rules: {
    'no-unused-vars': ['error'],
    'react/jsx-filename-extension': [
      1,
      { extensions: ['.js', '.jsx', '.tsx'] },
    ],
    '@typescript-eslint/no-unused-vars': ['error'],
    '@typescript-eslint/member-delimiter-style': 0,
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/no-empty-function': ['warn'],
    'jsx-quotes': ['error', 'prefer-double'],
    '@typescript-eslint/no-explicit-any': 0,
    'react/self-closing-comp': 1,
  },
};

修改项目默认的 pages/index.tsx 文件，内容如下：

import React from 'react';
import styles from './index.less';

const A = 1;

export default () => {
  return (
    <div>
      <div className="test"></div>
      <h1 className={styles.title}>Page index</h1>
    </div>
  );
};

按照其他相似配置的项目，A 提示未使用到，<div className="test"></div> 提示应该单闭合。

修改 tsconfig.json，添加 "noUnusedLocals": true，VS Code 会提示 已声明“A”，但从未读取其值。，并不是来自 eslint 的检测。

最小可复现仓库

无

复现步骤，错误日志以及相关配置

参考 What happens

相关环境信息

• Umi 版本：^3.0.9
• Node 版本：v12.14.1
• 操作系统：mac OS 10.15.3

解决方案

项目目录安装 typescript 就正常了。

[sorrycc]

@chenshuai2144

[bo3enwang]

我这里也有这个问题，安装了 typescript 后好了

你也可用运行下 eslint 看下是什么问题

[chenshuai2144]

执行一下 yarn lint 试试，是不是缺了什么依赖

[Heshiyu1996]

谢谢！~安装了.eslintrc里用到的所有插件，解决了问题

（通过package里的script运行居然没有提示任何ESLint插件缺失....）

[beilo]

我在尝试安装完如下脚本后，vscode可以正常提醒

"eslint": "^7.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^9.0.0",
"eslint-config-umi": "^1.6.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.4",
"eslint-plugin-react-hooks": "^4.0.8",
"typescript": "^3.9.7"

lint 命令如下，输入后可看到缺少哪些包的错误信息

"lint": "eslint ./ --ext .ts --cache --fix"

以下是我的配置文件

// .eslintrc.js
module.exports = {
  extends: [require.resolve("@umijs/fabric/dist/eslint")],
  root: true,
  env: {
    node: true,
  },
  globals: {
    window: true,
  },
  rules: {
    "arrow-parens": [2, "always"],
    quotes: [2, "double"],
    "comma-dangle": 0,
    "implicit-arrow-linebreak": 0,
    "max-len": [
      2,
      {
        code: 200,
      },
    ],
    "object-curly-newline": 0,
    radix: 0,
    "operator-linebreak": 0,
    camelcase: 0,
    "import/no-cycle": 0,
    "lines-between-class-members": 0,
    "dot-notation": 0,
    "no-console": ["error", { allow: ["warn", "error"] }],
    "prefer-destructuring": 0,
    "wrap-iife": [2, "inside"],
    "no-restricted-syntax": 0,
    "array-callback-return": 0,
  },
};

[PLQin]

找到原因了，见：https://segmentfault.com/q/1010000022696658/a-1020000039837621

[Simoon-F]

没效果