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

Is Angular File API Support Compatible with HTML5?

When checking for HTML5 File API browser support in my code: private hasHtml5FileApiSupport; constructor(@Optional() @Inject(DOCUMENT) document: Document) { const w = document.defaultView; this.hasHtml5FileApiSupport = w.File && w.FileReader & ...

javascriptangularhtmltypescripthtml5-filesystem

The issue of dynamic select not sending the POST data

Having an issue with a form where the selected country and city are not being posted correctly. Despite different names in the form and php mailer script, both selections are coming through as the country. Here's the form: <select style="width: 6 ...

javascriptphpforms

Looking for guidance on utilizing pushState and handling onpopstate events?

By using ajax, I am able to load specific page content without refreshing the entire page. In order to make the back button functionality work, I utilize pushState and onpopstate as shown below: function get_page(args){ .... $.ajax({ url ...

javascriptjqueryajax

Solving the problem of endless looping in JavaScript tree structures

i have been trying to create a tree structure in JavaScript. However, when I use the add_child function to add a child to an item in the elements array, it adds the child to all items in the elements array and their children, creating an infinite loop. I ...

javascripthtmlcss

Utilize Typescript Functions to Interact with GeoJSON Data in Palantir Foundry

Working on a map application within Palantir utilizing the workshop module. My goal is to have transport routes showcased along roads depending on user inputs. I am familiar with displaying a route using GeoJSON data, but I'm wondering if there is a w ...

typescriptgeospatialpalantir-foundry

Utilizing a material-ui button within a React application as the trigger for a Popup using MuiThemeProvider

I want to trigger a Popup in React using a button with a custom theme: <PopUp modal trigger={ <MuiThemeProvider theme={buttonTheme}> <Button variant="contained" color="secondary">Excluir& ...

javascriptreactjsmaterial-ui

Symfony: The Database Query Button with a Pop-up Feature

I am looking to create a button that will automatically search my database for all users with a "secouriste" attribute set and display their first name, last name, and phone number in a popup. After conducting research, here is what I have gathered: In m ...

javascriptphphtmlajaxsymfony

Axios fails to input data into the table

Having trouble with my axios request to insert.php. The variable note_text is coming back as null. I suspect it's because I'm not properly specifying the 2nd argument. My assumption was that there would be a variable like $ _POST['note_text ...

javascriptphpvue.jsaxiosbackend

Ways to retrieve an array following a function call

After a lot of testing and troubleshooting, I finally got my array to function properly in the console. However, when I click the button, the array is displayed on the console but not in my HTML. TS: jogar(){ for(var u=0;u<6;u++){ this.y ...

javascriptangularionic2

Receive information on browser activity

Is there a way to trigger an event when the following actions occur: Pressing the reload icon in the browser Pressing the Back or Forward icon in the browser Selecting the Reload menu item from the browser context menu Selecting the Reload option from t ...

javascriptjquery

Traverse through the nested JSON array using a loop

Exploring a JSON object: { "date_price": [ { "date": "Jan 2000", "price": 1394.46 }, { "date": "Feb 2000", "price": 1366.42 }, { "date": "Mar 2000", "price": 1498.58 }, { "date": "Apr ...

javascriptarraysjson

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

javascripthtmlcss

React - triggering a router link action before the link is assigned a value

In this scenario, the issue arises because the URL changes before the link receives a value. The state is being received directly through the component but by the time it happens, the component has already been clicked. This results in the value being as ...

javascriptreactjsrouter

Enhancing multiple documents in mongoDB with additional properties

I am working with a data structure that includes user information, decks, and cards. I want to update all the cards within the deck named "Planeten" by adding a new property. How can I achieve this using a mongoose query? { "_id": "5ebd08794bcc8d2fd893f ...

javascriptmongodbexpressmongoose

What is the process for storing form data into a text file?

Despite seeing similar questions in the past, I am determined to get to the bottom of why this code isn't functioning as expected. My goal is to input form data into a .txt file using a post request. While I lack extensive knowledge of PHP, I am pieci ...

javascriptphphtmlforms

How can we direct the user to another tab in Angular Mat Tab using a child component?

Within my Angular page, I have implemented 4 tabs using mat-tab. Each tab contains a child component that encapsulates smaller components to cater to the specific functionality of that tab. Now, I am faced with the challenge of navigating the user from a ...

angulartypescript

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...

javascripthtmljquerycss

Using JavaScript to toggle the visibility of grids depending on the radio button choice and then triggering this action by clicking on the search button

As a newcomer to AngularJS development, I am encountering some challenges while attempting to implement the following scenario. Any suggestions or guidance would be greatly appreciated. I aim to showcase either one or two Angular UI grids based on the rad ...

javascripthtmlangularjsangular-ui-grid

Guide to encapsulating an asynchronous function in a promise

I am in need of wrapping an asynchronous function within a promise to ensure synchronous execution. The reason behind this is that I must obtain a result from the asynchronous function before proceeding with the program's execution. Below is the rele ...

javascripttypescriptpromisepixi.js

CSS table property remains unchanged following an ajax request

At first, my table is set to display none, making it invisible in the application. I am using an ajax call so that when a user selects an option, a table is generated and the display property changes from none to block, making it visible. However, the tabl ...

javascriptphpajax