prettier-vscode Documentation

Technical Documentation: prettier/prettier-vscode

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

Prettier Formatter for Visual Studio Code

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Installation Copy Chapter

Install through VS Code extensions. Search for Prettier - Code formatter

Visual Studio Code Market Place: Prettier - Code formatter

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode

Default Formatter Copy Section

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Note: VS Code does not support combined language syntax for editor.defaultFormatter. You must set the formatter for each language separately:

// ❌ This will NOT work
{
  "[javascript][typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

// ✅ Use separate blocks instead
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

If you want to disable Prettier on a particular language you can either create a .prettierignore file or you can use VS Code's editor.defaultFormatter settings.

The following will use Prettier for all languages except Javascript.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "<another formatter>"
  }
}

The following will use Prettier for only Javascript.

{
  "editor.defaultFormatter": "<another formatter>",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Additionally, you can disable format on save for specific languages if you don't want them to be automatically formatted.

{
  "[javascript]": {
    "editor.formatOnSave": false
  }
}

Prettier Resolution Copy Section

This extension will use prettier from your project's local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project's dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project and pin its version as recommended, run:

npm install prettier -D --save-exact

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Prettier Versions Copy Section

This extension bundles Prettier 3.x by default. If your project has a local installation of Prettier (in node_modules), that version will be used instead of the bundled version. This allows you to use a specific version of Prettier in your project.

Prettier 2.x Compatibility: Projects using Prettier 2.x are still fully supported. If you have Prettier 2.x installed locally in your project, the extension will automatically use that version.

Plugins Copy Section

This extension supports Prettier plugins when you are using a locally or globally resolved version of prettier. If you have Prettier and a plugin registered in your package.json, this extension will attempt to register the language and provide automatic code formatting for the built-in and plugin languages.

Configuration Copy Chapter

There are multiple options for configuring Prettier with this extension. You can use VS Code settings, prettier configuration files, or an .editorconfig file. The VS Code settings are meant to be used as a fallback and are generally intended only for use on non-project files. It is recommended that you always include a prettier configuration file in your project specifying all settings for your project. This will ensure that no matter how you run prettier - from this extension, from the CLI, or from another IDE with Prettier, the same settings will get applied.

Using Prettier Configuration files to set formatting options is the recommended approach. Options are searched recursively down from the file being formatted so if you want to apply prettier settings to your entire project simply set a configuration in the root. Settings can also be configured through VS Code - however, these settings will only apply while running the extension, not when running prettier through the command line.

Configuring Default Options Copy Section

Some users may not wish to create a new Prettier config for every project or use the VS Code settings. In order to set a default configuration, set prettier.configPath. However, be careful, if this is set this value will always be used and local configuration files will be ignored.

Visual Studio Code Settings Copy Section

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

1. Prettier configuration file
2. .editorconfig
3. Visual Studio Code Settings (Ignored if any other configuration is present)

NOTE: If any local configuration file is present (i.e. .prettierrc) the VS Code settings will NOT be used.

Usage Copy Chapter

Using Command Palette (CMD/CTRL + Shift + P) Copy Section

1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Keyboard Shortcuts Copy Section

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don't like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Format On Save Copy Section

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

Format Selection Copy Section

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

javascript
javascriptreact
typescript
typescriptreact
json
graphql
handlebars

Format Document (Forced) Copy Section

If you would like to format a document that is configured to be ignored by Prettier either because it is in a .prettierignore file or part of a normally excluded location like node_modules, you can run the command Format Document (Forced) to force the document to be formatted. Forced mode will also ignore any config for requirePragma allowing you to format files without the pragma comment present.

Linter Integration Copy Chapter

The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refer to the Prettier documentation.

Using Code Actions on Save Copy Section

You can use VS Code's editor.codeActionsOnSave to run Prettier before other formatters like ESLint. This is useful when you want to format with Prettier first and then apply ESLint fixes.

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.prettier": "explicit",
  },
}

You can also combine Prettier with ESLint:

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.prettier": "explicit",
    "source.fixAll.eslint": "explicit",
  },
}

