Prettier Pro - Code formatter

Prettier Pro – Code Formatter for VS Code

Prettier Pro is a smart and customizable code formatting extension for Visual Studio Code, developed by cudra-development and published by cudra-production.

Key Features

• Effortlessly format JavaScript, TypeScript, JSON, CSS, HTML, Markdown, and many more languages.
• Supports additional languages through Prettier plugins.
• Consistent code style enforcement and automatic formatting.
• Integration with project, global, and VS Code settings.

Supported Languages

• JavaScript, TypeScript, Flow, JSX, JSON
• CSS, SCSS, Less
• HTML, Vue, Angular, Handlebars, Ember, Glimmer
• GraphQL, Markdown, YAML
• Plus others with Prettier plugins

Quick Start

Install via the VS Code extension marketplace by searching:

Prettier Pro - Code formatter

Or use Quick Open (Ctrl+P or Cmd+P) and run:

ext install vsce-prettier-pro

Making Prettier Pro Your Default Formatter

To make sure Prettier Pro is always used, add to your settings.json:

{
  "editor.defaultFormatter": "vsce-prettier-pro",
  "[javascript]": {
    "editor.defaultFormatter": "vsce-prettier-pro"
  }
}

Configure per-language or disable format-on-save as preferred:

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

How Prettier Is Resolved

The extension prefers your project’s local Prettier, but can use global Prettier if prettier.resolveGlobalModules is enabled.

Install locally for best results:

npm install prettier -D --save-exact

You'll be prompted before loading the Prettier module from your project.

Using Prettier 3

Prettier Pro is compatible with Prettier 3.x. To use it, install a modern Prettier version:

npm install prettier@latest -D

Plugin Support

Any valid Prettier plugins listed in your package.json will be loaded automatically with your chosen Prettier version.

Configuration Options

Configure Prettier Pro via:

• Prettier configuration files (.prettierrc, prettier.config.js, etc.)
• .editorconfig
• VS Code workspace/user settings (as a fallback)

A project-level config is highly recommended to ensure style uniformity.

Set a global config with:

{
  "prettier.configPath": "~/path/to/.prettierrc"
}

Note: This will override project configurations.

Usage Guide

Format Document / Selection

Open the Command Palette and choose:

• Prettier Pro: Format Document
• Prettier Pro: Format Selection

Or bind your own shortcuts for:

• editor.action.formatDocument
• editor.action.formatSelection

Format On Save

{
  "editor.formatOnSave": true
}

Supported for Selection Formatting

• javascript
• typescript
• json
• graphql
• handlebars
• javascriptreact
• typescriptreact

Forced Formatting

Use Format Document (Forced) to format files typically ignored (e.g., in .prettierignore).

Recommended Linter Setup

Let Prettier Pro handle formatting, and disable style-related rules in your linter for the best results.

Trust & Security

If your workspace is untrusted, only the built-in Prettier will run, plugins and external modules are disabled.

Main Extension Settings

• prettier.enable
• prettier.requireConfig
• prettier.ignorePath
• prettier.configPath
• prettier.prettierPath
• prettier.resolveGlobalModules
• prettier.documentSelectors
• prettier.useEditorConfig
• prettier.withNodeModules

Consult the VS Code documentation for a detailed list and descriptions.

Troubleshooting

"Failed to load module"

Install missing dependencies with:

npm install

"Outdated Prettier version"

Upgrade your Prettier package to the latest version.

"Workspace not trusted"

Trust your workspace to enable Prettier plugins and local/global modules.

Links

• GitHub
• Marketplace
• Docs

License

MIT © cudra-development