16

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

Supperhero
  • 911
  • 1
  • 7
  • 24
  • Make sure the formatter your VS Code uses is Prettier, not VS Code's built-in formatter. – thorn0 Mar 24 '21 at 17:38
  • It's prettier, I checked that. – Supperhero Mar 25 '21 at 13:31
  • How exactly did you check? What is the output of the Prettier extension? (Ctrl-J to open the panel if it's not open → Output → Prettier) – thorn0 Mar 25 '21 at 16:49
  • Ah, I wasn't aware this panel existed. I set prettier as default and I formatted by using the "format document with..." option in the right click context menu and it ignores the .prettierrc file. Anyway, after seeing the output in this panel, I figured it out so thanks for that. Explanation in the answer. – Supperhero Mar 26 '21 at 10:41

9 Answers9

20

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.

daGo
  • 2,584
  • 26
  • 24
  • 2
    Thank you! I was actually putting the path, but after setting the path to blank, as you have, then it worked! I guess empty probably means relative to the project root. Funky, but at least it works. – Shogo Yahagi Sep 10 '21 at 00:57
12

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
Tri Dawn
  • 540
  • 6
  • 11
  • 3
    legend, the only answer that worked for me. cheers to you – David Chiew May 03 '22 at 11:33
  • It works! My default formatter was ***typescript*** instead of ***prettier***. After searching for *Format Document With..*., I clicked on *Configure default formatter* and then I selected `prettier`. It modified my *.vscode/settings.json* file with a new rule for *javascript*: ``` "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } ``` – Valentin Nasraty Oct 26 '22 at 11:12
  • It worked! My default formatter was "Vue Language Features (Volar)". – Hazadus Aug 23 '23 at 07:07
8

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.

Supperhero
  • 911
  • 1
  • 7
  • 24
  • 2
    This worked for me.... but only _after_ restarting VSCode. – timray May 10 '22 at 14:00
  • I looked everywhere for the "Prettier: Config Path setting", there is none. Where did you find yours? – JohnF Feb 26 '23 at 10:36
  • @JohnF CTRL+, (or your MacOS equivalent) to open the settings, write "config path" in the search bar and i get it under extension -> code spell checker -> prettier – Supperhero Feb 26 '23 at 11:52
5

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"
}
Worthy7
  • 1,455
  • 15
  • 28
  • Thanks it worked! Configuring the default formatter with *Command Palette (Ctrl + Shift + P)* -> *Format Document With...* -> *Configure default formatter* -> *prettier*, will do the same changes to the `settings.json` automatically (you should have the file with the correct extension on focus) – Valentin Nasraty Oct 26 '22 at 11:20
5

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

a1723
  • 61
  • 1
  • 2
  • 6
3

Adding the editor.defaultFormatter on the VSCode settings has worked for me,

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "prettier.useEditorConfig": false,
  "prettier.useTabs": false,
  "prettier.configPath": ".prettierrc"
}
Vijin Paulraj
  • 4,469
  • 5
  • 39
  • 54
  • 1
    In my case, I had `useTabs: true`, but the tab size setting in VS Code somehow took precedence over the `tabWidth` setting for Prettier. I solved it by setting the same tab size for the VS Code workspace as set in the Prettier configuration. – Otto G Aug 31 '23 at 15:02
1

The only way that worked with me was uninstalling and then re-installing the Prettier - Code formatter in VS Code.

I tried many different ways that other people recommended, but nothing worked.

FYI, my repository currently has formatting rules in .editorconfig, .eslintrc.json, .prettierrc.html.json, .prettierrc.ts.json, .prettierrc.scss.json locally.

Reed Dunkle
  • 3,408
  • 1
  • 18
  • 29
Jade
  • 40
  • 7
1

My solution was what it's listed in extension manual.

"prettier.resolveGlobalModules": true

And after this, it respects the local config

mjz
  • 23
  • 5
0

I had to set prettier as the default formatter for a specific language. For some reason just setting it generically as the default with "editor.defaultFormatter": "esbenp.prettier-vscode" did not work. However,

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

did work.

Kaitrono
  • 155
  • 2
  • 13