Note: The source.fixAll.prettier code action respects your editor.defaultFormatter setting. If you have set a different default formatter (e.g., ESLint with Prettier plugin), the Prettier code action will not run unless you explicitly enable it with "source.fixAll.prettier": "explicit" or "source.fixAll.prettier": "always". This prevents double-formatting when using setups like eslint-plugin-prettier.

Workspace Trust Copy Chapter

This extension utilizes VS Code Workspace Trust features. When this extension is run on an untrusted workspace, it will only use the built in version of prettier. No plugins, local, or global modules will be supported. Additionally, certain settings are also restricted - see each setting for details.

Settings Copy Chapter

Prettier Settings Copy Section

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

The default values of these configurations match Prettier 3.0 defaults. Notable changes from Prettier 2.x: trailingComma now defaults to "all" instead of "es5".

prettier.arrowParens
prettier.bracketSpacing
prettier.endOfLine
prettier.htmlWhitespaceSensitivity
prettier.insertPragma
prettier.singleAttributePerLine
prettier.bracketSameLine
prettier.jsxBracketSameLine
prettier.jsxSingleQuote
prettier.printWidth
prettier.proseWrap
prettier.quoteProps
prettier.requirePragma
prettier.semi
prettier.singleQuote
prettier.tabWidth
prettier.trailingComma
prettier.useTabs
prettier.vueIndentScriptAndStyle
prettier.embeddedLanguageFormatting
prettier.experimentalTernaries
prettier.objectWrap
prettier.experimentalOperatorPosition

Language-Specific Formatting

All Prettier options above support language-specific overrides. This allows you to set different formatting rules for different file types directly in your VS Code settings, which are easily synchronized across machines and environments.

To configure language-specific settings, use the [language] syntax in your VS Code settings.json:

{
  "[html]": {
    "prettier.printWidth": 180
  },
  "[typescript]": {
    "prettier.printWidth": 120,
    "prettier.tabWidth": 4,
    "prettier.semi": false
  },
  "[json]": {
    "prettier.printWidth": 80,
    "prettier.tabWidth": 2
  }
}

This feature is particularly useful when working in multi-language projects or when different languages have different formatting conventions. Language-specific settings will override the global Prettier settings when formatting files of that language type.

Extension Settings Copy Section

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: `true`)

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: `false`)

Require a prettier configuration file to format files. Untitled files will still be formatted using the VS Code Prettier configuration even with this option set to true.

prettier.ignorePath (default: `.prettierignore`)

Supply the path to an ignore file such as .gitignore or .prettierignore.
Files which match will not be formatted. Set to null to not read ignore files.

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

prettier.configPath

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a ~/.prettierrc file in your home directory.

Disabled on untrusted workspaces

prettier.prettierPath

Supply a custom path to the prettier module. This path should be to the module folder, not the bin/script path. i.e. ./node_modules/prettier, not ./bin/prettier.

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: `false`)

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

prettier.documentSelectors

A list of glob patterns to register Prettier formatter. Typically these will be in the format of **/*.abc to tell this extension to register itself as the formatter for all files with the abc extension. This feature can be useful when you have overrides set in your config file to map custom extensions to a parser.

It is likely you will need to also update your prettier config. For example, if I register the following document selector by itself, Prettier still won't know what to do with that file. I either need a Prettier extension that formats .abc file format or I need to configure Prettier.

{
  "prettier.documentSelectors": ["**/*.abc"]
}

To tell Prettier how to format a file of type .abc I can set an override in the prettier config that makes this file type use the babel parser.

{
  "overrides": [
    {
      "files": "*.abc",
      "options": {
        "parser": "babel"
      }
    }
  ]
}

Disabled on untrusted workspaces

prettier.useEditorConfig (default: `true`)

Whether or not to take .editorconfig into account when parsing configuration. See the prettier.resolveConfig docs for details.

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: `false`)

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Troubleshooting Copy Chapter

See the Troubleshooting Guide for help with common issues including:

• Prettier not formatting files
• Unexpected formatting results
• Performance issues
• Plugin problems
• Configuration issues

