Changes to prettier.config.js don't take effect until restarting vscode when using prettier v3

[russelldavis]

trafficstars

Summary

Under certain conditions, changes to prettier config don't take effect until restarting vscode. The bug only happens when both of these are true:

1. Using a js config file (e.g. prettier.config.js or prettier.config.cjs). No bug when using a json config file.
2. Using prettier 3.x. No bug when using prettier 2.8.8.

Github Repository to Reproduce Issue

https://github.com/russelldavis/repro-vscode-prettier-stale-config

Steps To Reproduce:

1. Open the project in vscode
2. Modify prettier.config.cjs (e.g., change tabWidth to 8) and save the file.
3. Run Format Document on any file.

Expected result

The document should be formatted using the updated config.

Actual result

The document is formatted using the old config. To make the new config take effect, you have to reload the window or restart vscode.

Additional information

VS Code Version: Version: 1.83.1 Commit: f1b07bd25dfad64b0167beb15359ae573aecd2cc Date: 2023-10-10T23:57:32.750Z Electron: 25.8.4 ElectronBuildId: 24154031 Chromium: 114.0.5735.289 Node.js: 18.15.0 V8: 11.4.183.29-electron.0 OS: Darwin arm64 22.6.0

Prettier Extension Version: v10.1.0

OS and version: macOS 13.5.2

Prettier Log Output

["INFO" - 2:43:18 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 2:43:18 PM] Extension Version: 10.1.0.
["DEBUG" - 2:43:18 PM] Enabling Prettier globally
{
  "languageSelector": [
    {
      "language": "javascript"
    },
    {
      "language": "mongo"
    },
    {
      "language": "javascriptreact"
    },
    {
      "language": "typescript"
    },
    {
      "language": "typescriptreact"
    },
    {
      "language": "json"
    },
    {
      "language": "jsonc"
    },
    {
      "language": "json5"
    },
    {
      "language": "css"
    },
    {
      "language": "postcss"
    },
    {
      "language": "less"
    },
    {
      "language": "scss"
    },
    {
      "language": "handlebars"
    },
    {
      "language": "graphql"
    },
    {
      "language": "markdown"
    },
    {
      "language": "mdx"
    },
    {
      "language": "html"
    },
    {
      "language": "vue"
    },
    {
      "language": "yaml"
    },
    {
      "language": "ansible"
    },
    {
      "language": "home-assistant"
    },
    {
      "language": "jsonc",
      "scheme": "vscode-userdata"
    }
  ],
  "rangeLanguageSelector": [
    {
      "language": "javascript"
    },
    {
      "language": "javascriptreact"
    },
    {
      "language": "typescript"
    },
    {
      "language": "typescriptreact"
    },
    {
      "language": "json"
    },
    {
      "language": "jsonc"
    },
    {
      "language": "graphql"
    }
  ]
}
["DEBUG" - 2:43:18 PM] Local prettier module path: '/Users/russell/dev/js/repro-vscode-prettier-stale-config/node_modules/prettier/index.cjs'
["DEBUG" - 2:43:18 PM] Using prettier version 3.0.3
["INFO" - 2:43:18 PM] Using config file at '/Users/russell/dev/js/repro-vscode-prettier-stale-config/prettier.config.cjs'
["DEBUG" - 2:43:18 PM] Enabling Prettier for Workspace /Users/russell/dev/js/repro-vscode-prettier-stale-config
{
  "languageSelector": [
    {
      "pattern": "/Users/russell/dev/js/repro-vscode-prettier-stale-config/**/*.{js,_js,bones,cjs,es,es6,frag,gs,jake,javascript,jsb,jscad,jsfl,jslib,jsm,jspre,jss,mjs,njs,pac,sjs,ssjs,xsjs,xsjslib,wxs,js.flow,jsx,ts,cts,mts,tsx,importmap,json,4DForm,4DProject,avsc,geojson,gltf,har,ice,JSON-tmLanguage,mcmeta,tfstate,tfstate.backup,topojson,webapp,webmanifest,yy,yyp,jsonc,code-snippets,sublime-build,sublime-commands,sublime-completions,sublime-keymap,sublime-macro,sublime-menu,sublime-mousemap,sublime-project,sublime-settings,sublime-theme,sublime-workspace,sublime_metrics,sublime_session,json5,css,wxss,pcss,postcss,less,scss,handlebars,hbs,graphql,gql,graphqls,md,livemd,markdown,mdown,mdwn,mkd,mkdn,mkdown,ronn,scd,workbook,mdx,component.html,html,hta,htm,html.hl,inc,xht,xhtml,mjml,vue,yml,mir,reek,rviz,sublime-syntax,syntax,yaml,yaml-tmlanguage,yaml.sed,yml.mysql}",
      "scheme": "file"
    },
    {
      "language": "javascript"
    },
    {
      "language": "mongo"
    },
    {
      "language": "javascriptreact"
    },
    {
      "language": "typescript"
    },
    {
      "language": "typescriptreact"
    },
    {
      "language": "json"
    },
    {
      "language": "jsonc"
    },
    {
      "language": "json5"
    },
    {
      "language": "css"
    },
    {
      "language": "postcss"
    },
    {
      "language": "less"
    },
    {
      "language": "scss"
    },
    {
      "language": "handlebars"
    },
    {
      "language": "graphql"
    },
    {
      "language": "markdown"
    },
    {
      "language": "mdx"
    },
    {
      "language": "html"
    },
    {
      "language": "vue"
    },
    {
      "language": "yaml"
    },
    {
      "language": "ansible"
    },
    {
      "language": "home-assistant"
    },
    {
      "language": "jsonc",
      "scheme": "vscode-userdata"
    }
  ],
  "rangeLanguageSelector": [
    {
      "language": "javascript"
    },
    {
      "language": "javascriptreact"
    },
    {
      "language": "typescript"
    },
    {
      "language": "typescriptreact"
    },
    {
      "language": "json"
    },
    {
      "language": "jsonc"
    },
    {
      "language": "graphql"
    }
  ]
}
["INFO" - 2:43:39 PM] Formatting file:///Users/russell/dev/js/repro-vscode-prettier-stale-config/prettier.config.cjs
["DEBUG" - 2:43:39 PM] Local prettier module path: '/Users/russell/dev/js/repro-vscode-prettier-stale-config/node_modules/prettier/index.cjs'
["DEBUG" - 2:43:39 PM] Using prettier version 3.0.3
["INFO" - 2:43:39 PM] Using config file at '/Users/russell/dev/js/repro-vscode-prettier-stale-config/prettier.config.cjs'
["DEBUG" - 2:43:39 PM] Local prettier module path: '/Users/russell/dev/js/repro-vscode-prettier-stale-config/node_modules/prettier/index.cjs'
["INFO" - 2:43:39 PM] PrettierInstance:
{
  "modulePath": "/Users/russell/dev/js/repro-vscode-prettier-stale-config/node_modules/prettier/index.cjs",
  "importResolver": {},
  "callMethodResolvers": {},
  "currentCallMethodId": 2,
  "version": "3.0.3"
}
["INFO" - 2:43:39 PM] Using ignore file (if present) at /Users/russell/dev/js/repro-vscode-prettier-stale-config/.prettierignore
["INFO" - 2:43:39 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 2:43:39 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 2:43:39 PM] Prettier Options:
{
  "filepath": "/Users/russell/dev/js/repro-vscode-prettier-stale-config/prettier.config.cjs",
  "parser": "babel",
  "tabWidth": 2
}
["INFO" - 2:43:39 PM] Formatting completed in 43ms.

