prettier-vscode icon indicating copy to clipboard operation
prettier-vscode copied to clipboard

prettier.config.mjs appears to be ignored

Open Jakobud opened this issue 8 months ago • 7 comments
trafficstars

Summary

I have a project with a prettier.config.mjs config file. This file works fine when using Prettier via npm scripts. But it appears to be ignored by prettier-vscode. When I make changes to this configuration, Prettier does not follow the config'ed rules when formatting documents.

If I create a .prettierrc file, it now follows the rules in it.

Github Repository to Reproduce Issue

There is none.

Steps To Reproduce:

  1. Create a prettier.config.js with rules in it.
  2. Format document

Expected result

It should follow the rules in the config.

Actual result

It does not follow the rules

VS Code Version:

Version: 1.98.0 (Universal)
Commit: 6609ac3d66f4eade5cf376d1cb76f13985724bcb
Date: 2025-03-04T21:06:18.612Z
Electron: 34.2.0
ElectronBuildId: 11044223
Chromium: 132.0.6834.196
Node.js: 20.18.2
V8: 13.2.152.36-electron.0
OS: Darwin arm64 24.3.0

Prettier Extension Version: 11.0.0

OS and version: MacOS 15.3.1 (24D70)

Prettier Log Output

Here is my prettier.config.mjs

/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  printWidth: 120,
  tabWidth: 8,
  useTabs: true,
  semi: false,
};

export default config;

When I Format Document, here are the logs

["INFO" - 4:52:10 PM] Using config file at /Users/myuser/repos/project/sub/prettier.config.mjs
["INFO" - 4:52:11 PM] Formatting file:///Users/myuser/repos/project/sub/src/base/_defaults.scss
["INFO" - 4:52:11 PM] Using config file at /Users/myuser/repos/project/sub/prettier.config.mjs
["INFO" - 4:52:11 PM] PrettierInstance:
{
  "modulePath": "/Users/myuser/repos/project/sub/node_modules/prettier/index.cjs",
  "messageResolvers": {},
  "version": "3.2.5"
}
["INFO" - 4:52:11 PM] Using ignore file (if present) at /Users/myuser/repos/project/sub/.prettierignore
["INFO" - 4:52:11 PM] File Info:
{
  "ignored": false,
  "inferredParser": "scss"
}
["INFO" - 4:52:11 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 4:52:11 PM] Prettier Options:
{
  "filepath": "/Users/myuser/repos/project/sub/src/base/_defaults.scss",
  "parser": "scss",
  "printWidth": 80,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true
}
["INFO" - 4:52:11 PM] Formatting completed in 9ms.
["INFO" - 4:53:10 PM] Using config file at /Users/myuser/repos/project/sub/prettier.config.mjs

You can see that it is detecting the prettier.config.mjs and says VS Code configuration will not be used. But where is it getting all these configuration settings from? They are completely different than my config.

Next, I made a .prettierrc file and put in these contents:

{
  "jsxSingleQuote": true,
  "printWidth": 160,
  "singleQuote": true,
  "tabWidth": 6,
  "trailingComma": "none",
  "useTabs": true
}

Now I run Format Document again and here are the logs

["INFO" - 4:56:51 PM] Formatting file:///Users/myuser/repos/project/sub/src/base/_defaults.scss
["INFO" - 4:56:51 PM] Using config file at /Users/myuser/repos/project/sub/.prettierrc
["INFO" - 4:56:51 PM] PrettierInstance:
{
  "modulePath": "/Users/myuser/repos/project/sub/node_modules/prettier/index.cjs",
  "messageResolvers": {},
  "version": "3.2.5"
}
["INFO" - 4:56:51 PM] Using ignore file (if present) at /Users/myuser/repos/project/sub/.prettierignore
["INFO" - 4:56:51 PM] File Info:
{
  "ignored": false,
  "inferredParser": "scss"
}
["INFO" - 4:56:51 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 4:56:51 PM] Prettier Options:
{
  "filepath": "/Users/myuser/repos/project/sub/src/base/_defaults.scss",
  "parser": "scss",
  "jsxSingleQuote": true,
  "printWidth": 160,
  "singleQuote": true,
  "tabWidth": 6,
  "trailingComma": "none",
  "useTabs": true
}
["INFO" - 4:56:51 PM] Formatting completed in 8ms.
["INFO" - 4:56:58 PM] Using config file at /Users/myuser/repos/project/sub/.prettierrc

Now it's using the correct configuration in .prettierrc.

So my question is, why is it ignoring prettier.config.mjs? The Prettier documentation has a large section about all the supported configuration file options: https://prettier.io/docs/configuration It seems like it should work fine.

Jakobud avatar Mar 10 '25 22:03 Jakobud