如何使用 .eslintrc.js 修复文件夹外文件的"No ESLint configuration found"？(仅当我尝试使用枚举值时才会发生)

Question

应用结构

我正在创建一个全栈应用程序(Node.js + TypeScript + Vue，其他位无关紧要)，我有以下文件夹结构：

<project root>
model/
front/
src/
node_modules/
package.json
.eslintrc.js     // note where it is
...
back/
node_modules/
package.json
...

由于front/是基于用vue-cli创建的应用程序，并且我喜欢将前端node_modules与后端分开，因此front/的结构是vue应用程序的标准。

通用型号(正面和背面)

我有正面和背面通用的 TS 模型，它存储在

model/
objects.ts
api.ts

要在前端部分使用api.ts，我有front/src/store/api.ts读作

// re-export from fullstack common model
export * from '../../../model/api'

这适用于model/api.ts(和model/objects.ts)中定义的接口，例如我可以使用

import { TestApiResponse } from '../api'
...
const testUser: TestApiResponse = response.data;

在front/src/store/modules/user.ts.

问题所在

我也试图介绍

export enum Endpoints {
TestApi = 'testApi',
}

要在前面和后面使用它，就像接口一样，整个最小的 api.ts 看起来像

import { UserBase } from './objects'
export enum Endpoints {
TestApi = 'testApi',
}
export interface TestApiResponse extends UserBase {}

这本身不会破坏任何东西。我也可以写

import { Endpoints, TestApiResponse } from '../api'

在user.ts中，项目仍然可以编译(npm run serve和npm run build都可以正常工作而没有错误)。

但是一旦我也替换(在user.ts)

const response = await axios.get(Vue.prototype.$apiRoot + 'testApi');

跟

const response = await axios.get(Vue.prototype.$apiRoot + Endpoints.TestApi);

开发服务器(npm run serve)和npm run build都开始显示

Failed to compile.
../model/api.ts Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found in <project root>model.
at CascadingConfigArrayFactory._finalizeConfigArray (<project root>frontnode_moduleseslintlibcli-enginecascading-config-array-factory.js:432:19)
at CascadingConfigArrayFactory.getConfigArrayForFile (<project root>frontnode_moduleseslintlibcli-enginecascading-config-array-factory.js:271:21)
at CLIEngine.isPathIgnored (<project root>frontnode_moduleseslintlibcli-enginecli-engine.js:951:18)
at CLIEngine.executeOnText (<project root>frontnode_moduleseslintlibcli-enginecli-engine.js:868:38)
at lint (<project root>frontnode_moduleseslint-loaderindex.js:278:17) at transform (<project root>frontnode_moduleseslint-loaderindex.js:252:18)
at <project root>frontnode_modulesloader-fs-cacheindex.js:127:18 at ReadFileContext.callback (<project root>frontnode_modulesloader-fs-cacheindex.js:31:14)
at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:273:13)

主要区别在于我使用的枚举值与以前的类型不同(添加let e: Endpoints;不会产生错误)。另一个最有可能导致问题的一点是：<project root>/model/api.ts在包含.eslintrc.js的<project root>/front/之外(使用enum的值，例如，front/src/router/index.ts不会产生错误)。任何想法为什么会这样和/或我该如何解决这个问题？

(我试图只.eslintrc.js复制到根文件夹或model/但这并没有解决问题)

PS 这是 vue CLI 生成的.eslintrc.js：

module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/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'
}
}

PPS 好吧，我试图.eslintrc.js移动到根文件夹，但在这种情况下npm run serve显示

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load config "@vue/typescript/recommended" to extend from.
Referenced from: <project root>.eslintrc.js
at configMissingError (<project root>frontnode_moduleseslintlibcli-engineconfig-array-factory.js:265:9)
at ConfigArrayFactory._loadExtendedShareableConfig (<project root>frontnode_moduleseslintlibcli-engineconfig-array-factory.js:826:23)
at ConfigArrayFactory._loadExtends (<project root>frontnode_moduleseslintlibcli-engineconfig-array-factory.js:731:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (<project root>frontnode_moduleseslintlibcli-engineconfig-array-factory.js:660:25)
at _normalizeObjectConfigDataBody.next (<anonymous>)
at ConfigArrayFactory._normalizeObjectConfigData (<project root>frontnode_moduleseslintlibcli-engineconfig-array-factory.js:596:20)
at _normalizeObjectConfigData.next (<anonymous>)
at createConfigArray (<project root>frontnode_moduleseslintlibcli-engineconfig-array-factory.js:340:25)
at ConfigArrayFactory.loadInDirectory (<project root>frontnode_moduleseslintlibcli-engineconfig-array-factory.js:433:16)
at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>frontnode_moduleseslintlibcli-enginecascading-config-array-factory.js:328:46)      
at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>frontnode_moduleseslintlibcli-enginecascading-config-array-factory.js:347:20)      
at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>frontnode_moduleseslintlibcli-enginecascading-config-array-factory.js:347:20)      
at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>frontnode_moduleseslintlibcli-enginecascading-config-array-factory.js:347:20)      
at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>frontnode_moduleseslintlibcli-enginecascading-config-array-factory.js:347:20)      
at CascadingConfigArrayFactory.getConfigArrayForFile (<project root>frontnode_moduleseslintlibcli-enginecascading-config-array-factory.js:272:18)       
at CLIEngine.isPathIgnored (<project root>frontnode_moduleseslintlibcli-enginecli-engine.js:951:18)

此外，如果我将.eslintrc.js复制(而不是移动)到根文件夹，我会看到相同的错误(重新启动npm run serve后)。我想，我必须在根包.json中安装一些东西，但我不确定到底是什么(front/node_modules/@vue/不包含typescript/recommended)。如果我从根目录中的.eslintrc中删除, '@vue/typescript/recommended'位，我会得到

<project root>modelapi.ts
4:8  error  Parsing error: Unexpected token enum

嗯.. 大概我必须配置 eslint 以从头开始使用 TS...我试图从这里开始遵循一些内容：

1. npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
2. 添加到 .eslintrcplugins: [ '@typescript-eslint' ],并extends那里'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended'

但又得到了Unexpected token enum。不知道如何解决这个问题。

也许在全栈项目中通过 vue cli 设置 eslint 不是一个好主意。

Answer 1

我遇到了类似的问题，也许您正在寻找的插件称为@vue/eslint-config-typescript- 至少安装它对我有帮助(尽管我不得不选择与其他依赖项兼容的版本)。

但这不仅仅是关于插件，而是关于ESLint遵循Сascading和层次结构原则的事实：

有两种

方法可以使用配置文件。

使用配置文件的第一种方法是通过.eslintrc.*和package.json文件。ESLint 会自动在 要 linted 的文件的目录，以及连续父级中的目录 目录一直到文件系统的根目录 (/) [...]

因此，您所要做的就是将.eslintrc.js从front文件夹移动到<project root>文件夹，如下所示：

<project root>
.eslintrc.js // works for all subdirectories, incl. "model/"
model/
front/
src/
node_modules/
package.json
back/
node_modules/
package.json