Prettier vscode extension ignoring config files

user_11232618 0
Viewed 10612

I can't get the prettier extension to use my config files. It keeps using the global settings (as defined in the config path setting in vscode). I made an example project:

https://github.com/Supperhero1/prettierTest

I set tabWidth to 1 in the .prettierrc file. When I run "npx prettier --write ." the prettier package properly formats the test.ts document to have an indentation of one, but if i save the file (I have format on save turned on) it gets formatted back to the global setting (4 spaces). I deleted all settings in the global setting but then it defaults to a tab with of two spaces. The extension seems to ignore the config file completely. A collegue has the extension and it works fine with config files.

I'm trying to figure out what could be overriding the setting, the exension description says the precedence for figuring out settings is:

Prettier configuration file
.editorconfig
Visual Studio Code Settings (Ignored if any other configuration is present)

And in the official docs, the config file resolution precedence is:

A "prettier" key in your package.json file.
A .prettierrc file written in JSON or YAML.
...

Seeing how I don't have a prettier key in my package.json file, there should be nothing that can override my .prettierrc file. I tried restarting vscode but that didn't help. Has anyone else had this issue, I'm not sure where to look to solve this problem...

prettier-vscode prettier visual-studio-code
6 Answers

In VS Code press Ctrl + shift + p to open command palette then chose

Preferences: Open Settings(JSON) and add the line among other settings you have:

  "prettier.configPath": ""

Save the file. Now the Prettier extension respect your local .prettierrc config files. Basically Prettier: Config Path Path to the prettier configuration file option overrides all other config files regardless of placement.

user_48147740

It seems that the VSCode prettier extension uses the config file in the VSCode settings over the local one, even if that config is an empty json file it then falls back to the default settings instead of the local ones (from .prettierrc). When I removed the path from Prettier: Config Path setting in VSCode it worked as expected.

I guess I expected the file in this path to be the fallback for when you don't have a local config file but, seeing how this file seems to overwrite every other setting, I guess the intended use is to set a User setting as default and then set a workspace setting for every workspace where you don't want to use the default. Or just leave the prop empty in the user settings.

user_112326180

I have encountered this problem it took me a lot of time to solve it. And finally, I found the solution to my problem similar to yours.

  1. In VS Code Press open Command Palette (Ctrl + Shift + P)
  2. Search and select this: Format Document With...
  3. After selecting this choose Prettier - Code formatter to make as default formatter
user_96773200

For me it seems that my VSCode was already set to use its own internal parser and because of that it was being used instead (for example when doing format on save

I needed this in my settings.json

"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}
user_10792670

I tried so many different ways that other people recommended; however, nothing worked for repository. The only way that worked with me was uninstalling prettier from VScode. My work repository currently has the following formatting rules in ".editorconfig", ".eslintrc.json", ".prettierrc.html.json", ".prettierrc.ts.json", ".prettierrc.scss.json" locally.

user_130342970

So, i got the same trouble with mistake: "Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used"

The solution is to disable this options in vscode prettier:

Prettier: Use Editor Config - mark it as disabled

enter image description here

user_157421500
Related