Square brackets in filenames are hard to work around

[staab]

On OSX:

$ npx prettier src/routes/blog/[slug].svelte
[error] No matching files. Patterns tried: src/routes/blog/[slug].svelte !**/node_modules/** !./node_modules/** !**/.{git,svn,hg}/** !./.{git,svn,hg}/**
$ npx prettier src/routes/blog/\[slug\].svelte
[error] No matching files. Patterns tried: src/routes/blog/[slug].svelte !**/node_modules/** !./node_modules/** !**/.{git,svn,hg}/** !./.{git,svn,hg}/**
$ npx prettier --write src/routes/blog/\\[slug\\].svelte
src/routes/blog/[slug].svelte 999ms

$ npx eslint src/routes/blog/\[slug\].svelte
No files matching 'src/routes/blog/[slug].svelte' were found.
$ npx eslint src/routes/blog/[slug].svelte
No files matching 'src/routes/blog/[slug].svelte' were found.
$ npx eslint src/routes/blog/\\[slug\\].svelte
No files matching 'src/routes/blog/\[slug\].svelte' were found.

I've come up with a solution for auto-formatting my project, but it's not pretty:

fd -t f . src | grep -v @sapper | sed 's/\[\([^]]*\)\]/\\\\[\1\\\\]/g' | xargs prettier --write

If you embed that in a package.json, you have to escape the slashes:

fd -t f . src | grep -v @sapper | sed 's/\\[\\([^]]*\\)\\]/\\\\\\\\[\\1\\\\\\\\]/g' | xargs prettier --write

This unfortunately doesn't work for eslint, and I'm not quite sure why.

---

I propose some other naming convention; bash is of course rife with special characters, but : seems to work well:

$ node :xyz.js
x
$ npx prettier --write :xyz.js
:xyz.js 92ms
$ npx eslint :xyz.js

/Users/me/my-project/:xyz.js
  1:13  error  Replace `'x',` with `"x"`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

This has the added bonus of being more idiomatic for route params anyway.

[Rich-Harris]

This sounds like a bug in Prettier and ESLint, honestly. Normally you can quote filenames in bash and it will respect any unusual characters.

Using : isn't ideal, since you can't have multiple parameters in a single segment...

routes/products/[id]-[slug].svelte
routes/profiles/@[username].svelte

...and isn't as nice for things like [...rest] routes. We've been talking to the Next and Nuxt teams about this stuff, and they've reached the same conclusions (Next is moving towards Sapper-style routing — see e.g. vercel/next.js#7607), so this seems like something that tools should support.

[staab]

Agreed, eslint does seem to have a bug, which I'm filing a report for (eslint/eslint#11940). The prettier situation can't really be improved, because those escapes are sort of necessary whatever tool you're working with.

I'm not sure what you mean about multiple colons being impossible:

$ npx prettier --write :id-:slug.svelte
:id-:slug.svelte 139ms

But I won't argue with you, especially if Next is taking the same approach 😄

[staab]

Oh, I see what you mean about colons — there's ambiguity as to whether the dash belongs to the parameter or between parameters, is that right? At any rate, nothing more to do here.

[mrkishi]

@staab Are you having issues with tools (editor plugins, etc) or is it just via the command line? Square brackets are special characters for globbing, but like Rich mentioned quoting the filenames should be enough.

$ npx prettier 'src/routes/blog/[slug].svelte'