The guidelines specified in the root `.eslintrc.json` file of an NX workspace do not carry over to the project-level `.eslintrc.json` file

In my main .eslintrc.json file, I have set up some rules. This file contains:

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx", "react", "@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "google",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    // Rules go here
  },
  "overrides": [
    // Overrides settings
  ]
}

One of my projects has a local .eslintrc.json file that should inherit rules from the root one. However, for some reason, the rules are not being applied. The content of this file is as follows:

{
  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "rules": {
    // Rules should be inherited
  }
}

This issue is causing me to manually duplicate the rules from the main file to the project-specific file which is far from ideal. If anyone can help identify what I might be doing wrong, I would greatly appreciate it.

typescripteslintnrwl-nx

Answer №1

Encountering a similar issue led me to discover some relevant posts:

In my scenario, I aim to set no-unreachable as an error level for all applications and libraries in my NX workspace. Running NX version 13, I encountered unreachable code within a file in the myapp (a NestJS app).

Here is what I found through various scenarios:

Situation 1: Using default eslint config

No warning or failure observed when using the default configuration.

Situation 2: Adding rule to root eslint rules

Addition of rules.no-unreachable to the root .eslintrc.json did not result in the expected failure.

Situation 3: Including rule in root eslint overrides

Including rules.overrides in the root .eslintrc.json generated the anticipated failure for unreachable code.

Situation 4: Integrating rule into myapp's eslint rules

Adding rules.no-unreachable directly to myapp's .eslintrc.json triggered the desired failure for unreachable code.

Situation 5: Incorporating rule into myapp's eslint overrides

Adding rules.overrides in myapp's .eslintrc.json resulted in the expected failure related to unreachable code.

Recommendations

Considering the options explored above, it is suggested to either place the rules in the "overrides" section of the root .eslintrc.json or in the "rules" section of the specific app's (or lib's) .eslintrc.json for more targeted control over the application of rules. The usage of "extends" should align with the selected approach. For further understanding of overrides, refer to ESLint documentation here.

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

Is the variable empty outside of the subscribe block after it's been assigned?

Why is a variable assigned inside subscribe empty outside subscribe? I understand that subscribe is asynchronous, but I'm not sure how to use await to render this variable. Can someone please help me and provide an explanation? I am attempting to retr ...

javascriptnode.jsangulartypescriptsubscribe

Resolving the Error: "Type 'Customer | undefined' is not compatible with type 'Customer'" in Angular