[yCodeTech]

I'm finding that even a .prettierrc.json isn't using the updated file.

[russelldavis]

@yCodeTech you may be seeing a separate but related issue: when using a json config file, you need to switch tabs before the change will take effect. If you edit the config file and immediately try to format the same file, it won't use the updated config, but as soon as you change to another tab (and optionally back to the config file), it should work. (But with a js config file, switching tabs doesn't fix it.)

[yCodeTech]

@russelldavis While that is working now, it definitely wasn't working before. Also, you kinda have to switch tabs anyway if you're not using the side by side layout... edit the prettier json file and then switch to the file you want to format. Perhaps there's an inconsistent bug where sometimes changing tabs updates the prettier to use the new changes, and sometimes it doesn't?

[oviniciusfeitosa]

Thanks @russelldavis . Same problem here too.

I saw a similar problem reported in this #584 issue, but I noticed that it was closed.

In my case, whenever I make any changes to the .prettierrc file, it only takes effect using the Java prettier formater when I restart VSCode or activate the "Developer: Reload window" command.

[ivoiv]

Same issue.

Couldn't understand why my config wasn't working like it should, only to see in the Output console that it's using a config file from weeks ago. Had to restart VSCode to work.

[Sec-ant]

I think this is because in Prettier v3, .js, .mjs and .cjs config files are loaded by import. And there's currently no easy way to invalidate the cache of an import.

Update: Just to be clear, there're some updates regarding the config resolution in the recent month but even before the update (before lilconfig was dropped), .js and .mjs were still loaded by import. I'm not sure about .cjs though because it seems that it was loaded by the lilconfig itself.

There're several workarounds (for prettier devs, not extension users) mentioned in that issue:

1. Use a worker thread to import the module and then transfer it to the main thread through messages: https://github.com/nodejs/node/issues/49442#issuecomment-1703472299
2. Create a temporary intermediate file with a unique file name as a copy of the config file and import the module from that file: https://github.com/nodejs/node/issues/49442#issuecomment-1703472561

There may be some other ways in the discussion but I don't fully understand them with my current knowledge.

Both of the two above mentioned methods will have some performance penalties if they're called frequently, unless there's a way to watch whether the content of the config file is updated or not.

I myself is also trying to implement a config resolution mechanism just like the one in Prettier and I encountered this problem, too. I used the first workaround mentioned above (the worker one), because IMO it doesn't suffer from the IO delay, and thankfully it works. If anyone is interested, the related code can be found here and here

[nicksp]

I'm still having the same issue with the most recent Prettier version v3.3.0. Have to restart the editor for Prettier to apply changes from the config file (prettier.config.cjs).

[DRieckeBWP]

Also encountering and would be happy to see this resolved.