BUG: Does not support `prettier.config.ts`, recently added in Prettier `v3.5.0`

[taep96]

Summary

Does not support prettier.config.ts, recently added in Prettier v3.5.0

Steps To Reproduce:

1. Run prettier-vscode
2. Check the output

Expected result

Working properly, like the CLI

Actual result

Errors

VS Code Version:

Version: 1.97.0

Prettier Extension Version:

11.0.0

Prettier Log Output

["ERROR" - 8:16:51 PM] Unknown file extension ".ts" for /path/to/prettier.config.ts
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /path/to/prettier.config.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:177:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:220:36)
    at defaultLoad (node:internal/modules/esm/load:142:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:555:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:434:45)
    at async link (node:internal/modules/esm/module_job:87:21)
["ERROR" - 8:16:51 PM] Invalid prettier configuration file detected. See log for details.
["ERROR" - 8:19:53 PM] Invalid prettier configuration file detected.

[taep96]

@itsyoboieltr @fisker

[tryforceful]

Is there any way we can set NODE_OPTIONS="--experimental-strip-types" somewhere in VSCode before Prettier runs? 🤔 to help get around this

[kingyue737]

To make TypeScript config files work, Node.js>=22.6.0 is required and Node.js v22 requires --experimental-strip-types.

According to the release note, Node v22 is required. I wonder if it is currently possible for the prettier extension to implement support for ts config, since VSCode ships with Node v20

[fisker]

As mentioned in the Prettier 3.5 release note, maybe we can use tsctsx to run Prettier.

[eighty4]

Fix for Node users by upgrading to Node 23

Node 23 will let you use prettier with typescript and not require setting the NODE_OPTIONS for experimental type checking. nvm use 23 will fix.

Fix for Bun users using bunx

If you're using bunx prettier to run Prettier with a .ts config, make sure you are on Node 23 as bunx will run with the Node runtime on your path!

Use bunx --bun prettier to run with Bun! 💉 🚀

[taep96]

This issue is about the VSCode extension, not the CLI.

[coycoydev]

is there a workaround for this?

[taep96]

using prettier.config.js with // @ts-check and jsdoc types

[Shinigami92]

using prettier.config.js with // @ts-check and jsdoc types

That's not a workaround 🤦
Please read the title of the issue...

[taep96]

you’d get all the benefits of typescript in a js file + the extension recognizing the file, so yes it’s a workaround.

if you want to use .ts specifically though read #3623 (comment) and #3623 (comment)

[BinToss]

@taep96 It'll be a few months at the very least for VSCode's Extensions Host to upgrade to Node 23. It's still on Node 20.
See https://github.com/ewanharris/vscode-versions#vs-code-versions
Attempts to use Node.js 23's features in a VSCode extension will fail...unless they can be and are polyfilled.

• tsx: One of the comments you linked suggests using the TypeScript Compiler (tsc) to run prettier.config.cts/ts/mts files. @fisker probably meant tsx. Although it can be used to run scripts via CLI, this project should probably use its API to register it as a module loader.

import 'tsx'
// any _dynamic_ imports of TypeScript modules afterward will work as if they were JavaScript modules.
// It uses ESBuild under the hood for transpilation at runtime.

// See https://www.typescriptlang.org/tsconfig/#allowImportingTsExtensions
const defaultImport = (await import('./myModule.ts')).default; // infers the type of the default import

• depends on ESBuild for transpilation
• Unpacked size (incl. deps): 691 KiB

Edit: Alternatives to tsx

• ts-import provides a solution similar to tsx's API, but I've never tried it. It seems well established (since 2023) and frequently updated.
  • Depends on TSLib
  • Unpacked size (incl. deps): 541 KiB
• cosmiconfig-typescript-loader: An add-on for cosmiconfig. commitlint uses this to load TypeScript configs. Edit 2: Unfortunately, Prettier doesn't use cosmiconfig for config discovery. This isn't an option :(
  • jiti: The underlying loader/transpiler. Like TSX, this can be imported globally to allow loading TypeScript modules without type-checking. It also caches transpiled output and has an option to enable sourcemaps.
    • No dependencies (with a catch)
    • Unpacked size: 2181 KiB (2.13 MiB)
      • Okay, why?: Babel is bundled. That comprises 1.9 MiB.

[fisker]

@fisker probably meant tsx.

Ah, yes that's what I mean. This extension can use tsx to support it, I think.
Didn't notice this typo 😢 Thanks.

[fisker]

If tsx doesn't work, we can also find a way to pass a ts config loader to the Prettier Core, just let me know.

[fisker]

@BinToss If you are trying to fix this issue, you just need find a way to make import(TS) work, if it doesn't work, find a proper loadTypescriptFile(TS) function. I can make Prettier accept custom loader.