Filename starting with '$' causes ESLint / Prettier to fail

[lildesert]

What version of Remix are you using?

1.5.1

Steps to Reproduce

Create a new Remix project with npx create-remix@latest and choose the Blues stack.
Run npx eslint ./app/routes/notes/$noteId.tsx

You will get the following error:

Oops! Something went wrong! :(

ESLint: 8.16.0

No files matching the pattern "./app/routes/notes/.tsx" were found.
Please check for typing mistakes in the pattern.

Expected Behavior

No error is thrown and the file gets parsed by ESLint.

Actual Behavior

I'm using Remix inside an Nx monorepo. When I run the command nx format:check I get this error and the command fails (which also affects the CI).

It's happening because $noteId is considered a variable. I think this issue belongs here since it's a Remix convention to add $ in the filename.

The only workaround I found for now is to have a path like ./app/routes/notes/$noteId/index.tsx

[MichaelDeBoey]

I think this is more of an NX problem tbh, as I don't have any linting problems when using one of the default templates/stacks. 🤔

[lildesert]

Thanks for the quick answer!
I just reproduced it on a fresh install. It's not related to the template/stacks.
If you run npx eslint ./app/routes/notes/index.tsx for example, everything is good. I guess you won't see any errors if you don't run the command manually since the file with $ in its name is simply ignored.

[machour]

@lildesert that's shell substituion getting in your way. You need to escape the dollar sign when using command line:

npx eslint ./app/routes/notes/\$noteId.tsx

(in a shell, you declare a variable like this: foo=bar and reference it like this echo $foo)

[machour]

Closing this as invalid.

[lildesert]

Yeah I know the substitution is the root cause. But even by running npx eslint "./app/routes/notes/\$noteId.tsx" or npx eslint ./app/routes/notes/\$noteId.tsx it doesn't work.
Maybe the issue is more Nx related then, I'll ask how to deal with exotic filenames there.

[lildesert]

Quick update on this, we've found a workaround by using pretty-quick https://www.npmjs.com/package/pretty-quick
It runs in CI with github-actions and with husky as a pre-commit hook.
We previously used lint-staged but the issue is directly linked to it -> lint-staged/lint-staged#962
In dev we just use vscode format on save with prettier.