Error with Prettier as File Watcher with TypeScript: "[error] No matching files. Patterns tried: index.ts !**/node_modules/** !./node_modules/** !**/.{git,svn,hg}/** !./.{git,svn,hg}/**"

I set up Prettier as a File Watcher

for my TypeScript project but when I save a file I get 

 

/Users/r/Documents/projects/yaa-interface/node_modules/.bin/prettier --write index.ts
[error] No matching files. Patterns tried: index.ts !**/node_modules/** !./node_modules/** !**/.{git,svn,hg}/** !./.{git,svn,hg}/**

Process finished with exit code 2

 

What painfully obvious error am I making?  I just used the defaults for Prettier, and assumed that would work OK.

19 comments
Comment actions Permalink

what is a result of running the same command (/Users/r/Documents/projects/yaa-interface/node_modules/.bin/prettier --write index.ts) in project root folder in terminal?

0
Comment actions Permalink

Running the above command produces



It seems to work?  But it still doesn't work from inside the IDE...

 

0
Comment actions Permalink

very strange..

please share screenshots of file watcher run console with the command and error and of your terminal after executing the command there

0
Comment actions Permalink

 

I think the issue is that the project is confused about the project directory.  In the file watcher command it's looking for 'keystone-blank', using `$ProjectFileDir$` -- 'keystone-blank' isn't at present the correct directory -- perhaps it was changed earlier. I have

 

How do I correct this so that it knows what the correct `$ProjectFileDir$` is?

Also, another issue was that I have added two extra directories to the project -- I have a backend, an interface and a front and it's helpful to be able to access all at once.  Can file watches -- in particular the Prettier file watcher -- work with something like that, or is it just going to get confused?  One error I was getting was that Prettier was trying to update files that were in a different directory from the one where the file I was editing was.

 

0
Comment actions Permalink

>In the file watcher command it's looking for 'keystone-blank', using `$ProjectFileDir$` -- 'keystone-blank' isn't at present the correct directory -- perhaps it was changed earlier.

hmm. Is your project folder an actual path, or a symlink?

>Can file watches -- in particular the Prettier file watcher -- work with something like that, or is it just going to get confused?  

not sure what confusion is expected here - the number of folders doesn't matter at all...

 

>One error I was getting was that Prettier was trying to update files that were in a different directory from the one where the file I was editing was.

 

can be a problem with macros resolving, similar to the previous one

0
Comment actions Permalink

What I meant was that I was adding multiple projects under the content root of one project and I thought this might be confusing WebStorm.  They were actual folders, not symlinks.  That is to say, I had one project, then when I went to open two other projects instead of opening them in new windows I added them to the current project.

All that having been said, I have now separated all three folders into three separate projects and I'm still getting the same errors, at least with one project.  I even deleted the `.idea` folder for that project and started 'fresh', but no difference

/Users/ranthony/Documents/projects/keystone-client/node_modules/.bin/prettier --write pages/posts/[id].tsx
[error] No matching files. Patterns tried: pages/posts/[id].tsx !**/node_modules/** !./node_modules/** !**/.{git,svn,hg}/** !./.{git,svn,hg}/**

Process finished with exit code 2

 

My .eslintrc is

{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"extends": [
"eslint:recommended",
"prettier",
"plugin:react/recommended",
],
"plugins": [
"prettier",
"react",
"react-hooks"
],
"env": {
"es6": true,
"node": true,
"mocha": true,
"browser": true
},
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/prop-types": 1,
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/no-unescaped-entities": "warn",
"react/no-find-dom-node": 0,
"comma-dangle": ["error", "never"],
"global-require": 0
}

my .prettierrc is

 

{
"useTabs": true,
"printWidth": 140,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "none"
}


my .eslintignore is

test
node_modules


and my .prettierignore is

test
node_modules

 

 

0
Comment actions Permalink

Could you share a project the issue can be reproduced with?

0
Comment actions Permalink

Unfortunately I can't share the project I'm working on.  I've been trying to create a sample project that matches the same behaviour and I think I might have detected at least one issue.

The file with which I was having the problem with the project running 'separate' from the others isi in the folder posts and has the name

[id].tsx

 

NextJS (which we're using in this project) uses the "[id]" as part of the file name to allow matching various files, thus "posts/[id].tsx" can match the routes posts/234, posts/456, etc.

Would prettier have an issue with this file name as it's set up to run by default in WebStorm file watchers?

0
Comment actions Permalink

It works for me

can you reproduce this in a new project if you create posts/[id].tsx file in it?

0
Comment actions Permalink

I created a new NextJS project and the same thing happens. It's a small project but I can't share it from my work github (it's not open to the public) -- is there anywhere I could upload a zip? (I can't seem to attach it to this comment)

 

0
Comment actions Permalink

you can try uploading the file to ftp://ftp.intellij.net/.uploads/ (anonymous login, .uploads directory has no permissions to list/download files, only for upload, so that other users will not be able to download your files) and let me know the filename

0
Comment actions Permalink

I uploaded to my personal GitHub -- https://github.com/robert-barcelona/jetbrains-test --

(I got the following error with Transmit when trying to connect to directory /.uploads -- or in fact to no directory at all)





0
Comment actions Permalink

Hmm... There are no [id].tsx files in your project. Neither you have prettier listed among its dependencies.

Prettier works fine for me using it (using the globally installed package, as the local one is missing)

 

0
Comment actions Permalink

That's so strange -- it's in my directory structure, /pages/posts/[id].tsx


and prettier is installed

0
Comment actions Permalink

But it's not there in your repo:

0
Comment actions Permalink

Please share the complete app, including .idea folder with watcherTasks.xml

0
Comment actions Permalink

My error, I'm sorry.  All the files are in the repo now.

 

0
Comment actions Permalink

thanks, reproduced::)

But it works in exactly same way in terminal if I run node_modules\.bin\prettier.cmd --write pages\posts\[id].tsx in the project root folder:

Appears to be a known issue, https://github.com/prettier/prettier/issues/6344, https://github.com/prettier/prettier/issues/6854

0
Comment actions Permalink

OK, thanks, good to know

The project I'm working on is actually 3 separate projects with 3 different servers.  I think in one of them it worked on the command line, but not in IDE, but I think that was the issue where WebStorm seemed a bit confused by having extra projects added to the project route, as explained above.  I'll see if I can reproduce that when I have time.  But I'm keeping each project in its own separate WS project, and apart from the issue with the brackets, Prettier seems to work fine as a file watcher. 

0

Please sign in to leave a comment.