Invalid prettier configuration file detected in VS Code

Question

Booted up my VM running xubuntu in vmware workstation 17 pro. Started working on an exercise in the Odin project in VS Code, beforehand, updated and upgraded via sudo apt-get update and upgrade. Started working and noticed my prettier rules were not formatting on save.

The following error occurs:

["INFO" - 5:58:23 AM] Formatting completed in 6ms.
["INFO" - 5:58:30 AM] Formatting file:///home/t/repos/css-exercises/flex/03-flex-header-2/style.css
["ERROR" - 5:58:30 AM] Invalid prettier configuration file detected.
["ERROR" - 5:58:30 AM] No loader specified for extension ".prettierrc"
Error: No loader specified for extension ".prettierrc"
    at Explorer.getLoaderEntryForFile (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8194:17)
    at Explorer.loadFileContent (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8448:29)
    at Explorer.createCosmiconfigResult (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8453:40)
    at runLoad (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8464:37)
    at async cacheWrapper (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8294:22)
    at async Promise.all (index 0)
    at async t.ModuleResolver.getResolvedConfig (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:5693)
    at async t.default.format (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:13308)
    at async t.PrettierEditProvider.provideEdits (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:11417)
    at async B.provideDocumentFormattingEdits (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:94:45902)
["ERROR" - 5:58:30 AM] Invalid prettier configuration file detected. See log for details.

Looked in user settings and the formatter was incorrect and then I switched it to prettier code formatter. Still nothing would work. Uninstalled and reinstalled prettier with no change. Tried disabling and reenabling the extension. Tried turning on and off prettier: use editor config, prettier: resolve global modules, prettier: require config. No change.

Currently the file is located in /home/t/repos/ and I also tried copy and pasting into the project directory and adding into the workspace of vs code. Side note, in the /repos folder is also the node_modules directory. The eslintrc.prettierrc and prettier.eslintrc files are correctly named and they remain intact. What I did to try and work around this was to add a config path directly to the file in the repos directory via settings.JSON. Here is my current settings.JSON file:

{
  "workbench.colorTheme": "Default Dark+",
  "editor.guides.bracketPairs": true,
  "workbench.iconTheme": "vscode-icons",
  "editor.linkedEditing": true,
  "security.workspace.trust.untrustedFiles": "open",
  "prettier.configPath": "/home/t/repos/eslintrc.prettierrc",

  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "gitlens.hovers.currentLine.over": "line",
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "/opt/firefox/firefox",
  "editor.formatOnSave": true,
  "prettier.useEditorConfig": false
}

Where did I get these configs from originally? Directly from this guide: https://vicvijayakumar.com/blog/eslint-airbnb-style-guide-prettier#4-install-the-airbnb-style-config-for-eslint-and-all-dependencies

Side note: The prettier: prettier path to the prettier module is currently blank. Inserting a path to the file did not work as I believe this is node module related?

Does anyone have any recommendations on how to fix this situation, please? I have tried every solution I have ran across. Deeply appreciate any help I can get.

Answer 1

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 OS 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 (eg ".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...

1. ...delete all Prettier settings that you added to all settings.json files. 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.

---

2. 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.

---

3. 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)."

---

4. Add the following prettier configuration to the ".prettierrc" file you just created.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}

---

5. **Execute the following commands"

   1.  $ 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.

   2.  $ 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 "

---

6. Prettier Should work now. Use the main.js file 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.

---