prettier-vscode: Prettier does not consistently respect .prettierrc, .eslintrc nor vscode settings

.prettierrc.js is a valid config name in Prettier, but it does not work with the VSCode extension here.

.prettierrc.json works. prettierrc.js and prettierrc.config.js do not work.

I’ve been having this issue since a few days ago and disabling the chrome debugger plugin didn’t fix it for me. So frustrating as I want to stick with VSCode, but eslint/prettier integration seems to have broken

.prettierrc.js is a valid config name in Prettier, but it does not work with the VSCode extension here.

TL;DR For me it was operator ignorance, User Settings override Workspace Settings.

Deleting the following lines from my VS Code User Settings settings.json fixed the problem for me:

    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    }

Background:

In a different project, “Configure default Formatter...” and “Select a default formatter for JavaScript-files” and choose “TypeScript and JavaScript Language Features (default)”

This may be due to feature addition / tweak in VS Code March 2019 (version 1.33) / May 2019 (version 1.35) releases.

I have been fighting this problem in our Electron-Vue project with ESLint and Prettier.

One example is the space after the function name and before the parenthesis.

VS Code format on save. (Wrong, for us):

        function (response) {
          // ...stuff...
        },

Command line Prettier invocation. (Correct, for us):

        function(response) {
          // ...stuff...
        },

I’m experiencing something similar, although I’m not 100% sure it’s the same issue – after a few hours of development, sometimes prettier stops respecting rc’s – i.e. for one rule I have that fomats code as:

const {foo} = bar;

it suddenly starts formatting the whole file as:

const { foo } = bar;

This usually eventually goes away with some restarting. I’m trying to figure out what combinations of actions actually resolves the issue and will post once I know more. I am on the latest version of the plugin.

If package.json contains any setting, they override those defined in .prettierrc or any other prettier-specific file.

I finally got it working. I had to Open Folder instead of Open Workspace.

So does this basically boil down to the fact that the prettier extension doesn’t recognize .prettierrc.js when in fact it should?

That’s how I understand it. Maybe it should be a separate issue.

About the use-case: As explained here, unlike with babel or eslint, there is no support for an extends field and we must use a js module if we need to extend or reuse prettier configs.

While this works if you format via e.g. eslint --fix with proper configuration, it’s disappointing and annoying that VS Code does not format when you save a file having a .prettierrc.js or prettier.config.js.

EDIT: Hmm, just saw that it should be supported…? https://github.com/prettier/prettier-vscode/blob/master/src/configCacheHandler.ts#L8-L16

And now I’m really confused 😄 I moved my .prettierrc.js around a bit, but now it’s exactly at the same place as before and it works

(I had a .prettierrc.js inside a nested workspace package and it didn’t work, that’s the reason I went searching and found this issue. I moved it up into the root of the workspace, restarted VS Code, and it worked. I moved the config back into the package, restarted VS Code, still works…)

So does this basically boil down to the fact that the prettier extension doesn’t recognize .prettierrc.js when in fact it should?

Hi, if you are using windows, it’s because of lowercase harddrive name management… eslint will get your user directory as C:\Users\stardisblue (os.homedir()) and vscode will give you the directory as c:\Users\stardisblue causing eslint to crash 😕.

https://github.com/eslint/eslint/blob/db1a5828e4a121c19a86dd81a3eda15eb1a23c9a/lib/config.js#L222

Why does it crash because there is no .eslintrc in c:\Users\stardisblue and it will try to open it either way.

So a fallback will be used (https://github.com/prettier/prettier-eslint/blob/master/src/index.js#L240)

Do my answer make sense, do i need to open another issue ?