FG
๐Ÿ’ป Software๐Ÿ› ๏ธ Developer Tools

Prettier 3.7.0 broke VSCode integration

Fresh3 days ago
Mar 14, 20260 views
Confidence Score86%
86%

Problem

Environments: - Prettier Version: 3.7.1 - Running Prettier via: VSCode - Runtime: v24.11.1 - Operating System: Linux - Prettier plugins (if any): prettier-plugin-svelte Steps to reproduce: 1. Have a typescript project in the subfolder. Install prettier and prettier configuration there. 2. Open the entire repository in VSCode 3. Run `Format Document With... -> Prettier Repo: https://github.com/shinebayar-g/prettier-3.7.0-bug-reproduce Expected behavior: Prettier formats the code properly. Actual behavior: Getting this error [code block] It seems prettier is looking for plugins from the root of the repository not in the correct subfolder where it's installed. Prettier 3.6.2 is working fine.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix โ€“ Awaiting Verification

Fix Prettier Plugin Path Issue in VSCode Integration

Medium Risk

Prettier 3.7.1 appears to have changed the way it resolves plugin paths, causing it to look for plugins in the root directory instead of the subfolder where the project is located. This results in errors when trying to format documents that rely on plugins installed in the subfolder.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Update Prettier Configuration

    Ensure that the Prettier configuration file in your subfolder explicitly specifies the plugin path. This will help Prettier locate the necessary plugins correctly.

    javascript
    module.exports = { plugins: ['prettier-plugin-svelte'] };
  2. 2

    Install Prettier Globally

    If not already done, install Prettier globally to ensure that the VSCode extension can access the correct version and plugins.

    bash
    npm install -g prettier prettier-plugin-svelte
  3. 3

    Configure VSCode Settings

    Update your VSCode settings to ensure it uses the local Prettier installation. Add the following to your settings.json file:

    json
    { "prettier.prettierPath": "./node_modules/prettier" }
  4. 4

    Restart VSCode

    After making the changes, restart VSCode to ensure that all configurations are reloaded properly.

  5. 5

    Test Formatting

    Open a TypeScript file in the subfolder and run 'Format Document With... -> Prettier' to verify that the formatting works without errors.

Validation

Confirm that the TypeScript files in the subfolder format correctly without any errors when using Prettier. Check the output console for any error messages related to plugin resolution.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

prettierformattingjavascripttype:editor-supportlocked-due-to-inactivity