I encountered an issue with the following code: ... export class ListCustomersComponent implements OnInit { customers: Array<Customer> = []; showCustomer?: Customer; isSelected: boolean = false; deletedCustomer?: Customer; returnedMessa ...

angulartypescript

Dynamic routing with ngIf in Angular 2's router system

Is there a way to use *ngIf with dynamic router in Angular? Let's say I have a top navigation component with a back button, and I only want the back button to be visible on the route 'item/:id'. I tried using *ngIf="router.url == '/ite ...

javascriptangulartypescriptangular-routing

Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

In my TypeScript file for class A, I am encountering an issue with the Kendo TreeList code. I am trying to call a function from the Kendo template. export class A{ drillDownDataSource: any; constructor() { this.GetStatutoryIncomeGrid ...

javascriptjquery.nettypescriptkendo-ui

Create a data structure with a single key interface that contains a key value pair

Imagine having an interface with just one key and value : interface X { Y : string } It would be great to define a key-value type like this: interface Z { "key" : Y, "value" : string } However, manually doing this can be tedious. What if we ...

typescript

A new concept within the realm of programming is the Export class statement that utilizes

Is it possible to define both a class and an interface in the same file and export the class directly without any issues? I have encountered problems when using export default Foo, as it exports as { default: Foo } instead of the actual class object. I am ...

classinterfacetypescript

Awaiting the completion of Promises within a for-loop (Typescript)

I'm struggling with a for-loop and promises in my angular2 project. I have multiple methods that return promises, and after these promises are resolved, I want to populate an array in the class using Promise.all(variable).then(function(result){....... ...

javascriptangulartypescript

Creating a multipart/form-data POST request in Angular2 and performing validation on the input type File

I am working on sending an image (base64) via a POST request and waiting for the response. The POST request should have a Content-Type of multipart/form-data, and the image itself should be of type image/jpg. This is what the POST request should look like ...

javascriptangulartypescriptpostangular2-forms

Exploring the Power of TypeScript with NPM Packages: A Comprehensive Guide

I am working with a "compiler" package that generates typescript classes. However, when I attempted to run it using npm, an unexpected error occurred: SyntaxError: Unexpected token export To avoid the need for compiling local files, I do not want to con ...

typescriptnpm

Managing asset paths post ng build: A guide

I've been attempting to use assets to display svg icons on my ESRI map. I'm working with Angular9 and the esri js api, trying to add a symbol from a URL. Locally, the svg appears on the map, but once I build and deploy the project to IIS, it sta ...

angulartypescriptangular-cliarcgis-js-api

What is the TypeScript declaration for the built-in 'net' NodeJS types?

I'm currently working on developing a TCP client application and it seems like the 'net' package in NodeJs will be perfect for what I need. However, I've run into an issue finding the TypeScript definitions for this package. If you hav ...

node.jstypescriptpackage

Challenge encountered with asynchronous angular queries

Dealing with asynchronous calls in Angular can be tricky. One common issue is getting an array as undefined due to the asynchronous nature of the calls. How can this be solved? private fetchData(id){ var array = []; this.httpClient.get('someUrl ...

javascriptangulartypescriptrxjs5

Error in JSON format detected by Cloudinary in the live environment

For my upcoming project in Next.js, I have integrated a Cloudinary function to handle file uploads. Here is the code snippet: import { v2 as cloudinary, UploadApiResponse } from 'cloudinary' import dotenv from 'dotenv' dotenv.config() ...

node.jstypescriptnext.jscloudinarydev-to-production

TypeScript compilation will still be successful even in the absence of a referenced file specified using require

Having both Project 1 and Project 2 in my workspace, I encountered an unusual issue after copying a file, specifically validators/index.ts, from Project 1 to Project 2. Surprisingly, TypeScript compilation went through successfully without showing any erro ...

typescriptwebstorm

Is it more efficient to define a variable or call a method from an object?

Which approach is more effective and why? Option 1: Declaring a variable exampleFunction(requestData: Object) { const username = requestData.username; doSomething(username); } Option 2: Accessing the object property directly exampleFunction(reques ...

angulartypescript

Why is webpack attempting to package up my testing files?

In my project, I have two main directories: "src" and "specs". The webpack configuration entrypoint is set to a file within the src directory. Additionally, the context of the webpack config is also set to the src directory. There is a postinstall hook in ...

javascriptnode.jstypescriptnpmwebpack

Tips for retrieving modified data from a smart table in Angular 4

Currently, I am working on an angular project where I am utilizing smart table. Here is a snippet of my .html file: <ng2-smart-table [settings]="settings" [source]="source" (editConfirm)="onSaveConfirm($event)" (deleteConfirm)="onDeleteConfirm($event ...

javascriptangulartypescriptng2-smart-table

The initial Get request does not receive data upon first attempt

In the process of developing an Angular project, I am faced with the task of retrieving data from my backend by making requests to an API. However, before the backend can fetch the required data, certain parameters must be sent through a post request. Once ...

angulartypescriptangular-httpclientangular14

Issues with Router navigation in an Ionic-Angular application

I am currently working on a straightforward application using Angular 9 and Ionic 5. The main page consists of a list of items. Here is my HTML code: <ion-header> <ion-toolbar> <ion-title>recipes</ion-title> </ion-toolba ...

angulartypescriptionic-frameworkangular-router

Angular2 authguards encountering issues when trying to run asynchronous functions

I need a way to safeguard my routes by verifying if a user is logged in from the server, but I'm facing issues with asynchronous functions not executing properly. Below is the code snippet that's causing trouble: canActivate (route: ActivatedRo ...

angulartypescript