Common Error Messages Copy Section

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

When a package.json is present in your project and it contains prettier, plugins, or linter libraries this extension will attempt to load these modules from your node_module folder. If you see this error, it most likely means you need to run npm install, yarn install, pnpm install, etc. to install the packages in your package.json.

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

Overview (`legacy/README.md`) Copy Section

Prettier - Code formatter (Deprecated)

This extension is deprecated. Please use esbenp.prettier-vscode instead.

Official Extension Copy Chapter

The official Prettier VS Code extension is:

esbenp.prettier-vscode

Install via the command line:

code --install-extension esbenp.prettier-vscode

Links Copy Chapter

• Official Extension
• GitHub Repository
• Prettier Documentation

Custom File Extensions (`docs/custom-file-extensions.md`) Copy Section

Custom File Extensions

This guide explains how to configure the Prettier VS Code extension to format files with custom extensions.

Overview Copy Chapter

Like Prettier itself, the VS Code extension supports Configuration Overrides. This allows you to register custom file extensions to use specific parsers.

Basic Configuration Copy Chapter

In your Prettier configuration file (.prettierrc, .prettierrc.json, etc.), you can use overrides to map file extensions to parsers:

{
  "overrides": [
    {
      "files": ["*.abc"],
      "options": {
        "parser": "html"
      }
    }
  ]
}

The VS Code Caveat Copy Chapter

This configuration works with the Prettier CLI, but there's an important caveat for VS Code:

VS Code must recognize the file's language as one that Prettier supports.

How It Works Copy Section

1. VS Code assigns each file a "language identifier" based on its extension
2. The Prettier extension only activates for language identifiers it recognizes
3. If VS Code doesn't recognize your file type, the extension won't offer to format it

Example Copy Section

Solution 1: File Associations Copy Chapter

If VS Code doesn't have a language associated with your file extension, you can add one.

In VS Code Settings Copy Section

Add to your .vscode/settings.json or user settings:

{
  "files.associations": {
    "*.abc": "html",
    "*.xyz": "json"
  }
}

This tells VS Code to treat .abc files as HTML and .xyz files as JSON.

Combined with Prettier Config Copy Section

Make sure your Prettier config matches:

{
  "overrides": [
    {
      "files": ["*.abc"],
      "options": {
        "parser": "html"
      }
    }
  ]
}

Solution 2: Document Selectors Copy Chapter

For more advanced cases, you can use the prettier.documentSelectors setting to explicitly register file patterns:

{
  "prettier.documentSelectors": ["**/*.abc"]
}

This tells the extension to register as a formatter for all .abc files.

Note: You still need the Prettier config override to specify the parser.

Solution 3: Custom Language Identifiers Copy Chapter

If another extension registers your file type with a custom language identifier (e.g., my-custom-language), you have two options:

Option A: Override the Language Copy Section

If you don't need the other extension's features:

{
  "files.associations": {
    "*.abc": "html"
  }
}

Option B: Add VS Code Language Support to Prettier Copy Section

For a proper fix, the language identifier needs to be added to Prettier or the relevant plugin.

How to contribute:

1. Find the language definition file in Prettier or the plugin
2. Add your VS Code language identifier to vscodeLanguageIds
3. Submit a pull request

Example from the XML plugin:

{
  name: "XML",
  parsers: ["xml"],
  extensions: [".xml", ".svg", ".xsd"],
  vscodeLanguageIds: ["xml", "svg"]  // Add new identifiers here
}

Where to submit PRs:

Troubleshooting Copy Chapter

Prettier Won't Format My Custom Extension Copy Section

1. Check the language identifier:

   • Open the file in VS Code
   • Look at the language indicator in the bottom-right status bar
   • Note what language VS Code thinks the file is

2. Verify Prettier supports the language:

   • Click "Prettier" in the status bar
   • Check if the language is listed in the supported languages

3. Check your configuration:

   • Ensure files.associations maps to a supported language
   • Ensure your Prettier config has an override for the file pattern

Common Issues Copy Section

