It looks like, for whatever reason, there is no configuration file for prettier in the place it is looking for it, namely your root folder.
I would check if a ~\.prettierrc.js file exists, by typing cd ~\ && dir /ah and see if .pretterrc.js shows up. If not, create that file and copy this:
module.exports = {
trailingComma: "es5",
tabWidth: 4,
semi: false,
singleQuote: true,
};
which is just the default configuration found here: https://prettier.io/docs/en/configuration.html
Answer from Qrow Saki on Stack OverflowI am using vite for my project, and when i do ctrl + s, and look at the output of prettier in the console, it says
["ERROR" - 10:58:51 AM] Invalid prettier configuration file detected.
When I change my prettier.config.js to JSON format, it works fine, but I want it as .cjs so that I can use the following in my prettier file. I am trying to get the sorting for classes working (I am new to tailwind css)
module.exports = { plugins: [require('prettier-plugin-tailwindcss')], }
I am attaching my github repo as well, maybe this can help. thanks. https://github.com/ForkEyeee/memory-card
edit: i got prettier working by changing the prettier.config.cjs to
// prettier.config.cjs
module.exports = { trailingComma: "all", tabWidth: 2, semi: true, singleQuote: true, printWidth: 120, bracketSpacing: true, tailwindConfig: "./styles/tailwind.config.js", };and now prettier works, but the sorting of classes in tailwind still doesnt work, not sure why
Every time I try to format any of my projects with Prettier it comes back with the following error:
Error: ENOENT: no such file or directory, open '/Users/myname/code/test/.prettierrc' ["ERROR"] Invalid prettier configuration file detected. See log for details.
It worked perfectly fine before and it’s configured to format on save. Does anyone know what to do?
TO START:
Its helpful to know which "settings.json" your configuring. You need to make sure that both your workspace ".vscode/settings.json" file, and your user "settings.json" file (path is contingent on the O.S. your running) are configured to work harmoniously, and that one is not overriding the other with the same configuration twice.
SECONDLY
Remove all configurations you added to your "./settings.json" file for prettier. Those settings were added by the extension author. Despite the esbenp.prettier-vscode being the official prettier extension for VS Code, Prettier was never intended to be configured via VS Code's configuration files. Prettier is very nit-picky about its "./.prettierrc" configuration file. When we use the VS Code config ("settings.json") when attempt to use a prettier config that the extension generates somewhere. If you end up with settings in some project workspace vscode configurations (e.g. ".vscode/settings.json" files) the extension will try to regenerate a file each time one loads a prettier setting. It may even try to load multiple, depending on the scope of your settings.json file. Some how it has to handle that the user-scoped settings.json file should always be overriden by a workspace "settings.json" configuration file. That's not to mention that prettier configs often contain there own overridden rule sets within the ".prettierrc" configuration file.
- Note: Just FYI, the most problematic configuration your using is the
"prettier.configPath"setting.
_I'm going to stop going down the rabbit hole, hopefully you get the point I am making, which is: Don't use VS Code settings.json configuration files to configure "Prettier".
This will be more easy to explain with a bullet-list
The following will help you configure a clean environment, one where Prettier will work as you have configure it to work.
To start...
- ...delete all Prettier settings that you added to all
settings.jsonfiles. This includes any Prettier settings you added to project ".vscode/settings.json" files, and it especially includes all Prettier-settings that you added to your user "settings.json" file. After you finish, reload VS Code, by closing it out completely, and reopening it.
- Rather than delete all prettier configuration files from any projects you have open, I am going to instead ask that when you reopen VS Code, that you only open one instance of VS Code. If VS Code opens a project (aka project-folder) after restarting, you're going to want to close that project w/o opening another one. To do that you can...
- Use the keybinding ALT + K followed by the F key.
- Alternatively you can use the title-bar menu like so: FILE >> CLOSE FOLDER
Additionally, make sure all tabs are closed as well.
At this point your instance of VS Code should be totally empty, completely a blank canvas. From here you are going to want to create a new file. To do this...
You have one of two options
- (A) You can use the keybinding CTRL + ALT + SUPER + N
- (B) Another way to achieve the same thing is to use the title-bar menu like so: FILE >> NEW FILE
Once you've prompted VS Code to create a new file VS Code will want you to pick a location where it's to be created at. The location doesn't matter, so long as it is in a completely empty file, with nothing else in it. To name the file, VS Code will probably use the drop-down that is often refereed to as the quick input menu. The file needs to be a JavaScript file, as a consequence, the file must end with the file extension
".js". So I can reference the file later, I will call mine"main.js", but you can call your whatever you want, so long as you know which file I am referencing when you read"main.js".In the same folder as
"main.js", create one more new file without a file extension. This file MUST HAVE THE NAME....prettierrc
NOTE: "The file has a period (or dot) as the first character in its name (this makes it a hidden file)."
- Add the following prettier configuration to the ".prettierrc" file you just created.
Copy{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}
- **Execute the following commands"
-
Copy
$ npm init- The command will ask a bunch of questions, just press enter for each one to quickly configure the environment with the default npm/Node.js configuration.
- The purpose of this is simply to create a valid
"package.json"file.
-
Copy$ sudo npm i -g prettier && npm i -D prettier // Or you can execute it as two commands, like this: $ sudo npm i -g prettier $ npm i -D prettier- The command (or commands, depending on how you enter them) install prettier as a project dependency, and as a global Node.js package.
-
NOTE: "Make sure that you have prettier installed as a vscode extension. And make sure that you have only one prettier extension. Having multiple can create problems and confusion. The one you should have should have the Extension ID: esbenp.prettier-vscode "
- Prettier Should work now. Use the
main.jsfile we created early to write some javascript, then press F1 to open the quick input, type the word "format document", until you see the option"Format Document", which you want to click. Then choose prettier from the menu. Prettier won't format if you have erroneous code, it needs to be free from error. (if you want to fix errors use a linter like ESLint).
You can add a bunch of blank lines, or put braces on the wrong line, leave out semi colons, and prettier should format all of those mistakes.
After creating a new .prettierrc.json file in a NextJS project and attempting to configure Prettier via .vscode/settings.json (with the Prettier VSCode extension running), I also kept running into Prettier Output errors.
I updated my .vscode/settings.json file to {}, and like the above comment, Prettier now works as expected.
This is a solution that worked for me
1. Install Prettier Globally via npm if you have never installed it globally
npm i prettier -g
2. Search & Use the Prettier Path Extension Settings in your VS Code Settings

// You can navigate to VS Code Settings > Extensions > Prettier for all Prettier Extension Settings
3. Update the Prettier Path to your globally installed Prettier.
For Example
/usr/local/lib/node_modules/prettier (Mac OS)
\AppData\Roaming\npm\node_modules\prettier (Windows)
I had prettier installed as a VSCode Extension and this solution worked for me:
I had to remove the Prettier Path in the VSCode settings. For that click on the cog icon and press reset.