typescript - Hur fixar jag "No ESLint configuration found" för filer utanför mappen med .eslintrc.js? (sker endast när jag försöker använda ett enum-värde)

Appens struktur

Jag skapar en fullstack-app (Node.js + TypeScript + Vue, andra delar är irrelevanta) och jag har följande mappstruktur:

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

Eftersom front/ baserades på appen skapad med vue-cli och jag gillar att ha node_modules för frontend separerade från de för backend, är strukturen för front/ standard för en Vue-app.

Den vanliga modellen (för fram och bak)

Jag har en TS-modell som är vanlig för fram och bak och den är lagrad i

model/
  objects.ts
  api.ts

För att använda api.ts i frontend-delen, har jag front/src/store/api.ts som bara läser som

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

Det fungerade bra med gränssnitt definierade i model/api.ts (och model/objects.ts), till exempel kan jag använda

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

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

Problemet

Jag har försökt att också introducera

export enum Endpoints {
  TestApi = 'testApi',
}

att använda det både fram och bak, som gränssnitten, ser hela minimala api.ts ut som

import { UserBase } from './objects'

export enum Endpoints {
  TestApi = 'testApi',
}

export interface TestApiResponse extends UserBase {}

Det i sig bryter inte något. Jag kan också skriva

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

i user.ts och projektet kompileras fortfarande (både npm run serve och npm run build fungerar utan fel).

Men en gång byter jag också ut (i user.ts)

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

med

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

både utvecklingsservern (npm run serve) och npm run build börjar visa

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>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:432:19)
at CascadingConfigArrayFactory.getConfigArrayForFile (<project root>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:271:21)
at CLIEngine.isPathIgnored (<project root>\front\node_modules\eslint\lib\cli-engine\cli-engine.js:951:18)
at CLIEngine.executeOnText (<project root>\front\node_modules\eslint\lib\cli-engine\cli-engine.js:868:38)
at lint (<project root>\front\node_modules\eslint-loader\index.js:278:17) at transform (<project root>\front\node_modules\eslint-loader\index.js:252:18)
at <project root>\front\node_modules\loader-fs-cache\index.js:127:18 at ReadFileContext.callback (<project root>\front\node_modules\loader-fs-cache\index.js:31:14)
at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:273:13)

Huvudskillnaden är att jag använder enum-värden till skillnad från bara typer tidigare (att lägga till let e: Endpoints; ger inte ett fel). Den andra biten som mest troligt bidrar till problemet: <projektrot>/model/api.ts ligger utanför <projektrot>/front/ som innehåller .eslintrc.js (att använda värden från en enum från exempelvis front/src/router/index.ts ger inga fel). Några idéer varför detta är så och/eller hur jag kan fixa det?

(Jag har försökt att bara kopiera .eslintrc.js till rotmappen eller till model/ men det har inte löst problemet)

PS här är .eslintrc.js genererad av Vue CLI:

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 Nåväl, jag har försökt flytta .eslintrc.js till rotmappen, men i det här fallet visar 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>\front\node_modules\eslint\lib\cli-engine\config-array-factory.js:265:9)
    at ConfigArrayFactory._loadExtendedShareableConfig (<project root>\front\node_modules\eslint\lib\cli-engine\config-array-factory.js:826:23)
    at ConfigArrayFactory._loadExtends (<project root>\front\node_modules\eslint\lib\cli-engine\config-array-factory.js:731:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (<project root>\front\node_modules\eslint\lib\cli-engine\config-array-factory.js:660:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (<project root>\front\node_modules\eslint\lib\cli-engine\config-array-factory.js:596:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at createConfigArray (<project root>\front\node_modules\eslint\lib\cli-engine\config-array-factory.js:340:25)
    at ConfigArrayFactory.loadInDirectory (<project root>\front\node_modules\eslint\lib\cli-engine\config-array-factory.js:433:16)
    at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:328:46)      
    at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:347:20)      
    at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:347:20)      
    at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:347:20)      
    at CascadingConfigArrayFactory._loadConfigInAncestors (<project root>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:347:20)      
    at CascadingConfigArrayFactory.getConfigArrayForFile (<project root>\front\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:272:18)       
    at CLIEngine.isPathIgnored (<project root>\front\node_modules\eslint\lib\cli-engine\cli-engine.js:951:18)

Dessutom, om jag kopierar (istället för att flytta) .eslintrc.js till rotmappen, ser jag samma fel (efter att ha startat om npm run serve). Jag antar att jag måste installera något i root package.json, men jag är inte säker på exakt vad (front/node_modules/@vue/ innehåller inte typescript/recommended). Om jag tar bort , ''@vue/typescript/recommended' delen från .eslintrc i roten, får jag

<project root>\model\api.ts
  4:8  error  Parsing error: Unexpected token enum

hmm.. förmodligen måste jag konfigurera eslint för att fungera med TS från början vid det här laget... jag har försökt följa några delar härifrån:

  1. npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
  2. lagt till i .eslintrc plugins: [ '@typescript-eslint' ], och till extends där 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended'

men fick Unexpected token enum igen. Vet inte hur jag ska lösa det.

Kanske är det inte en bra idé att ställa in eslint via vue cli i ett fullstack-projekt.

Svar #1

Jag hade ett liknande problem, kanske pluginet du letar efter heter @vue/eslint-config-typescript - åtminstone hjälpte det mig att installera det (även om jag var tvungen att välja en version som var kompatibel med andra beroenden).

Men det handlar inte bara om pluginet, det handlar om att ESLint följer principen om kaskad och hierarki:

Det finns två sätt att använda konfigurationsfiler.

Det första sättet att använda konfigurationsfiler är via .eslintrc.*- och package.json-filer. ESLint söker automatiskt efter dem i katalogen för filen som ska lintas, och i påföljande överordnade kataloger hela vägen upp till rotkatalogen för filsystemet (/) [...]

Så allt du behöver göra är att flytta din .eslintrc.js från front-mappen till <project root>-mappen, så här:

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

Relaterade artiklar