Publishing (`docs/publishing.md`) Copy Section

Publishing Guide

This document explains how to publish new versions of the Prettier VS Code extension.

Overview Copy Chapter

Publishing is automated via GitHub Actions. When you push a tag starting with v, the workflow will:

1. Run lint and tests
2. Build and package the extension
3. Create a GitHub Release
4. Publish to the VS Code Marketplace

Prerequisites Copy Chapter

• Write access to the repository
• MARKETPLACE_TOKEN secret configured in GitHub (for automated publishing)

Release Commands Copy Chapter

All releases are handled through the npm run release command:

# Patch release (bug fixes): 11.0.0 → 11.0.1
npm run release patch

# Minor release (new features): 11.0.0 → 11.1.0
npm run release minor

# Major release (breaking changes): 11.0.0 → 12.0.0
npm run release major

# Preview release: 11.0.0 → 11.1.0-preview.1
npm run release preview

Version Types Copy Chapter

Publishing a Stable Release Copy Chapter

1. Update the Changelog Copy Section

Add your changes under the [Unreleased] section in CHANGELOG.md as you make changes:

## [Unreleased]

- Added new feature X
- Fixed bug Y

2. Run the Release Command Copy Section

npm run release patch   # or minor, major

This automatically:

1. Calculates the new version number
2. Updates version in package.json
3. Updates CHANGELOG.md (converts [Unreleased] to the new version)
4. Creates a git commit with message v<version>
5. Creates a git tag v<version>
6. Pushes the commit and tag to origin

The GitHub Actions workflow will then automatically:

• Build the extension
• Create a GitHub Release with auto-generated notes
• Publish to the VS Code Marketplace

Publishing a Preview Release Copy Chapter

Preview releases allow testing new features before a stable release. VS Code users can opt-in to receive preview versions.

Creating a Preview Copy Section

# First preview (from stable): 11.0.0 → 11.1.0-preview.1
npm run release preview

# Subsequent previews: 11.1.0-preview.1 → 11.1.0-preview.2
npm run release preview

The workflow detects preview tags and:

• Packages with vsce package --pre-release
• Creates a GitHub Release marked as prerelease
• Publishes to Marketplace with vsce publish --pre-release

Promoting to Stable Copy Section

When ready to release the stable version:

# From preview to stable: 11.1.0-preview.3 → 11.1.0
npm run release minor

This will update the changelog (moving all [Unreleased] entries to the new stable version) and push automatically.

Manual Publishing (Emergency) Copy Chapter

If automated publishing fails, you can publish manually:

# Install vsce
npm install @vscode/vsce

# Package the extension
npm install
npx @vscode/vsce package

# Publish (requires personal access token)
npx @vscode/vsce publish -p <YOUR_TOKEN>

# Or for prerelease
npx @vscode/vsce publish --pre-release -p <YOUR_TOKEN>

Troubleshooting Copy Chapter

Release workflow didn't trigger Copy Section

• Ensure the tag starts with v (e.g., v12.0.0)
• Check that the tag was pushed: git ls-remote --tags origin

Marketplace publish failed Copy Section

• Verify MARKETPLACE_TOKEN secret is valid and not expired
• Check the VS Code Marketplace Publisher Dashboard

Version mismatch Copy Section

If package.json version doesn't match the tag:

# Delete the incorrect tag locally and remotely
git tag -d v12.0.0
git push origin :refs/tags/v12.0.0

# Re-run the release
npm run release minor  # or appropriate type

Troubleshooting (`docs/troubleshooting.md`) Copy Section

Troubleshooting Guide

This guide covers common issues with the Prettier VS Code extension and how to resolve them.

Table of Contents Copy Chapter

• Prettier Not Formatting
• Wrong Formatting / Unexpected Results
• Performance Issues
• Plugin Issues
• Configuration Issues
• Getting Debug Logs

Prettier Not Formatting Copy Chapter

Check that Prettier is the Default Formatter Copy Section

1. Open a file you want to format
2. Open Command Palette (Cmd/Ctrl + Shift + P)
3. Run "Format Document With..."
4. Select "Configure Default Formatter..."
5. Choose "Prettier - Code formatter"

