Navigating the thorny dilemma of catch-22 situations when dealing with parser

I'm struggling to incorporate

@typescript-eslint/no-floating-promises
into my ESLint guidelines.

This necessitates the use of parserOptions.

Below is my .eslintrc.js configuration:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2017,
    project: './tsconfig.json'
  },
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  rules: {
    '@typescript-eslint/no-floating-promises': ['error'],
    '@typescript-eslint/no-explicit-any': 'off'
  }
};

and this is my tsconfig.json content:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["ES2017"],
    "module": "commonjs",
    "declaration": true,
    "outDir": "lib",
    "removeComments": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["src/**/*.spec.ts"]
}

The issue arises with the exclude setting. I want to prevent my tests from being compiled to the output directory, but this leads to an error when running ESLint:

error Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: src/index.spec.ts. The file must be included in at least one of the projects provided

The script I use is "lint": "eslint \"src/**/*.ts\"".

I absolutely want to perform linting on my tests.

Everything was functioning properly until the introduction of parserOptions - which is essential for the no-floating-promises rule.

The typescript-eslint FAQ recommends:

To resolve this issue, ensure that the include option in your tsconfig encompasses all the files you want to lint.

The dilemma lies in the fact that I am constructing a library and prefer not to expose the test files during publication.

Is there a way to compile only the files intended for publishing to a single directory while still being able to lint every file? (Keeping the build process as simple as possible is preferred.)

Answer №1

In my workflow, I utilize two separate tsconfig.json files for each of my projects.

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["ES2017"],
    "module": "commonjs",
    "declaration": true,
  // more config options here...
  },
  "include": ["src/**/*"]
}

tsconfig.build.json

{
    "extends": "./tsconfig.json",
    "exclude": ["src/**/*.spec.ts"]
}

To compile the project, I execute tsc -p tsconfig.build.json.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for initializing Cytoscape using Typescript

I developed a React component using Typescript that utilizes cytoscape (along with its typings) as a headless model. My goal is to turn this into an NPM package so it can be easily imported into other projects. About my library: It functions correctly wh ...

Tips for altering Koa's HTTP status code for undeclared paths

If an undefined route is accessed on a Koa server, what is the best method to change the default HTTP status code and response body? Currently, Koa returns a 404 status and 'Not Found' text in the body. I intend to modify this to 501 (Not implem ...

What is the solution to the error message stating that the property 'pipe' is not found on the OperatorFunction type?

I implemented the code based on RxJS 6 documentation while working with angular 5, RxJS 6 and angularfire2 rc.10. However, I encountered the following error: [ts] property 'pipe' does not exist on type 'OperatorFunction<{}, [{}, user, str ...

Expanding a class in Angular 2

I am attempting to enhance a method within the Angular package available at this link. import { Component, OnInit, Injectable } from '@angular/core'; import { FILE_UPLOAD_DIRECTIVES, FileUploader } from 'ng2-file-upload'; @Injectable ...

Restricting enum type to only one member

enum Value { First, Second, } interface Data { value: Value number: number } interface SubData { value: Value.Second } function calculation(input: SubData){ return; } function initiate(){ const input : Data = { numbe ...

What is the best way to specify Next.js Context types in TypeScript?

Can someone help me with defining the types for next js Context and req? Below is the code for the getServerSideProps function- //Server side functions export const getServerSideProps: GetServerSideProps = async (context) => { await getMovies(conte ...

Ways to incorporate conditional checks prior to running class methods

Seeking input on handling async data retrieval elegantly. When initializing a class with asynchronous data, I have been following this approach: class SomeClass { // Disabling strictPropertyInitialization private someProperty: SomeType public asy ...

Is OnPush Change Detection failing to detect state changes?

Curious about the issue with the OnPush change detection strategy not functioning properly in this demonstration. My understanding is that OnPush change detection should activate when a property reference changes. To ensure this, a new array must be set e ...

Managing state on the login page functions properly, although there is a minor inconvenience of having to click the login button twice after entering the username and password

In Login.tsx, I store user/pass info in a useState called login and pass it up to App.tsx. I then store the access property from login useState to access useState inside App.tsx. While this does technically work, there is an issue where it seems to be one ...

Is it achievable to have a Dynamic Angular Output?

With multiple parent components needing a common child component that can dynamically and automatically adapt to each case, I am faced with the challenge of generating buttons using a forEach loop with data provided by the parent component (such as name, C ...

Will a JavaScript source map file continue to function properly even after the source code file has been minified?

My experience I specialize in utilizing TypeScript and Visual Studio to transform highly organized code into functional JavaScript. My skills involve configuring the project and Visual Studio to perform various tasks: Merging multiple compiled JavaScrip ...

Issue with Angular ngStyle toggle functionality not activating

I'm having an issue with toggling my navbar visibility on click of an image. It works the first time but not after that. Can anyone provide some assistance? Link to Code <img id="project-avatar" (click)="toggleNavbar()" width=20, height=20 style= ...

What distinguishes the installation of eslint as an extension from installing it as an npm package?

After researching multiple blogs and videos about the setup and configuration of eslint and prettier for vscode development, I've noticed a common gap in explanation. None of the resources adequately clarify why it's necessary to install eslint a ...

Determining Refresh Status in Angular Application

Does Angular provide a method to determine if the browser has been refreshed? I need to verify whether the page has been refreshed or not, as I want to run a function only when the value is false. In my ngOnInit function, I have the following code: pageIs ...

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Here is the code I have: async getBranchDetails() ----component method { let banks = this.bankDataService.getBanks(); let branchTypes = this.branchDataService.getBranchTypes(); forkJoin([banks,branchTypes]).subscribe(results => { ...

Determining the appropriate scenarios for using declare module and declare namespace

Recently, I came across a repository where I was exploring the structure of TypeScript projects. One interesting thing I found was their typings file: /** * react-native-extensions.d.ts * * Copyright (c) Microsoft Corporation. All rights reserved. * Li ...

Divide the code into individual components within Angular 2 projects

I currently have 3 Angular 2 projects developed in TypeScript. Each project contains the same models and services. I would like to find a way to integrate these common elements at a global level and connect them with each individual project. Any suggesti ...

Mapping an HTTP object to a model

Currently facing an issue with mapping an http object to a specific model of mine, here is the scenario I am dealing with: MyObjController.ts class MyObjController { constructor ( private myObj:myObjService, private $sco ...

Absence of "Go to Definition" option in the VSCode menu

I'm currently working on a Typescript/Javascript project in VSCODE. Previously, I could hover my mouse over a method to see its function definition and use `cmd + click` to go to the definition. However, for some unknown reason, the "Go to Definition" ...

Ways to ensure that your Angular component.ts file is executed only after the body has completely loaded without relying on any external

I am attempting to add an event listener to an element created with a unique identifier using uuid, but I keep getting an error that states "Cannot read properties of null (reading 'addEventListener')" export class CommentItemComponent implements ...