# prettier/prettier-vscode

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/prettier-prettier-vscode).**

5,504 stars · 522 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/prettier/prettier-vscode
- Homepage: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- awesome-repositories: https://awesome-repositories.com/repository/prettier-prettier-vscode.md

## Description

This is a Visual Studio Code extension that integrates the Prettier formatting engine into the editor. It serves as a bridge to provide opinionated, multi-language code styling by reprinting source code from a syntax tree to enforce consistent layout and line wrapping.

The extension enables automated formatting upon saving or on command, ensuring a uniform codebase across teams. It resolves styling rules by merging editor preferences, EditorConfig files, and local configuration files, and can coordinate with linters to resolve conflicting stylistic rules.

The system supports a wide range of programming languages and markup formats, with the ability to expand language support through plugins and custom file extension mapping. It handles formatter version resolution by prioritizing project-local installations over bundled versions and tracks cursor positions to maintain the caret location after code modifications.

## Tags

### Development Tools & Productivity

- [Automatic Code Formatters](https://awesome-repositories.com/f/development-tools-productivity/automatic-code-formatters.md) — Automatically rewrites source code to adhere to consistent visual styles and syntax standards. ([source](https://cdn.jsdelivr.net/gh/prettier/prettier-vscode@main/README.md))
- [Style Rule Configurations](https://awesome-repositories.com/f/development-tools-productivity/command-line-configuration/style-rule-configurations.md) — Provides customizable settings files to define code formatting and styling rules for consistent output. ([source](https://cdn.jsdelivr.net/gh/prettier/prettier-vscode@main/README.md))
- [Code Formatters](https://awesome-repositories.com/f/development-tools-productivity/ide-integration-plugins/code-formatters.md) — Serves as a bridge between the VS Code editor and the Prettier formatting engine to automate style compliance.
- [Multi-Language Formatting Support](https://awesome-repositories.com/f/development-tools-productivity/multi-language-formatting-support.md) — Supports consistent styling across a wide variety of programming languages and markup formats. ([source](https://prettier.io/))
- [Universal Code Formatters](https://awesome-repositories.com/f/development-tools-productivity/universal-code-formatters.md) — Provides a system supporting a wide variety of programming languages and markup formats through a single configuration.
- [VS Code Extensions](https://awesome-repositories.com/f/development-tools-productivity/vs-code-extensions.md) — Integrates Prettier into Visual Studio Code to align editor behavior with project configurations and EditorConfig files.
- [Editor Provider Implementations](https://awesome-repositories.com/f/development-tools-productivity/vscode-editor-integrations/extension-hosting/editor-provider-implementations.md) — Integrates the formatting engine into Visual Studio Code by implementing the editor's document formatting provider interface.
- [Language](https://awesome-repositories.com/f/development-tools-productivity/build-plugin-architectures/gradle-convention-plugins/formatting-plugins/language.md) — Allows the extension of language support by loading external formatting plugins from project dependencies. ([source](https://cdn.jsdelivr.net/gh/prettier/prettier-vscode@main/README.md))
- [Path-Based Formatting Overrides](https://awesome-repositories.com/f/development-tools-productivity/code-quality-analysis/static-analysis-engines/static-analysis-tools/static-analysis-rules/framework-linting-rules/core-rule-extensions/custom-lint-rule-plugins/custom-lint-rule-definitions/custom-formatting-rules/path-based-formatting-overrides.md) — Customizes styling rules for specific file extensions or folders to accommodate varying project requirements. ([source](https://prettier.io/docs/en/configuration.html))
- [Configuration Resolution Engines](https://awesome-repositories.com/f/development-tools-productivity/command-line-configuration/style-rule-configurations/configuration-resolution-engines.md) — Locates and parses configuration files or editor settings for a specific path to determine applicable formatting rules. ([source](https://prettier.io/docs/en/api.html))
- [EditorConfig Integrations](https://awesome-repositories.com/f/development-tools-productivity/editorconfig-integrations.md) — Imports properties from EditorConfig files to align formatting behavior with project-level editor settings. ([source](https://prettier.io/docs/en/configuration.html))
- [File Extension Language Mappings](https://awesome-repositories.com/f/development-tools-productivity/file-extension-language-mappings.md) — Links non-standard file extensions to specific languages using glob patterns for formatting. ([source](https://cdn.jsdelivr.net/gh/prettier/prettier-vscode@main/README.md))
- [Linter-Formatter Conflict Resolution](https://awesome-repositories.com/f/development-tools-productivity/linter-formatter-conflict-resolution.md) — Coordinates with linters to disable conflicting stylistic rules and ensure the formatter remains the single source of truth. ([source](https://prettier.io/docs/en/integrating-with-linters.html))
- [Conflict Resolution Layers](https://awesome-repositories.com/f/development-tools-productivity/prettier-plugins/conflict-resolution-layers.md) — Provides configuration layers that resolve conflicts between linting rules and the Prettier formatter.
- [Plugin-Based Language Extensions](https://awesome-repositories.com/f/development-tools-productivity/project-configuration/toml-configuration-support/multi-format-support/plugin-based-language-extensions.md) — The ability to load external modules via configuration or API to add support for additional languages and syntax patterns. ([source](https://prettier.io/docs/en/plugins.html))

### Software Engineering & Architecture

- [Source Code Formatting](https://awesome-repositories.com/f/software-engineering-architecture/source-code-formatting.md) — Provides automated source code formatting by applying consistent styling rules to documents or selected text. ([source](https://prettier.io/docs/en/))
- [File Format Detectors](https://awesome-repositories.com/f/software-engineering-architecture/custom-log-formatting/automatic-format-detection/file-format-detectors.md) — Detects the correct parser or determines if a file should be ignored based on file metadata. ([source](https://prettier.io/docs/en/api.html))
- [Language Support Plugins](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/language-support-plugins.md) — Allows the addition of new languages and custom syntax patterns via external plugin modules.
- [Style Enforcement Strategies](https://awesome-repositories.com/f/software-engineering-architecture/style-enforcement-strategies.md) — Enforces shared formatting rules across teams to ensure a uniform codebase and avoid style conflicts.
- [Tool Binary Resolution](https://awesome-repositories.com/f/software-engineering-architecture/directory-based-version-resolution/tool-binary-resolution.md) — Prioritizes project-local formatter installations over bundled versions to ensure version consistency.

### DevOps & Infrastructure

- [Configuration Cascade Resolutions](https://awesome-repositories.com/f/devops-infrastructure/configuration-management/configuration-resolution-engines/configuration-cascade-resolutions.md) — Resolves final styling rules by merging editor settings, EditorConfig, and local configuration files.

### Programming Languages & Runtimes

- [Multi-Language Formatting Engines](https://awesome-repositories.com/f/programming-languages-runtimes/multi-language-formatting-engines.md) — Manages styling rules and parsers for a wide variety of programming languages and markup formats through a single system.
- [Opinionated Formatting Engines](https://awesome-repositories.com/f/programming-languages-runtimes/opinionated-formatting-engines.md) — Reprint source code from a syntax tree to enforce a consistent and opinionated layout and line wrapping.
- [Parser-to-File Mapping](https://awesome-repositories.com/f/programming-languages-runtimes/parser-to-file-mapping.md) — Maps file extensions and project configurations to the appropriate syntax parser for formatting.

### Part of an Awesome List

- [On-Save Formatting](https://awesome-repositories.com/f/awesome-lists/devtools/code-formatting/on-save-formatting.md) — Automatically applies code styling rules whenever a file is saved to the disk. ([source](https://cdn.jsdelivr.net/gh/prettier/prettier-vscode@main/README.md))
- [Development Utilities](https://awesome-repositories.com/f/awesome-lists/devtools/development-utilities.md) — Integrates code formatting and linting via the popular formatter.

### Testing & Quality Assurance

- [Formatting Verification](https://awesome-repositories.com/f/testing-quality-assurance/formatting-verification.md) — Provides a check to verify if files adhere to styling rules without applying changes, ideal for CI pipelines. ([source](https://prettier.io/docs/en/api.html))