Or add to your settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Combined Language Settings Not Working Copy Section

Note: VS Code does NOT support combined language settings for editor.defaultFormatter. While VS Code 1.63+ supports combining multiple languages for some settings using syntax like [javascript][typescript], this feature does not work for the editor.defaultFormatter setting.

❌ This will NOT work:

{
  "[markdown][yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

✅ Instead, use separate language blocks:

{
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

This is a VS Code core limitation, not an issue with the Prettier extension. The combined syntax works for other editor settings (like editor.wordWrap, editor.tabSize, etc.) but not for editor.defaultFormatter.

Check for Errors in the Output Panel Copy Section

1. Click "Prettier" in the VS Code status bar (bottom right)
2. Check for any error messages in the output panel

Ensure Prettier is Installed Copy Section

If you see "Using bundled Prettier", the extension is working but using its built-in Prettier version. For project-specific formatting:

npm install --save-dev --save-exact prettier

Check `.prettierignore` Copy Section

Your file might be ignored. Check if:

• The file is in .prettierignore
• The file is in node_modules (ignored by default)
• The file matches a pattern in your ignore file

Check `prettier.requireConfig` Copy Section

If prettier.requireConfig is true, Prettier won't format files unless a config file exists:

{
  "prettier.requireConfig": true
}

Either set this to false or create a .prettierrc file.

Wrong Formatting / Unexpected Results Copy Chapter

This is Usually a Prettier Core Issue Copy Section

If you don't like how Prettier formats your code, this is not a VS Code extension issue. The extension just runs Prettier - it doesn't control formatting rules.

To verify:

npx prettier --write yourfile.js

If the CLI produces the same result, report the issue to prettier/prettier.

Check Which Prettier Version is Being Used Copy Section

1. Click "Prettier" in the status bar
2. Look for "Prettier version: X.X.X"

Your project's local version takes precedence over the bundled version.

Check Your Configuration Copy Section

Prettier reads configuration from multiple sources:

1. .prettierrc, .prettierrc.json, .prettierrc.js, etc.
2. prettier key in package.json
3. .editorconfig (if prettier.useEditorConfig is true)
4. VS Code settings (only if no config file exists)

To see which config is being used:

npx prettier --find-config-path yourfile.js

Performance Issues Copy Chapter

Large Files Copy Section

Prettier can be slow on very large files. Consider:

• Breaking large files into smaller modules
• Adding specific files to .prettierignore

Many Plugins Copy Section

Each plugin adds processing time. If you have many plugins, formatting will be slower.

Enable Debug Logs Copy Section

Add to your VS Code settings:

{
  "prettier.enableDebugLogs": true
}

Then check the Prettier output panel for timing information.

Test with CLI Copy Section

Compare extension performance with CLI:

time npx prettier --write yourfile.js

If the CLI is also slow, the issue is with Prettier, not the extension.

Plugin Issues Copy Chapter

Plugin Not Working Copy Section

1. Ensure the plugin is installed locally:

   bash Copy

   npm install --save-dev prettier-plugin-xyz

2. Check that Prettier is also installed locally (plugins require local Prettier)

3. Some plugins need explicit configuration in .prettierrc:

   json Copy

   {
     "plugins": ["prettier-plugin-xyz"]
   }

Plugin Conflicts Copy Section

If you have multiple plugins, they might conflict. Try disabling plugins one at a time to identify the conflict.

Workspace Trust Copy Section

Plugins only work in trusted workspaces. If you see "This workspace is not trusted", click the trust button in VS Code.

Configuration Issues Copy Chapter

VS Code Settings Not Applied Copy Section

VS Code settings for Prettier are only used when no configuration file exists. If you have a .prettierrc, those settings override VS Code settings.

Config File Not Found Copy Section

Check config file location:

npx prettier --find-config-path yourfile.js

Multiple Config Files Copy Section

Prettier uses the nearest config file to the file being formatted. This can cause different files to use different configs.

EditorConfig Conflicts Copy Section

If you have an .editorconfig file, it might override your Prettier settings. Either:

• Update .editorconfig to match your Prettier config
• Disable EditorConfig: "prettier.useEditorConfig": false

Getting Debug Logs Copy Chapter

When reporting issues, always include debug logs:

1. Add to VS Code settings:

   json Copy

   {
     "prettier.enableDebugLogs": true
   }

2. Reload VS Code

3. Try to format the problematic file

4. Click "Prettier" in the status bar

5. Copy all the output

Information to Include in Bug Reports Copy Section

• Prettier extension version
• VS Code version
• Operating system
• Prettier version (npx prettier --version)
• Contents of your Prettier config file
• Full Prettier output log
• A link to a repository that reproduces the issue

Still Having Issues? Copy Chapter

1. Search existing issues
2. Check if it's a Prettier core issue
3. Open a new issue with:
   • A reproduction repository
   • Debug logs
   • All the information listed above

Writing An Issue (`docs/writing-an-issue.md`) Copy Section

Writing a Good Issue

To help us diagnose your problem quickly, please follow these guidelines when opening an issue.

Before You Open an Issue Copy Chapter

1. Check if it's a Prettier Core Issue Copy Section

This extension only integrates Prettier into VS Code—it doesn't control how code is formatted.

Test with the CLI:

npx prettier --write yourfile.js

If the CLI produces the same result you're seeing in VS Code, the issue is with Prettier itself. Please report it to prettier/prettier.

2. Search Existing Issues Copy Section

Your issue may already be reported. Search existing issues before opening a new one.

3. Check the Troubleshooting Guide Copy Section

Many common problems are covered in our Troubleshooting Guide.

Opening an Issue Copy Chapter

Choose the Right Template Copy Section

We have different issue templates for different types of problems:

Click "New Issue" and select the appropriate template. Do not open blank issues—they will be closed automatically.

Required Information Copy Section

All bug reports require:

Creating a Reproduction Repository Copy Section

A reproduction repository is the most important thing you can provide. Here's how to create one:

1. Create a new public GitHub repository
2. Add the minimum files needed to reproduce the issue:
   • The file(s) that won't format correctly
   • Your .prettierrc or other Prettier config
   • package.json with your Prettier version and any plugins
3. Include a README.md with steps to reproduce

Tips:

• Simpler is better—remove anything not needed to reproduce the issue
• Make sure the issue actually reproduces in your minimal repo
• Include the exact commands to run

Getting Prettier Extension Logs Copy Section

The extension logs are essential for diagnosing problems:

1. Enable Debug Logs (recommended for detailed info):

   • Open VS Code Settings
   • Search for "prettier debug"
   • Enable Prettier: Enable Debug Logs
   • Restart VS Code

2. Reproduce the Issue:

   • Open the file that has the problem
   • Run "Format Document" (Cmd/Ctrl + Shift + P → Format Document)

3. Copy the Logs:

   • Click "Prettier" in the VS Code status bar (bottom right)
   • Copy all the text from the Output panel
   • Paste into the issue (not a screenshot!)

What Happens After You Submit Copy Chapter

1. Automated Triage — Our bot checks your issue and may ask for missing information
2. Duplicate Check — We'll check if this is a known issue
3. Review — A maintainer will review your issue

If We Ask for More Information Copy Section

• Issues marked need-more-info require your response
• Issues without the requested information will be closed after 7 days
• You can always open a new issue once you have the required information

Tips for Getting Help Faster Copy Chapter

1. Provide a reproduction repo — Issues with repos get addressed much faster
2. Be specific — "It doesn't work" is hard to diagnose; "Formatting removes semicolons in .tsx files" is actionable
3. Include logs — Always include the Prettier output log
4. One issue per report — Don't combine multiple problems in one issue
5. Be patient and respectful — Maintainers are volunteers

Issue Types We Cannot Help With Copy Chapter

--- METRICS ---

• Files Extracted: 6
• Estimated Token Budget: ~9838 tokens
• Canonical Reference: https://codewiki.google/github.com/prettier/prettier-vscode