lint-staged executes various commands based on the specific folder

Within my project folder, I have organized the structure with two subfolders: frontend and backend to contain their respective codebases.

Here is how the root folder is set up:

- backend
    - package.json
    - other backend code files
- frontend
    - package.json
    - other frontend code files
- package.json

The root's package.json includes the following:

  "scripts": {
    "frontend:lint": "cd ./frontend && npm run lint &&& cd ..",
    "backend:lint": "cd ./backend && npm run lint & cd .."
  },
  "devDependencies": {
    "husky": "4.3.8",
    "lint-staged": "10.5.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "frontend/**/*.{ts, tsx, json, html}": [
      "npm run frontend:lint"
    ],
    "backend/**/*.{ts,json}": [
      "npm run backend:lint"
    ]
  }

However, when I try to do git add followed by git commit at the root level, it keeps showing an error message: 

No staged files match any configured task.

I have checked both of the sub-package.json files and they seem to be working correctly. I am uncertain about how to properly configure lint-staged to filter the files.

javascripttypescriptlint-staged

Answer №1

Here is a brief explanation on how to target specific files: https://www.npmjs.com/package/lint-staged#user-content-filtering-files

While this may not apply to your situation if your configuration includes multiple file types, it's worth noting that there is an open ticket regarding "Lint-staged tasks do not run if a single filetype is specified with curly braces e.g. *.{js}" on the lint-staged repository where a collaborator mentions:

We use micromatch for the globs, and this seems to be an issue in the library.

There might be a broader problem at play here. I encountered the message "

No staged files match any configured task.
" and resolved it by adding the jsx extension to the configuration.

Initially, my configuration looked like this:

  "lint-staged": {
    "**/*.{js}": [
      "eslint --fix"
    ]
  }

After making the following adjustment, everything worked smoothly:

  "lint-staged": {
    "**/*.{js,jsx}": [
      "eslint --fix"
    ]
  }

Answer №2

I have successfully implemented this solution by utilizing a multi-package monorepo

📂root
┣ 📂backend
┃ ┣ .lintstagedrc.json
┗ 📂frontend
┃ ┣ .lintstagedrc.json
┃

To set it up, start by installing dependencies specified in the root/package.json file and then remove the lint-staged configuration field:

"husky": "8.0.3",
"lint-staged": "13.2.3"

Next, make modifications to the .husky/pre-commit file (Remember to reinstall the package after each change):

#!/usr/bin/env sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

In the backend/.lintstagedrc.json file:

{ "src/**/*.{ts,js}": ["eslint --fix", "prettier --write"] }

And for the frontend/.lintstagedrc.json file:

