# Technical Documentation: prettier/prettier-vscode > ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/prettier/prettier-vscode) ### Overview (`README.md`) # Prettier Formatter for Visual Studio Code [Prettier](https://prettier.io/) 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.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Build Status VS Code Marketplace Downloads VS Code Marketplace Installs code style: prettier Follow Prettier on X

## Installation Install through VS Code extensions. Search for `Prettier - Code formatter` [Visual Studio Code Market Place: Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 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 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. ```json { "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: ```json // ❌ 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. ```json { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "" } } ``` The following will use Prettier for only Javascript. ```json { "editor.defaultFormatter": "", "[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. ```json { "[javascript]": { "editor.formatOnSave": false } } ``` ### Prettier Resolution 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](https://prettier.io/docs/en/install.html), 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 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 This extension supports [Prettier plugins](https://prettier.io/docs/en/plugins.html) 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 There are multiple options for configuring Prettier with this extension. You can use [VS Code settings](#prettier-settings), [prettier configuration files](https://prettier.io/docs/en/configuration.html), 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](https://prettier.io/docs/en/configuration.html) 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 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`](https://github.com/prettier/prettier-vscode#prettierconfigpath). However, be careful, if this is set this value will always be used and local configuration files will be ignored. ### Visual Studio Code Settings You can use [VS Code settings](#prettier-settings) to configure prettier. Settings will be read from (listed by priority): 1. [Prettier configuration file](https://prettier.io/docs/en/configuration.html) 1. `.editorconfig` 1. 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 ### Using Command Palette (CMD/CTRL + Shift + P) ``` 1. CMD + Shift + P -> Format Document OR 1. Select the text you want to Prettify 2. CMD + Shift + P -> Format Selection ``` ### Keyboard Shortcuts Visual Studio Code provides [default keyboard shortcuts](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference) for code formatting. You can learn about these for each platform in the [VS Code documentation](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference). 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 Respects `editor.formatOnSave` setting. You can turn on format-on-save on a per-language basis by scoping the setting: ```json // Set the default "editor.formatOnSave": false, // Enable per-language "[javascript]": { "editor.formatOnSave": true } ``` ### Format Selection 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) 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 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](https://prettier.io/docs/en/integrating-with-linters.html). ### Using Code Actions on Save 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. ```jsonc // .vscode/settings.json { "editor.codeActionsOnSave": { "source.fixAll.prettier": "explicit", }, } ``` You can also combine Prettier with ESLint: ```jsonc // .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 This extension utilizes VS Code [Workspace Trust](https://code.visualstudio.com/docs/editor/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 ### Prettier Settings 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](#configuration) section of this document for more details. For reference on the options see the [prettier documentation](https://prettier.io/docs/en/options.html). > 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`: ```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 These settings are specific to VS Code and need to be set in the VS Code settings file. See the [documentation](https://code.visualstudio.com/docs/getstarted/settings) 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](https://code.visualstudio.com/api/references/vscode-api#GlobPattern) 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](https://prettier.io/docs/en/configuration.html#configuration-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. ```json { "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. ```json { "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](https://prettier.io/docs/en/api.html#prettierresolveconfigfilepath--options) 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 See the [Troubleshooting Guide](docs/troubleshooting.md) for help with common issues including: - Prettier not formatting files - Unexpected formatting results - Performance issues - Plugin problems - Configuration issues ### Common Error Messages **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](https://code.visualstudio.com/docs/editor/workspace-trust) --- ### Overview (`legacy/README.md`) # Prettier - Code formatter (Deprecated) > **This extension is deprecated. Please use [esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) instead.** ## Official Extension The official Prettier VS Code extension is: **[esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)** Install via the command line: ```bash code --install-extension esbenp.prettier-vscode ``` ## Links - [Official Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - [GitHub Repository](https://github.com/prettier/prettier-vscode) - [Prettier Documentation](https://prettier.io) --- ### Custom File Extensions (`docs/custom-file-extensions.md`) # Custom File Extensions This guide explains how to configure the Prettier VS Code extension to format files with custom extensions. ## Overview Like [Prettier itself](https://prettier.io/docs/en/configuration.html#configuration-overrides), the VS Code extension supports Configuration Overrides. This allows you to register custom file extensions to use specific parsers. ## Basic Configuration In your Prettier configuration file (`.prettierrc`, `.prettierrc.json`, etc.), you can use overrides to map file extensions to parsers: ```json { "overrides": [ { "files": ["*.abc"], "options": { "parser": "html" } } ] } ``` ## The VS Code Caveat 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 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 | File | VS Code Language | Prettier Formats? | | ------------------------ | ---------------- | ----------------- | | `*.html` | `html` | Yes | | `*.abc` (unregistered) | `plaintext` | No | | `*.abc` → `html` mapping | `html` | Yes | --- ## Solution 1: File Associations If VS Code doesn't have a language associated with your file extension, you can add one. ### In VS Code Settings Add to your `.vscode/settings.json` or user settings: ```json { "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 Make sure your Prettier config matches: ```json { "overrides": [ { "files": ["*.abc"], "options": { "parser": "html" } } ] } ``` --- ## Solution 2: Document Selectors For more advanced cases, you can use the `prettier.documentSelectors` setting to explicitly register file patterns: ```json { "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 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 If you don't need the other extension's features: ```json { "files.associations": { "*.abc": "html" } } ``` ### Option B: Add VS Code Language Support to Prettier 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:** ```javascript { name: "XML", parsers: ["xml"], extensions: [".xml", ".svg", ".xsd"], vscodeLanguageIds: ["xml", "svg"] // Add new identifiers here } ``` **Where to submit PRs:** | Language | Repository | | ---------------------------- | ------------------------------------------------------------- | | CSS, SCSS, Less | [prettier/prettier](https://github.com/prettier/prettier) | | JavaScript, TypeScript, JSON | [prettier/prettier](https://github.com/prettier/prettier) | | HTML, Vue, Angular | [prettier/prettier](https://github.com/prettier/prettier) | | Markdown, YAML | [prettier/prettier](https://github.com/prettier/prettier) | | XML | [prettier/plugin-xml](https://github.com/prettier/plugin-xml) | | Other plugins | Check the specific plugin repository | --- ## Troubleshooting ### Prettier Won't Format My Custom Extension 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 | Issue | Solution | | ------------------------------ | ------------------------------------------------------------ | | "No formatter installed" | Add `files.associations` for the extension | | Formatting doesn't match CLI | Ensure VS Code language matches Prettier parser | | Plugin language not recognized | Use `prettier.documentSelectors` or contribute to the plugin | --- ### Publishing (`docs/publishing.md`) # Publishing Guide This document explains how to publish new versions of the Prettier VS Code extension. ## Overview 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 - Write access to the repository - `MARKETPLACE_TOKEN` secret configured in GitHub (for automated publishing) ## Release Commands All releases are handled through the `npm run release` command: ```bash # 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 | Type | Command | Example | | ------- | ------------------------- | ----------------------------- | | Major | `npm run release major` | `11.0.0` → `12.0.0` | | Minor | `npm run release minor` | `11.0.0` → `11.1.0` | | Patch | `npm run release patch` | `11.0.0` → `11.0.1` | | Preview | `npm run release preview` | `11.0.0` → `11.1.0-preview.1` | ## Publishing a Stable Release ### 1. Update the Changelog Add your changes under the `[Unreleased]` section in `CHANGELOG.md` as you make changes: ```markdown ## [Unreleased] - Added new feature X - Fixed bug Y ``` ### 2. Run the Release Command ```bash 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` 5. Creates a git tag `v` 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 Preview releases allow testing new features before a stable release. VS Code users can opt-in to receive preview versions. ### Creating a Preview ```bash # 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 When ready to release the stable version: ```bash # 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) If automated publishing fails, you can publish manually: ```bash # 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 # Or for prerelease npx @vscode/vsce publish --pre-release -p ``` ## Troubleshooting ### Release workflow didn't trigger - 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 - Verify `MARKETPLACE_TOKEN` secret is valid and not expired - Check the [VS Code Marketplace Publisher Dashboard](https://marketplace.visualstudio.com/manage) ### Version mismatch If `package.json` version doesn't match the tag: ```bash # 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`) # Troubleshooting Guide This guide covers common issues with the Prettier VS Code extension and how to resolve them. ## Table of Contents - [Prettier Not Formatting](#prettier-not-formatting) - [Wrong Formatting / Unexpected Results](#wrong-formatting--unexpected-results) - [Performance Issues](#performance-issues) - [Plugin Issues](#plugin-issues) - [Configuration Issues](#configuration-issues) - [Getting Debug Logs](#getting-debug-logs) --- ## Prettier Not Formatting ### Check that Prettier is the Default Formatter 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`: ```json { "editor.defaultFormatter": "esbenp.prettier-vscode" } ``` ### Combined Language Settings Not Working **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:** ```json { "[markdown][yaml]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` ✅ **Instead, use separate language blocks:** ```json { "[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 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 If you see "Using bundled Prettier", the extension is working but using its built-in Prettier version. For project-specific formatting: ```bash npm install --save-dev --save-exact prettier ``` ### Check `.prettierignore` 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` If `prettier.requireConfig` is `true`, Prettier won't format files unless a config file exists: ```json { "prettier.requireConfig": true } ``` Either set this to `false` or create a `.prettierrc` file. --- ## Wrong Formatting / Unexpected Results ### This is Usually a Prettier Core Issue 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:** ```bash npx prettier --write yourfile.js ``` If the CLI produces the same result, report the issue to [prettier/prettier](https://github.com/prettier/prettier/issues). ### Check Which Prettier Version is Being Used 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 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: ```bash npx prettier --find-config-path yourfile.js ``` --- ## Performance Issues ### Large Files Prettier can be slow on very large files. Consider: - Breaking large files into smaller modules - Adding specific files to `.prettierignore` ### Many Plugins Each plugin adds processing time. If you have many plugins, formatting will be slower. ### Enable Debug Logs Add to your VS Code settings: ```json { "prettier.enableDebugLogs": true } ``` Then check the Prettier output panel for timing information. ### Test with CLI Compare extension performance with CLI: ```bash time npx prettier --write yourfile.js ``` If the CLI is also slow, the issue is with Prettier, not the extension. --- ## Plugin Issues ### Plugin Not Working 1. Ensure the plugin is installed locally: ```bash 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 { "plugins": ["prettier-plugin-xyz"] } ``` ### Plugin Conflicts If you have multiple plugins, they might conflict. Try disabling plugins one at a time to identify the conflict. ### Workspace Trust Plugins only work in trusted workspaces. If you see "This workspace is not trusted", click the trust button in VS Code. --- ## Configuration Issues ### VS Code Settings Not Applied 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 Check config file location: ```bash npx prettier --find-config-path yourfile.js ``` ### Multiple Config Files Prettier uses the nearest config file to the file being formatted. This can cause different files to use different configs. ### EditorConfig Conflicts 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 When reporting issues, always include debug logs: 1. Add to VS Code settings: ```json { "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 - 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? 1. Search [existing issues](https://github.com/prettier/prettier-vscode/issues) 2. Check if it's a [Prettier core issue](https://github.com/prettier/prettier/issues) 3. Open a [new issue](https://github.com/prettier/prettier-vscode/issues/new/choose) with: - A reproduction repository - Debug logs - All the information listed above --- ### Writing An Issue (`docs/writing-an-issue.md`) # Writing a Good Issue To help us diagnose your problem quickly, please follow these guidelines when opening an issue. ## Before You Open an Issue ### 1. Check if it's a Prettier Core Issue This extension only **integrates** Prettier into VS Code—it doesn't control how code is formatted. **Test with the CLI:** ```bash 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](https://github.com/prettier/prettier/issues). ### 2. Search Existing Issues Your issue may already be reported. Search [existing issues](https://github.com/prettier/prettier-vscode/issues) before opening a new one. ### 3. Check the Troubleshooting Guide Many common problems are covered in our [Troubleshooting Guide](troubleshooting.md). --- ## Opening an Issue ### Choose the Right Template We have different issue templates for different types of problems: | Template | Use When | | --------------------- | --------------------------------- | | **Bug Report** | Something isn't working correctly | | **Feature Request** | You want new functionality | | **Performance Issue** | Formatting is slow | Click "New Issue" and select the appropriate template. **Do not open blank issues**—they will be closed automatically. ### Required Information All bug reports require: | Field | Why We Need It | | --------------------------- | ------------------------------------------------------------------------------------------------------------ | | **Reproduction Repository** | Most issues are configuration-specific. Without a repo we can clone, we usually cannot diagnose the problem. | | **Steps to Reproduce** | Clear steps help us see exactly what you're experiencing. | | **Prettier Extension Logs** | The logs show us what the extension is doing and often reveal the problem immediately. | | **Environment Info** | VS Code version, extension version, OS, Prettier version | ### Creating a Reproduction Repository 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 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 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 - 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 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 | Type | Where to Go | | ---------------------------- | ---------------------------------------------------------------------------- | | Prettier formatting behavior | [prettier/prettier](https://github.com/prettier/prettier/issues) | | Configuration questions | [Stack Overflow](https://stackoverflow.com/questions/tagged/prettier-vscode) | | General VS Code issues | [VS Code Issues](https://github.com/microsoft/vscode/issues) | --- --- METRICS --- - Files Extracted: 6 - Estimated Token Budget: ~9838 tokens - Canonical Reference: https://codewiki.google/github.com/prettier/prettier-vscode