{
  "src/**/*.{ts,tsx,js,jsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

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

My code gets disrupted when I switch between ids and classes

I'm currently learning about javascript and jquery, attempting to implement various scripts. I successfully executed the following script: jQuery(document).ready(function($) { var scroll_start = 0; var startchange = $('#homepage-header' ...

javascriptjquerycss

Tips for simulating behavior in express using Typescript and the Mocha library

Help with mocking 'Request' in Mocha using express with Typescript needed! Here is the current approach: describe("Authorization middleware", () => { it("Fails when no authorization header", () => { const req = { ...

node.jstypescriptexpressmocha.jschai

NodeJS guide: Enabling cross-domain access for web services

Currently, I am developing a nodejs server and facing the challenge of needing to access additional services through ajax from a different domain. Can anyone provide guidance on how to bypass the cross-domain restriction within nodejs code? Please note th ...

javascriptnode.jssecurityweb

Instructions on adjusting the image size within a MUI Card

import { Card, CardActionArea, CardContent, CardMedia, Typography, } from "@mui/material"; import React from "react"; import { styled } from "@mui/material/styles"; const CardImage = styled("div")(({ theme ...

javascriptreactjsmaterial-uiresponsivecard

Running AngularJS controllers should only occur once the initialization process has been fully completed

I am facing a situation where I need to load some essential global data before any controller is triggered in my AngularJS application. This essentially means resolving dependencies on a global level within AngularJS. As an example, let's consider a ...

javascriptangularjsinitialization

Using Vue along with bootstrap-vue: Ensuring only one list element is expanded in a list (v-for) at any given time

In my Vue project with bootstrap-vue, I am utilizing the b-collapse feature within a v-for loop for lists. While it is functioning correctly, I am struggling to automatically close expanded list elements when a new one is clicked. Here is my question: Ho ...

javascriptvue.jsvuejs2bootstrap-vue

Connecting Ionic 3 with Android native code: A step-by-step guide

I just finished going through the tutorial on helpstack.io and was able to successfully set up the HelpStackExample with android native based on the instructions provided in the GitHub repository. The only issue is that my company project uses Ionic 3. H ...

androidangulartypescriptcordova-pluginsionic3

Tips for managing and modifying information with a dropdownlist in asp.net core mvc and angular js

In my asp.net core MVC project, I am incorporating AngularJs to manage two dropdown lists and a textbox. While the textbox functionality for saving and editing data works well, I am facing issues with resetting the dropdown lists after posting data and not ...

javascriptc#angularjsasp.net-coreasp.net-core-mvc

Top-notch approach for consolidating Typescript Declaration files into a single comprehensive file

Is there any efficient way to package declaration files together without using the module declaration approach? declare module "path/to/file" { ... } declare module "path/to/file/sub/file" { ... } and so on. I have encountere ...

typescript

Exploring Nested Data in MongoDB Aggregation using $match and $project

Struggling with crafting a Mongoose Aggregate Query to extract the permissions object of a specific member within a deeply nested structure of business data. MongoDB's documentation on this topic is lacking, making it hard for me to progress. Sample ...

javascriptmongodbexpressmongooseaggregation-framework

Is there a way to programmatically add a timestamp to a form in Angular6?

Is there a way to automatically populate new forms with the current datetime value? this.editForm.patchValue({ id: chatRoom.id, creationDate: chatRoom.creationDate != null ? chatRoom.creationDate.format(DATE_TIME_FORMAT) : null, roo ...

angulartypescript

"Troubleshooting: Why are errors not appearing in ts-node

Whenever I encounter an error in my code while compiling with ts-node, the error does not seem to appear in the console. For instance:let data = await fs.readFileSync(path); In the following code snippet, I am using "fs" to read a file by passing a path ...

javascriptnode.jstypescriptexpressts-node

Incorrect line numbers displayed in component stack trace [TypeScript + React]

Challenge I am currently working on integrating an error boundary into my client-side React application. During development, I aim to showcase the error along with a stack trace within the browser window, similar to the error overlays found in create-reac ...

reactjstypescriptwebpackts-loader

The V-model is failing to bind properly as anticipated

One feature of my application involves a table that displays a list of products. Each product row in the table has an input field where users can enter the quantity they want to purchase. The total cost for each product is dynamically calculated by multipl ...

javascriptvue.js

Is it possible for Penthouse to retrieve critical CSS while using javascript?

I am currently utilizing the laravel-mix-criticalcss npm package to extract the critical CSS of my website. This package leverages Penthouse under the hood, and you can configure Penthouse settings in your webpack.mix.js within the critical options. The ...

javascriptcssnpmlaravel-mixcritical-css

Sending values from multiple radio groups in JavaScript can be done by accessing each group individually and extracting

This is an add to cart system. Currently, I am able to send quantity with an ID. However, I also want to send radio group values. How can I achieve this? Here are my codes: product.php <script> jQuery(function ($) { $('.popbutton').on(&a ...

javascriptphpjqueryajax

Retrieve the text input from its respective radio button

There are two radio buttons, each accompanied by an input text field. When a user selects a radio button, they can also enter some corresponding text. My inquiry is: What is the best method to retrieve the entered text for the selected radio button? ...

javascriptjqueryhtml

Struggling to save a signature created with an HTML5 Canvas to the database

I've been on the hunt for a reliable signature capture script that can save signatures to MySQL, and I finally found one that fits the bill. However, there are two issues that need addressing: The canvas doesn't clear the signature when the c ...

javascriptmysqlajax

Implementing the loading of a Struts 2 action with jquery in javascript

Looking to refresh a specific div using JavaScript with jQuery to target the div and a Struts action that loads the content. Can anyone offer advice on how to achieve this? The challenge lies in utilizing JavaScript and jQuery for this task. Best regards ...

javascriptjquerystruts2

Using $gte and $lt to search within a range in mongoDB can be tricky when dealing with data types in typescript

Whenever I try to search by range of dates using $gte and $lt, I encounter issues with types. The types for my model are as follows: export interface IOneStoreCa { magId: number, caTtc?: number, marge?: number, } export interface ICa { _id: string ...

node.jstypescriptmongodbmongoose